Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Browser Automation Testing
Search
derek-b
June 05, 2018
0
280
Browser Automation Testing
derek-b
June 05, 2018
Tweet
Share
More Decks by derek-b
See All by derek-b
What Raising 3 Kids Taught Me About Working with Users
derekb
0
54
Pardon the disruption: a user-first approach to software design
derekb
0
80
Teaching Through Code Review
derekb
0
110
Add Location-Based Searching to Your Site with Elasticsearch
derekb
0
37
Add Location-based Searching to Your PHP App with Elasticsearch
derekb
1
340
Map, Filter, and Reduce in PHP
derekb
0
770
You Version Your Code, Why Not Your Database?
derekb
0
63
Taming Your Data with Elasticsearch - PHP Benelux
derekb
1
470
What Raising 3 Kids Taught Me About Working With Users
derekb
0
400
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
525
40k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Scaling GitHub
holman
463
140k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Designing Experiences People Love
moore
142
24k
Building Adaptive Systems
keathley
43
2.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Facilitating Awesome Meetings
lara
55
6.5k
Building Applications with DynamoDB
mza
96
6.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
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