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
43
Pardon the disruption: a user-first approach to software design
derekb
0
73
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
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
240
iOSでQRコード生成奮闘記
ktcryomm
2
120
Honoとフロントエンドの 型安全性について
yodaka
7
1.5k
オレを救った Cline を紹介する
codehex
13
12k
Jakarta EE meets AI
ivargrimstad
0
620
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
120
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
250
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
1.8k
React 19アップデートのために必要なこと
uhyo
8
1.6k
Webフレームワークとともに利用するWeb components / JSConf.jp おかわり
spring_raining
1
130
The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か / Why The Clean Architecture does not fit with Web Frontend
twada
PRO
49
16k
技術を改善し続ける
gumioji
0
180
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Docker and Python
trallard
44
3.3k
The World Runs on Bad Software
bkeepers
PRO
67
11k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Product Roadmaps are Hard
iamctodd
PRO
51
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Six Lessons from altMBA
skipperchong
27
3.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
What's in a price? How to price your products and services
michaelherold
244
12k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
380
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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