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
370
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
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
480
What Raising 3 Kids Taught Me About Working With Users
derekb
0
400
Other Decks in Programming
See All in Programming
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.3k
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
250
Cursorハンズオン実践!
eltociear
2
1.2k
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
230
CSC305 Lecture 09
javiergs
PRO
0
300
One Enishi After Another
snoozer05
PRO
0
140
開発生産性を上げるための生成AI活用術
starfish719
3
1.6k
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
290
Devoxx BE - Local Development in the AI Era
kdubois
0
130
All About Angular's New Signal Forms
manfredsteyer
PRO
0
200
Devvox Belgium - Agentic AI Patterns
kdubois
1
130
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
4
1.8k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
Optimizing for Happiness
mojombo
379
70k
Docker and Python
trallard
46
3.6k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Documentation Writing (for coders)
carmenintech
75
5.1k
Agile that works and the tools we love
rasmusluckow
331
21k
Speed Design
sergeychernyshev
32
1.2k
Music & Morning Musume
bryan
46
6.9k
Building an army of robots
kneath
306
46k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.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