Web Acceptance Testing For Grumpy Programmers

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

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