Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Browser Automated Tests

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for derek-b derek-b
April 09, 2018
Programming
410
1

Browser Automated Tests

Combine Headless Chrome with Mocha, Chai and Node to automatically test your web pages.

Avatar for derek-b

derek-b

April 09, 2018

More Decks by derek-b

See All by derek-b
What Raising 3 Kids Taught Me About Working with Users
Avatar for derek-b derekb
0
78
Pardon the disruption: a user-first approach to software design
Avatar for derek-b derekb
0
110
Teaching Through Code Review
Avatar for derek-b derekb
0
120
Add Location-Based Searching to Your Site with Elasticsearch
Avatar for derek-b derekb
0
66
Add Location-based Searching to Your PHP App with Elasticsearch
Avatar for derek-b derekb
1
380
Map, Filter, and Reduce in PHP
Avatar for derek-b derekb
0
870
You Version Your Code, Why Not Your Database?
Avatar for derek-b derekb
0
85
Taming Your Data with Elasticsearch - PHP Benelux
Avatar for derek-b derekb
1
510
What Raising 3 Kids Taught Me About Working With Users
Avatar for derek-b derekb
0
430

Other Decks in Programming

See All in Programming
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
Avatar for mom0tomo mom0tomo
8
3.2k
DynamoDBには集計系のクエリがないけどなんとかしたい
Avatar for 村上優稀 musan
1
140
AI 時代のソフトウェア設計の学び方
Avatar for 増田 亨 masuda220
PRO
29
12k
AIだと陥りがちなJakarta EE最新技術への移行時の落とし穴と解決策
Avatar for tnagao7 tnagao7
0
110
Observability in Practice：Grafana 與 Edge Device SRE 的那些事
Avatar for Blueswen blueswen
0
160
AutonomyとControlのあいだ：Graflowで記述するAIエージェント協調
Avatar for Makoto Yui myui
0
120
Snowflake Summitでの新機能 CoCo / CoWork / snowflake-summit-2026-overall-what-new-coco
Avatar for Tatsuhiro tatsuhiro
1
120
代数的データ型って何が嬉しいの？ #frontend_phpcon_do
Avatar for Takuma Kajikawa kajitack
8
3.6k
Semantic Version 単位で戦略を柔軟に変えて、パッケージアップデートを自動化する
Avatar for daitasu daitasu
0
230
net-httpのHTTP/2対応について
Avatar for NARUSE, Yui naruse
0
480
Lessons from Spec-Driven Development
Avatar for Simon Martinelli simas
PRO
0
190
Hunting Vulnerabilities in Symfony with LLMs
Avatar for Vincent Amstoutz vinceamstoutz
0
540

Featured

See All Featured
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
610
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
320
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.5k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.8k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.1k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
118
120k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.5k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
360
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
700

Transcript

  1. Browser Automated Tests Derek Binkley @DerekB_WI

  2. Derek Binkley @DerekB_WI Designer? Developer? Other?

  3. What is It?

  4. Derek Binkley @DerekB_WI Testing Tools • Text based • Page

    recorder • Selenium WebDriver • Browser Emulator

  5. Derek Binkley @DerekB_WI Headless Chrome • June 2017 • Full

    browser • Chrome Dev Tools • No GUI

  6. Is Anybody There?

  7. Derek Binkley @DerekB_WI Why? • Reliability • Dependability • Sleep

    better after an update

  8. What do we need? Node Chrome Puppeteer Mocha Chai

  9. Derek Binkley @DerekB_WI Install • npm init • npm i

    —save mocha chai • npm i --save puppeteer • Add test script to package.json

  10. Derek Binkley @DerekB_WI Setup Command package.json

  11. Examples

  12. Derek Binkley @DerekB_WI Basics • Test Defined as JavaScript •

    Full Access to DOM • Assertions using Chai

  13. Derek Binkley @DerekB_WI First Test

  14. Derek Binkley @DerekB_WI First Test

  15. Derek Binkley @DerekB_WI Test Search

  16. Derek Binkley @DerekB_WI Test Search

  17. Derek Binkley @DerekB_WI Test Failed

  18. Derek Binkley @DerekB_WI Test Failed

  19. Derek Binkley @DerekB_WI Screenshots

  20. Derek Binkley @DerekB_WI Screenshots

  21. Derek Binkley @DerekB_WI Interactive Test

  22. Derek Binkley @DerekB_WI Interactive Test

  23. Derek Binkley @DerekB_WI Reacting to Changes • Changing link names

    • Changing server builds • Partners changing integrations • New branding

  24. Derek Binkley @DerekB_WI Thanks • @DerekB_WI • http:/ /derekb-wi.com

  25. 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