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
360
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
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
39
Add Location-based Searching to Your PHP App with Elasticsearch
derekb
1
340
Map, Filter, and Reduce in PHP
derekb
0
780
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
Other Decks in Programming
See All in Programming
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
220
iOSDC.pdf
chronos2500
2
640
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
160
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
AIを活用したレシート読み取り機能の開発から得られた実践知 / AI Receipt Scan Practice
rockname
2
1.5k
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.4k
Platformに“ちょうどいい”責務ってどこ? 関心の熱さにあわせて考える、責務分担のプラクティス
estie
2
510
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
160
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
120
CSC305 Lecture 03
javiergs
PRO
0
220
Model Pollution
hschwentner
1
180
AccessorySetupKitで実現するシームレスなペアリング体験 / Seamless pairing with AccessorySetupKit
nekowen
0
200
Featured
See All Featured
Faster Mobile Websites
deanohume
310
31k
Code Reviewing Like a Champion
maltzj
525
40k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Become a Pro
speakerdeck
PRO
29
5.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Fireside Chat
paigeccino
40
3.7k
How to Think Like a Performance Engineer
csswizardry
27
2k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Typedesign – Prime Four
hannesfritz
42
2.8k
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