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
55
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
40
Add Location-based Searching to Your PHP App with Elasticsearch
derekb
1
340
Map, Filter, and Reduce in PHP
derekb
0
790
You Version Your Code, Why Not Your Database?
derekb
0
64
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
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Agile that works and the tools we love
rasmusluckow
331
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
RailsConf 2023
tenderlove
30
1.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Balancing Empowerment & Direction
lara
4
680
GraphQLとの向き合い方2022年版
quramy
49
14k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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