Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Browser Automated Tests
derek-b
April 09, 2018
Programming
1
260
Browser Automated Tests
Combine Headless Chrome with Mocha, Chai and Node to automatically test your web pages.
derek-b
April 09, 2018
Tweet
Share
More Decks by derek-b
See All by derek-b
derekb
0
8
derekb
1
41
derekb
0
81
derekb
0
23
derekb
1
140
derekb
0
60
derekb
0
50
derekb
0
51
derekb
0
120
Other Decks in Programming
See All in Programming
selcukusta
2
110
korosuke613
2
270
lovee
2
220
minamijoyo
3
520
joergneumann
0
130
panini
1
160
hyodol2513
0
630
lovee
9
2.9k
ryokbt
2
310
tetsukick
0
180
kilometer
4
500
manfredsteyer
PRO
0
170
Featured
See All Featured
zakiwarfel
88
3.4k
cherdarchuk
71
260k
qrush
285
19k
holman
461
280k
roundedbygravity
242
21k
malarkey
119
16k
chrislema
173
14k
lauravandoore
437
28k
matthewcrist
73
7.5k
paulrobertlloyd
72
1.4k
hannesfritz
28
950
jasonvnalue
81
8.1k
Transcript
Browser Automated Tests Derek Binkley @DerekB_WI
Derek Binkley @DerekB_WI Designer? Developer? Other?
What is It?
Derek Binkley @DerekB_WI Testing Tools • Text based • Page
recorder • Selenium WebDriver • Browser Emulator
Derek Binkley @DerekB_WI Headless Chrome • June 2017 • Full
browser • Chrome Dev Tools • No GUI
Is Anybody There?
Derek Binkley @DerekB_WI Why? • Reliability • Dependability • Sleep
better after an update
What do we need? Node Chrome Puppeteer Mocha Chai
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 Setup Command package.json
Examples
Derek Binkley @DerekB_WI Basics • Test Defined as JavaScript •
Full Access to DOM • Assertions using Chai
Derek Binkley @DerekB_WI First Test
Derek Binkley @DerekB_WI First Test
Derek Binkley @DerekB_WI Test Search
Derek Binkley @DerekB_WI Test Search
Derek Binkley @DerekB_WI Test Failed
Derek Binkley @DerekB_WI Test Failed
Derek Binkley @DerekB_WI Screenshots
Derek Binkley @DerekB_WI Screenshots
Derek Binkley @DerekB_WI Interactive Test
Derek Binkley @DerekB_WI Interactive Test
Derek Binkley @DerekB_WI Reacting to Changes • Changing link names
• Changing server builds • Partners changing integrations • New branding
Derek Binkley @DerekB_WI Thanks • @DerekB_WI • http:/ /derekb-wi.com
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