Behat + Mink + PhantomJS = TEST ALL THE THINGS!

Transcript

1. @michellesanver Behat+Mink+PhantomJS = TEST ALL THE THINGS* * Maybe not all the things
2. @michellesanver
3. @michellesanver WIIIIIIIE \o/ “Learn the most by sharing your knowledge with others” - @coderabbi
4. @michellesanver Let’s talk Come forward
5. @michellesanver This talk is entry-level.
6. @michellesanver
7. @michellesanver
8. @michellesanver Michelle Sanver
9. @michellesanver Michelle Sanver Co-President of PHPWomen
10. @michellesanver PHPWomen 30 dollars
11. @michellesanver Michelle Sanver Accent(s)!?
12. @michellesanver Michelle Sanver
13. @michellesanver I’m a backend developer.
14. @michellesanver
15. @michellesanver This talk is Open Source
16. @michellesanver Audience Do you test your application? (With automatic testing not just clicking in a browser)
17. @michellesanver I would have a picture of grumpy programmer here, but I didn’t want to pay the royalties.
18. @michellesanver “My code is so awesome, I don’t need tests.” - LoneStar PHP conference attendee
19. @michellesanver Audience Do you use PHPUnit?
20. @michellesanver Audience TDD? BDD?
21. @michellesanver First I will explain how the individual parts work
22. @michellesanver Then how it fits together
23. @michellesanver Behat + Mink + PhantomJS Gherkin PhantomJS OR webdriver MinkContext FeatureContext Behat
24. @michellesanver What is Behat anyway?
25. @michellesanver Behat!? Behat is a Behaviour Driven Development framework
26. @michellesanver Erm, what is BDD, anyway?
27. @michellesanver BDD BDD is clearly defined behaviour and English spoken tests :D
28. @michellesanver BDD BDD = TDD + Spices
29. @michellesanver Why we chose Behat
30. @michellesanver Gherkin Defining your behaviour
31. @michellesanver Gherkin Feature: List
 In order to use the shoppinglist
 As a website user
 I need to be able to see the shoppinglist and use its elements
 
 @anonymous
 Scenario: Visit shoppinglist page as anonymous
 Given I am not logged in
 And I am on profile “shopping lists"
 Then I should see “My shopping lists"
 And I should see “I don’t have an M-connect account yet“
 
 @loggedin
 Scenario: See the shoppinglist
 Given I am logged in
 And I am on profile “shopping lists"
 Then I should see "My shopping lists"
 And I should see "I don’t have an M-connect account yet"
32. @michellesanver Gherkin: Feature Feature: List
 In order to use the shoppinglist
 As a website user
 I need to be able to see the shoppinglist and use its elements
 
 @anonymous
 Scenario: Visit shoppinglist page as anonymous
 Given I am not logged in
 And I am on profile “shopping lists"
 Then I should see “My shopping lists"
 And I should see “I don’t have an M-connect account yet“
 
 @loggedin
 Scenario: See the shoppinglist
 Given I am logged in
 And I am on profile “shopping lists"
 Then I should see “My shopping lists"
 And I should see “Active lists"
33. @michellesanver Gherkin: Scenario Feature: List
 In order to use the shoppinglist
 As a website user
 I need to be able to see the shoppinglist and use its elements
 
 Scenario: Larry garfield at a conference
 Given I am Larry Garfield
 And I am at a conference
 Then I should wear “Blue shirt”
 And I should wear “Leather vest"
 
 @loggedin
 Scenario: See the shoppinglist
 Given I am logged in
 And I am on profile “shopping lists"
 Then I should see “My shopping lists"
 And I should see “Active lists"
34. @michellesanver Gherkin Given, Whens, Thens Scenario: Larry garfield at a conference
 Given I am Larry Garfield
 And I am at a conference
 Then I should wear “Blue shirt”
 And I should wear “Leather vest"
35. @michellesanver Gherkin And + But Scenario: Larry garfield at a conference
 Given I am Larry Garfield
 And I am at a conference
 Then I should wear “Blue shirt”
 And I should wear “Leather vest"
36. @michellesanver Gherkin: Background Feature: Multiple site support
 
 Background:
 Given a global administrator named "Greg"
 And a blog named "Greg's anti-tax rants"
 And a customer named "Wilson"
 And a blog named "Expensive Therapy" owned by "Wilson"
 
 Scenario: Wilson posts to his own blog
 Given I am logged in as Wilson
 When I try to post to "Expensive Therapy"
 Then I should see "Your article was published."
 
 Scenario: Greg posts to a client's blog
 Given I am logged in as Greg
 When I try to post to "Expensive Therapy"
 Then I should see "Your article was published."
