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
350
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
48
Pardon the disruption: a user-first approach to software design
derekb
0
77
Teaching Through Code Review
derekb
0
100
Add Location-Based Searching to Your Site with Elasticsearch
derekb
0
33
Add Location-based Searching to Your PHP App with Elasticsearch
derekb
1
330
Map, Filter, and Reduce in PHP
derekb
0
750
You Version Your Code, Why Not Your Database?
derekb
0
60
Taming Your Data with Elasticsearch - PHP Benelux
derekb
1
460
What Raising 3 Kids Taught Me About Working With Users
derekb
0
380
Other Decks in Programming
See All in Programming
バリデーションライブラリ徹底比較
nayuta999999
1
570
20250528 AWS Startupイベント登壇資料:AIコーディングの取り組み
procrustes5
0
140
從零到一:搭建你的第一個 Observability 平台
blueswen
0
300
イベントストーミングから始めるドメイン駆動設計
jgeem
3
740
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
340
生成AIで日々のエラー調査を進めたい
yuyaabo
0
190
漸進。
ssssota
0
1.6k
ts-morph実践:型を利用するcodemodのテクニック
ypresto
1
580
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
110
インターフェース設計のコツとツボ
togishima
2
670
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
lnit
1
150
PT AI без купюр
v0lka
0
210
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
What's in a price? How to price your products and services
michaelherold
245
12k
Code Review Best Practice
trishagee
68
18k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
106
19k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Rails Girls Zürich Keynote
gr2m
94
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
Building Applications with DynamoDB
mza
95
6.4k
Faster Mobile Websites
deanohume
307
31k
Gamification - CAS2011
davidbonilla
81
5.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.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