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
330
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
42
Pardon the disruption: a user-first approach to software design
derekb
0
72
Teaching Through Code Review
derekb
0
94
Add Location-Based Searching to Your Site with Elasticsearch
derekb
0
27
Add Location-based Searching to Your PHP App with Elasticsearch
derekb
1
310
Map, Filter, and Reduce in PHP
derekb
0
700
You Version Your Code, Why Not Your Database?
derekb
0
55
Taming Your Data with Elasticsearch - PHP Benelux
derekb
1
440
What Raising 3 Kids Taught Me About Working With Users
derekb
0
360
Other Decks in Programming
See All in Programming
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
Learning Kotlin with detekt
inouehi
1
150
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
310
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.2k
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
210
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
200
AWS Step Functions は CDK で書こう!
konokenj
4
540
はじめての Go * WASM *OCR
sgash708
1
110
AIプログラミング雑キャッチアップ
yuheinakasaka
19
4.8k
読まないコードリーディング術
hisaju
0
110
Swift Testingのモチベを上げたい
stoticdev
2
140
Datadog Workflow Automation で圧倒的価値提供
showwin
1
260
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
A Philosophy of Restraint
colly
203
16k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
What's in a price? How to price your products and services
michaelherold
244
12k
Side Projects
sachag
452
42k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Embracing the Ebb and Flow
colly
84
4.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
650
Documentation Writing (for coders)
carmenintech
67
4.6k
GitHub's CSS Performance
jonrohan
1030
460k
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