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
Become a Pro
speakerdeck
PRO
29
5.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Designing for Performance
lara
610
69k
Statistics for Hackers
jakevdp
799
220k
Speed Design
sergeychernyshev
32
1.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
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