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

Browser Automated Tests

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for derek-b derek-b
April 09, 2018
Programming
1
390

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
Tweet

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
63
Pardon the disruption: a user-first approach to software design
Avatar for derek-b derekb
0
92
Teaching Through Code Review
Avatar for derek-b derekb
0
110
Add Location-Based Searching to Your Site with Elasticsearch
Avatar for derek-b derekb
0
49
Add Location-based Searching to Your PHP App with Elasticsearch
Avatar for derek-b derekb
1
360
Map, Filter, and Reduce in PHP
Avatar for derek-b derekb
0
850
You Version Your Code, Why Not Your Database?
Avatar for derek-b derekb
0
69
Taming Your Data with Elasticsearch - PHP Benelux
Avatar for derek-b derekb
1
490
What Raising 3 Kids Taught Me About Working With Users
Avatar for derek-b derekb
0
410

Other Decks in Programming

See All in Programming
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
160
AgentCoreとHuman in the Loop
Avatar for Har1101 har1101
5
230
CSC307 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
490
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2k
AtCoder Conference 2025
Avatar for shindannin shindannin
0
1.1k
例外処理とどう使い分ける？Result型を使ったエラー設計 #burikaigi
Avatar for Takuma Kajikawa kajitack
16
6k
AIによる高速開発をどう制御するか？ ガードレール設置で開発速度と品質を両立させたチームの事例
Avatar for tonkotsuboy_com tonkotsuboy_com
7
2.3k
Lambda のコードストレージ容量に気をつけましょう
Avatar for tatsuki-yamada tattwan718
0
120
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
Avatar for とすり tosuri13
4
370
Oxlintはいいぞ
Avatar for Yuji Yamaguchi yug1224
5
1.3k
Apache Iceberg V3 and migration to V3
Avatar for Tomohiro Tanaka tomtanaka
0
160
Smart Handoff/Pickup ガイド - Claude Code セッション管理
Avatar for rasshii yukiigarashi
0
130

Featured

See All Featured
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
96
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
320
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
880
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
430
Abbi's Birthday
Avatar for Violet Bock coloredviolet
1
4.7k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
47
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
110
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
300
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k

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