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

Browser Automated Tests

Avatar for derek-b derek-b
April 09, 2018
Programming
1
360

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
52
Pardon the disruption: a user-first approach to software design
Avatar for derek-b derekb
0
80
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
36
Add Location-based Searching to Your PHP App with Elasticsearch
Avatar for derek-b derekb
1
340
Map, Filter, and Reduce in PHP
Avatar for derek-b derekb
0
760
You Version Your Code, Why Not Your Database?
Avatar for derek-b derekb
0
63
Taming Your Data with Elasticsearch - PHP Benelux
Avatar for derek-b derekb
1
470
What Raising 3 Kids Taught Me About Working With Users
Avatar for derek-b derekb
0
390

Other Decks in Programming

See All in Programming
11年かかって やっとVibe Codingに 時代が追いつきましたね
Avatar for yimajo yimajo
1
260
中級グラフィックス入門～効率的なメッシュレット描画～
Avatar for Pocol projectasura
4
2.6k
ゲームの物理
Avatar for Fadis fadis
3
930
Flutterと Vibe Coding で個人開発！
Avatar for Hayami Shuhei hyshu
1
240
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
Avatar for Kuniwak orgachem
PRO
17
3.8k
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
Avatar for yoshi takumiyoshikawa
2
280
LLMは麻雀を知らなすぎるから俺が教育してやる
Avatar for po3rin po3rin
3
2k
kiroでゲームを作ってみた
Avatar for 入井 啓太 iriikeita
0
150
実践 Dev Containers × Claude Code
Avatar for Yuto Akiba touyu
1
170
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
Avatar for ktr ktr_0731
0
240
『リコリス・リコイル』に学ぶ！！ 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
Avatar for わんこ(Wanko_IT) wanko_it
1
420
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
Avatar for ktr ktr_0731
3
1k

Featured

See All Featured
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
Navigating Team Friction
Avatar for Lara Hogan lara
188
15k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
77
9.5k
Code Review Best Practice
Avatar for Trisha Gee trishagee
69
19k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.6k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
73
5k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Fireside Chat
Avatar for paigeccino paigeccino
38
3.6k

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