$30 off During Our Annual Pro Sale. View Details »

Web Acceptance Testing For Grumpy Programmers

Web Acceptance Testing For Grumpy Programmers

How you can bend Behat + Mink + PhantomJS to your will to create web acceptance tests

Chris Hartjes

May 15, 2013
Tweet

More Decks by Chris Hartjes

Other Decks in Programming

Transcript

  1. Web Acceptance
    Testing
    For Grumpy
    Programmers
    php|tek 2013
    May 15, 2013
    Chris Hartjes

    View Slide

  2. whoami

    View Slide

  3. Test vs. Test

    View Slide

  4. A New Test Type

    View Slide

  5. A New Test Type
    “BDD is a second-generation, outside–in,
    pull-based, multiple-stakeholder, multiple-
    scale, high-automation, agile methodology. It
    describes a cycle of interactions with well-
    defined outputs, resulting in the delivery of
    working, tested software that matters”

    View Slide

  6. A New Test Type

    View Slide

  7. A New Test Type
    Behavior-driven development specifies that
    tests of any unit of software should be
    specified in terms of the desired behavior of
    the unit.

    View Slide

  8. What’s The Scenario
    Given I am in a talk
    When the speaker is presenting
    And he glares at me
    I remain quiet

    View Slide

  9. What’s The Scenario
    Tests are readable by people first
    Non-technical people can be taught the DSL

    View Slide

  10. Getting Started?

    View Slide

  11. Behat

    View Slide

  12. What Is It?
    “A PHP framework for testing your business expectations”
    http://behat.org

    View Slide

  13. How Do I Use It
    1. Install it via Composer
    2. ???
    3. Profit!

    View Slide

  14. How Do I Use It?
    1. Install via Composer
    2. Create a Feature with a Scenario
    3. Run your test
    4. Profit!

    View Slide

  15. Installing

    View Slide

  16. Create Your Feature File

    View Slide

  17. What Is A Scenario?
    A test that covers specific behavior you wish to test

    View Slide

  18. What Is A Scenario?

    View Slide

  19. First Run

    View Slide

  20. Steps To Implement

    View Slide

  21. Steps To Implement

    View Slide

  22. Write Some Code

    View Slide

  23. Scenario Passes!

    View Slide

  24. What About Web Testing?

    View Slide

  25. Mink
    Framework for doing web acceptance testing
    Sits between Behat and browser emulator
    http://mink.behat.org

    View Slide

  26. Installing

    View Slide

  27. Browser Emulation

    View Slide

  28. How does it help?
    Provides a common API for browser interaction
    Provides built-in functionality for common tasks

    View Slide

  29. Goutte
    Pure PHP browser emulator
    Great for testing non-Javascript functionality

    View Slide

  30. Installing Goutte

    View Slide

  31. Behat + Goutte Config

    View Slide

  32. Sample Mink Feature

    View Slide

  33. Proof!

    View Slide

  34. What About JavaScript?

    View Slide

  35. PhantomJS

    View Slide

  36. PhantomJS
    Headless browser based on WebKit
    Node app (don’t worry, npm will save you)

    View Slide

  37. Installing PhantomJS
    Good instructions at
    http://slid.es/gimler/behat-mink-phantomjs
    Install npm (Node Package Manager)
    `npm install -g phantomjs`

    View Slide

  38. Selenium2 + PHPUnit

    View Slide

  39. Why Selenium2?
    PhantomJS can pretend to be a standalone Selenium2 server
    Configure Behat to send JavaScript scenarios to it

    View Slide

  40. Behat + PhantomJS

    View Slide

  41. Behat + PHPUnit
    Adds support for generic assertions

    View Slide

  42. Adding in PHPUnit

    View Slide

  43. Run PhantomJS
    `phantomjs --phantomjs --webdriver=8643`

    View Slide

  44. Our first JS Scenario

    View Slide

  45. Proof!

    View Slide

  46. Now it gets grumpier

    View Slide

  47. CSS Selectors
    Best way to locate specific elements on a page
    If you disliked CSS before, this might push you over the edge

    View Slide

  48. Y U MAD CHRIS?
    'html body div.container div.row div.span9 section#modals
    div#myModal.modal div.modal-header h3#myModalLabel'
    TOTALLY INTUITIVE
    Learn your browser debugger tools well

    View Slide

  49. Pro Tip #1
    Give all your elements ID’s
    Make it easier for CSS selectors to find them

    View Slide

  50. Waiting For JavaScript
    Behat steps will need wait() commands for JS
    Gives time for browser to render
    Acceptance tests are not supposed to be fast

    View Slide

  51. Pro Tip #2
    Be conservative in your waiting estimates

    View Slide

  52. Breaking down the steps

    View Slide

  53. Breaking down the steps

    View Slide

  54. Lessons Learned
    WAT is definitely “test-after”
    Learn CSS really well or else Twitter Rage ensues
    Good ratio is 90% unit - 10% WAT

    View Slide

  55. Lessons Learned
    Keep your feature files focused to scenario groups
    Create app-critical scenarios

    View Slide

  56. Advanced Level
    Different Behat configuration files for different environments
    `behat ---config `

    View Slide

  57. Advanced Level
    Use Behat Gearman extension to run scenarios in parallel
    http://extensions.behat.org/gearman/

    View Slide

  58. Building Testable Apps
    http://grumpy-testing.com

    View Slide

  59. PHPUnit Cookbook
    http://grumpy-phpunit.com

    View Slide

  60. Testing Screencasts

    View Slide

  61. Thank You!
    https://github.com/chartjes/wat-tek13
    https://joind.in/8167
    @grmpyprogrammer

    View Slide