37. @michellesanver Gherkin: Scenario Outlines Scenario: Drink 5 out of 12
 Given there are 12 beers
 When I drink 5 beers
 Then I should have 7 beers
 
 Scenario: Drink 5 out of 20
 Given there are 20 beers
 When I drink 5 beers
 Then I should have 15 beers
38. @michellesanver Gherkin: Scenario Outlines Scenario Outline: PHPDay social
 Given there are <start> beers
 When I drink <drink> beers
 Then I should have <left> beers
 
 Examples:
 | start | drink | left |
 | 12 | 5 | 7 |
 | 20 | 5 | 15 | Keep it DRY
39. @michellesanver Gherkin Tagged Hooks (@loggedin etc that we’ve seen)
40. @michellesanver Reusable Actions: Steps
41. @michellesanver Steps Each keyword (given, when etc.) is a step
42. @michellesanver Steps Automatically add steps by accepting context!
43. @michellesanver Steps use Behat\Behat\Context\SnippetAcceptingContext;
 use Behat\Gherkin\Node\PyStringNode;
 use Behat\Gherkin\Node\TableNode;
 
 class FeatureContext implements SnippetAcceptingContext
 {
 /**
 * Initializes context.
 */
 public function __construct()
 {
 }
 }
44. @michellesanver Steps: Results Pending
45. @michellesanver Steps: Results Failed
46. @michellesanver Steps: Results Skipped
47. @michellesanver Steps: Results Ambigious
48. @michellesanver Steps: Results Reduntant
49. @michellesanver Steps: Results Undefined
50. @michellesanver SUCCESSFUL \o/ :D
51. @michellesanver Hooked on a feeling *bamdabadam* Hooks
52. @michellesanver Hooks Suite Hooks
53. @michellesanver Hooks Feature Hooks
54. @michellesanver Hooks Scenario Hooks
55. @michellesanver Hooks Step Hooks
56. @michellesanver Hooks /** 
 * @BeforeScenario
 */
 public function before(BeforeScenarioScope $scope)
 {
 if($this->getMink()->getDefaultSessionName() == 'selenium2') {
 $this->getSession()->resizeWindow(1200, 768);
 } else {
 self::$client = $this->getSession(‘symfony2') ->getDriver()->getClient();
 self::$container = self::$client->getContainer();
 self::$guzzle = self::$container->get(‘guzzle.api.client’);
 }
 }
57. @michellesanver Tagged hooks /**
 * @BeforeScenario @database,@orm
 */
 public function cleanDatabase()
 {
 // clean database before
 // @database OR @orm scenarios
 }
58. @michellesanver Tagged hooks: && /**
 * @BeforeScenario @database&&@fixtures
 */
 public function cleanDatabase()
 {
 // clean database before
 // @database OR @orm scenarios
 }
59. @michellesanver Context
60. @michellesanver Context Feature How your application behaves Context How to test your application
61. @michellesanver Context FeatureContext Class
62. @michellesanver Context /**
 * @When I do something with :argument
 */
 public function iDoSomethingWith($argument)
 {
 // do something with $argument
 }
63. @michellesanver Context Contact class requirements
64. @michellesanver Context: Class requirements 1. The context class should implement the Behat \Behat\Context\Context interface.
65. @michellesanver Context: Class requirements 2. The context class should be called FeatureContext.
66. @michellesanver Context: Class requirements 3. The context class should be discoverable and loadable by Behat.
67. @michellesanver Context Contexts lifetime
68. @michellesanver Context lifetime Your context class is initialized before each scenario is run
69. @michellesanver Context lifetime 1. Every scenario is isolated from each other scenario’s context.
70. @michellesanver Context lifetime 2. Every step in a single scenario is executed inside a common context instance.
71. @michellesanver Context Multiple contexts
72. @michellesanver Multiple contexts # behat.yml default: suites: default: contexts: - FeatureContext - SecondContext - ThirdContext
73. @michellesanver Writing TESTS
74. @michellesanver Writing Tests A test only fails if an exception is thrown.
75. @michellesanver Writing Tests Write simple tests using PHPUnits assertions.
76. @michellesanver Writing Tests But essentially test ANYTHING YOU’D LIKE, just throw exceptions.
77. @michellesanver Mink
78. @michellesanver Mink Simulate browser behaviour with Mink
79. @michellesanver Mink Clicking links!
80. @michellesanver Mink // wait for animation
 $session->wait(500); 
 // get loginlink
 $loginLinkSelector = '.hidden-phone a.login';
 $loginLink = $page->find('css', $loginLinkSelector); 
 // click loginlink
 $loginLink->click();
81. @michellesanver Mink Drag and drop
82. @michellesanver Fixtures and Mocking
83. @michellesanver Fixtures and Mocking
84. @michellesanver Fixtures and Mocking Any time API responses changed… We cried. :’(
85. @michellesanver Fixtures and Mocking PHP VCR Record HTTP interactions!
86. @michellesanver Fixtures and Mocking PHP VCR Record HTTP interactions and replay them during test runs.
87. @michellesanver PhantomJS Testing JavaScript
88. @michellesanver PhantomJS Headless browser
89. @michellesanver Selenium Driver PhantomJS is a ghost!
90. @michellesanver PhantomJS @javascript
 Scenario: Searching for "tomaten"
 Given I am on "/sortiment/groceries"
 When I search for "tomatoes"
 Then I should see “Your search for tomatoes yielded"

91. @michellesanver PhantomJS /**
 * @When I search for :searchterm
 */
 public function iSearchFor($searchterm)
 {
 
 }
92. @michellesanver PhantomJS $session = $this->getSession();
 $page = $session->getPage();
 
 $searchField = $page->find('css', '.hidden-phone .search-input');
 $searchField->click();
 $searchField->setValue($searchterm);
 
 $searchButton = $page->find('css', '.hidden-phone .search-btn');
 $searchButton->click();
 
 // Wait until we have a search-title with a length longer than 0.
 $session->wait(
 0,
 "$('.search-title').length > 0"
 );
 
 $this->saveScreenshot('debugscreenshot.png', self::DEBUGPATH);

93. @michellesanver PhantomJS $session = $this->getSession();
 $page = $session->getPage();
 
 $searchField = $page->find('css', '.hidden-phone .search-input');
 $searchField->click();
 $searchField->setValue($searchterm);
 
 $searchButton = $page->find('css', '.hidden-phone .search-btn');
 $searchButton->click();
 
 // Wait until we have a search-title with a length longer than 0.
 $session->wait(
 0,
 "$('.search-title').length > 0"
 );
 
 $this->saveScreenshot('debugscreenshot.png', self::DEBUGPATH);

94. @michellesanver PhantomJS $session = $this->getSession();
 $page = $session->getPage();
 
 $searchField = $page->find('css', '.hidden-phone .search-input');
 $searchField->click();
 $searchField->setValue($searchterm);
 
 $searchButton = $page->find('css', '.hidden-phone .search-btn');
 $searchButton->click();
 
 // Wait until we have a search-title with a length longer than 0.
 $session->wait(
 0,
 "$('.search-title').length > 0"
 );
 
 $this->saveScreenshot('debugscreenshot.png', self::DEBUGPATH);

95. @michellesanver PhantomJS $session = $this->getSession();
 $page = $session->getPage();
 
 $searchField = $page->find('css', '.hidden-phone .search-input');
 $searchField->click();
 $searchField->setValue($searchterm);
 
 $searchButton = $page->find('css', '.hidden-phone .search-btn');
 $searchButton->click();
 
 // Wait until we have a search-title with a length longer than 0.
 $session->wait(
 0,
 "$('.search-title').length > 0"
 );
 
 $this->saveScreenshot('debugscreenshot.png', self::DEBUGPATH);

96. @michellesanver PhantomJS $session = $this->getSession();
 $page = $session->getPage();
 
 $searchField = $page->find('css', '.hidden-phone .search-input');
 $searchField->click();
 $searchField->setValue($searchterm);
 
 $searchButton = $page->find('css', '.hidden-phone .search-btn');
 $searchButton->click();
 
 // Wait until we have a search-title with a length longer than 0.
 $session->wait(
 0,
 "$('.search-title').length > 0"
 );
 
 $this->saveScreenshot('debugscreenshot.png', self::DEBUGPATH);

97. @michellesanver Screenshot comparison Compare image code
98. @michellesanver Fitting the pieces together
99. @michellesanver Behat + Mink + PhantomJS Gherkin PhantomJS OR webdriver MinkContext FeatureContext Behat
100. @michellesanver Wrapup
101. @michellesanver Behat and Gherkin A BDD Framework with clearly defined behaviours
102. @michellesanver Contexts and Steps Steps are your tests living in a context, which contains your logic for testing
103. @michellesanver Testing JavaScript Use Mink with a driver, for instance PhantomJS to test dynamic parts of your website.
104. @michellesanver Still not mature for CSS and image comparison.
105. @michellesanver Behat is Open Source
106. @michellesanver Got a bit excited about one Testing Framework for ALL THE THINGS? As developers in an open source community the decision is ours.
107. @michellesanver Contribute How would you use Behat in Drupal? Any caveats you can think of?
108. @michellesanver Open Source Open Discussion
109. @michellesanver Thank you!