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
210
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
38
Pardon the disruption: a user-first approach to software design
derekb
0
68
Teaching Through Code Review
derekb
0
92
Add Location-Based Searching to Your Site with Elasticsearch
derekb
0
24
Add Location-based Searching to Your PHP App with Elasticsearch
derekb
1
250
Map, Filter, and Reduce in PHP
derekb
0
500
You Version Your Code, Why Not Your Database?
derekb
0
52
Taming Your Data with Elasticsearch - PHP Benelux
derekb
1
370
What Raising 3 Kids Taught Me About Working With Users
derekb
0
250
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
Writing Fast Ruby
sferik
621
60k
The Brand Is Dead. Long Live the Brand.
mthomps
49
28k
Building Adaptive Systems
keathley
31
1.9k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Docker and Python
trallard
34
2.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
Code Reviewing Like a Champion
maltzj
514
39k
Building Your Own Lightsaber
phodgson
99
5.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.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