Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Browser Automation Testing
derek-b
June 05, 2018
0
120
Browser Automation Testing
derek-b
June 05, 2018
Tweet
Share
More Decks by derek-b
See All by derek-b
Pardon the disruption: a user-first approach to software design
derekb
0
14
Teaching Through Code Review
derekb
0
78
Add Location-Based Searching to Your Site with Elasticsearch
derekb
0
13
Add Location-based Searching to Your PHP App with Elasticsearch
derekb
1
110
Map, Filter, and Reduce in PHP
derekb
0
180
You Version Your Code, Why Not Your Database?
derekb
0
42
Taming Your Data with Elasticsearch - PHP Benelux
derekb
1
230
What Raising 3 Kids Taught Me About Working With Users
derekb
0
130
Taming Your Data With Elasticsearch - PHP[world]
derekb
0
130
Featured
See All Featured
A designer walks into a library…
pauljervisheath
196
16k
Why Our Code Smells
bkeepers
PRO
324
55k
What’s in a name? Adding method to the madness
productmarketing
11
1.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
GitHub's CSS Performance
jonrohan
1020
420k
The Language of Interfaces
destraynor
148
20k
The Mythical Team-Month
searls
209
39k
A better future with KSS
kneath
225
15k
What's new in Ruby 2.0
geeforr
336
30k
YesSQL, Process and Tooling at Scale
rocio
157
12k
The Pragmatic Product Professional
lauravandoore
19
3k
Code Review Best Practice
trishagee
43
9.3k
Transcript
Browser Automated Testing with Headless Chrome Derek Binkley @DerekB_WI
Derek Binkley @DerekB_WI Who Am I? • Derek Binkley •
@TurnTo networks • Married, 2 daughters, 1 son
None
None
Customer Generated Content
Derek Binkley @DerekB_WI JavaScript Experience?
What is It?
Derek Binkley @DerekB_WI What Are We Doing? • Automate a
browser • Try out a site/application • Validate functionality
Derek Binkley @DerekB_WI Headless Chrome • June 2017 • Full
browser • Chrome Dev Tools • No GUI
Headless Chrome will replace PhantomJS
Is Anybody There?
Derek Binkley @DerekB_WI Why? • Reliability • Dependability • Sleep
better after an update
Derek Binkley @DerekB_WI Install • npm init • npm i
—save mocha chai • npm i --save puppeteer • Add test script to package.json
Derek Binkley @DerekB_WI Basics • Test Defined as JavaScript •
Full Access to DOM • Assertions using Chai • Run using Mocha
Derek Binkley @DerekB_WI Setup Command package.json
Let’s Get Working
Imports
Test Suite Setup
Setup and Teardown
The Assertion
Run the Test
Example 2
None
None
Setup Next Test
Click a Button
CSS Class Change
Evaluate page
Run the Test
Take a Screenshot
afterEach() runs after every test
Example 4
Print to PDF
• Try out some pdf options of your own •
https:/ /github.com/GoogleChrome/puppeteer/blob/ master/docs/api.md#pagepdfoptions
Example 5
None
page.type
Challenge: Write test for blank input. Does it pass?
Example 6
Test CSS
page.hover
getComputedStyle()
Example 8
setViewport()
Viewport 1200x800
deviceScaleFactor: 3
viewport 300x200
Emulate a Device
Look for iPhone selector
Testing a login session
Example 10
waitForNavigation
Successful Login
Check for logged in message
Derek Binkley @DerekB_WI Experiment Further const context = await browser.createIncognitoBrowserContext();
page.focus(‘#myselector’) page.mouse.move(x, y, [options]) page.mouse.click(x, y, [options]) page.keyboard.press(‘Tab’) page.touchscreen.tap(x, y) https:/ /github.com/GoogleChrome/puppeteer/blob/master/docs/api.md
None
Derek Binkley @DerekB_WI Thanks Bedankt • @DerekB_WI • https:/ /joind.in/talk/e62ac
Derek Binkley @DerekB_WI Resources • https:/ /developers.google.com/web/updates/2017/06/headless-karma-mocha-chai • https:/ /medium.com/@ankit_m/ui-testing-with-puppeteer-and-mocha-part-1-
getting-started-b141b2f9e21 • https:/ /github.com/GoogleChrome/puppeteer • https:/ /github.com/checkly/puppeteer-examples • https:/ /puppeteersandbox.com/ • https:/ /groups.google.com/forum/m/#!topic/phantomjs/9aI5d-LDuNE • Photos courtesy of https:/ /www.flickr.com/photos/internetarchivebookimages • https:/ /medium.com/@kensoh/chromeless-chrominator-chromy-navalia-lambdium- ghostjs-autogcd-ef34bcd26907