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 Automated Tests
Search
derek-b
April 09, 2018
Programming
1
310
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
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
25
Add Location-based Searching to Your PHP App with Elasticsearch
derekb
1
280
Map, Filter, and Reduce in PHP
derekb
0
570
You Version Your Code, Why Not Your Database?
derekb
0
54
Taming Your Data with Elasticsearch - PHP Benelux
derekb
1
390
What Raising 3 Kids Taught Me About Working With Users
derekb
0
290
Other Decks in Programming
See All in Programming
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
770
Terraformテスト入門
msato
0
520
CSC307 Lecture 13
javiergs
PRO
0
150
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
Trial
cairolibrary720
1
130
日付と正規化
megmogmog1965
0
140
最近追加した型の紹介とその振り返り
aki19035vc
0
170
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
英語
s_shimotori
1
220
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
Featured
See All Featured
Speed Design
sergeychernyshev
9
270
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Facilitating Awesome Meetings
lara
46
5.8k
Typedesign – Prime Four
hannesfritz
37
2.2k
Design by the Numbers
sachag
277
18k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
Producing Creativity
orderedlist
PRO
340
39k
What the flash - Photography Introduction
edds
65
11k
Docker and Python
trallard
37
2.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
Into the Great Unknown - MozCon
thekraken
20
1.3k
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