Web Acceptance Testing For Grumpy Programmers

Transcript

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

   2013 Chris Hartjes

2. whoami

3. Test vs. Test

4. A New Test Type

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”

6. A New Test Type

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.

8. What’s The Scenario Given I am in a talk When

   the speaker is presenting And he glares at me I remain quiet

9. What’s The Scenario Tests are readable by people first Non-technical

   people can be taught the DSL

10. Getting Started?

11. Behat

12. What Is It? “A PHP framework for testing your business

    expectations” http://behat.org

13. How Do I Use It 1. Install it via Composer

    2. ??? 3. Profit!

14. How Do I Use It? 1. Install via Composer 2.

    Create a Feature with a Scenario 3. Run your test 4. Profit!

15. Installing

16. Create Your Feature File

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

    you wish to test

18. What Is A Scenario?

19. First Run

20. Steps To Implement

21. Steps To Implement

22. Write Some Code

23. Scenario Passes!

24. What About Web Testing?

25. Mink Framework for doing web acceptance testing Sits between Behat

    and browser emulator http://mink.behat.org

26. Installing

27. Browser Emulation

28. How does it help? Provides a common API for browser

    interaction Provides built-in functionality for common tasks

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

30. Installing Goutte

31. Behat + Goutte Config

32. Sample Mink Feature

33. Proof!

34. What About JavaScript?

35. PhantomJS

36. PhantomJS Headless browser based on WebKit Node app (don’t worry,

    npm will save you)

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

    Manager) `npm install -g phantomjs`

38. Selenium2 + PHPUnit

39. Why Selenium2? PhantomJS can pretend to be a standalone Selenium2

    server Configure Behat to send JavaScript scenarios to it

40. Behat + PhantomJS

41. Behat + PHPUnit Adds support for generic assertions

42. Adding in PHPUnit

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

44. Our first JS Scenario

45. Proof!

46. Now it gets grumpier

47. CSS Selectors Best way to locate specific elements on a

    page If you disliked CSS before, this might push you over the edge

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

49. Pro Tip #1 Give all your elements ID’s Make it

    easier for CSS selectors to find them

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

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

52. Breaking down the steps

53. Breaking down the steps

54. Lessons Learned WAT is definitely “test-after” Learn CSS really well

    or else Twitter Rage ensues Good ratio is 90% unit - 10% WAT

55. Lessons Learned Keep your feature files focused to scenario groups

    Create app-critical scenarios

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

    ---config <path to config file>`

57. Advanced Level Use Behat Gearman extension to run scenarios in

    parallel http://extensions.behat.org/gearman/

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

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

60. Testing Screencasts

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