Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

whoami

Slide 3

Slide 3 text

Test vs. Test

Slide 4

Slide 4 text

A New Test Type

Slide 5

Slide 5 text

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”

Slide 6

Slide 6 text

A New Test Type

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Getting Started?

Slide 11

Slide 11 text

Behat

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Installing

Slide 16

Slide 16 text

Create Your Feature File

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

What Is A Scenario?

Slide 19

Slide 19 text

First Run

Slide 20

Slide 20 text

Steps To Implement

Slide 21

Slide 21 text

Steps To Implement

Slide 22

Slide 22 text

Write Some Code

Slide 23

Slide 23 text

Scenario Passes!

Slide 24

Slide 24 text

What About Web Testing?

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Installing

Slide 27

Slide 27 text

Browser Emulation

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Installing Goutte

Slide 31

Slide 31 text

Behat + Goutte Config

Slide 32

Slide 32 text

Sample Mink Feature

Slide 33

Slide 33 text

Proof!

Slide 34

Slide 34 text

What About JavaScript?

Slide 35

Slide 35 text

PhantomJS

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Selenium2 + PHPUnit

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Behat + PhantomJS

Slide 41

Slide 41 text

Behat + PHPUnit Adds support for generic assertions

Slide 42

Slide 42 text

Adding in PHPUnit

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Our first JS Scenario

Slide 45

Slide 45 text

Proof!

Slide 46

Slide 46 text

Now it gets grumpier

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Pro Tip #2 Be conservative in your waiting estimates

Slide 52

Slide 52 text

Breaking down the steps

Slide 53

Slide 53 text

Breaking down the steps

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

PHPUnit Cookbook http://grumpy-phpunit.com

Slide 60

Slide 60 text

Testing Screencasts

Slide 61

Slide 61 text

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