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
380

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
61
Pardon the disruption: a user-first approach to software design
Avatar for derek-b derekb
0
88
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
48
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
830
You Version Your Code, Why Not Your Database?
Avatar for derek-b derekb
0
67
Taming Your Data with Elasticsearch - PHP Benelux
Avatar for derek-b derekb
1
480
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
從冷知識到漏洞，你不懂的 Web，駭客懂 - Huli @ WebConf Taiwan 2025
Avatar for Huli aszx87410
2
3.2k
組み合わせ爆発にのまれない - 責務分割 x テスト
Avatar for HAL halhorn
1
170
チームをチームにするEM
Avatar for hitode909 hitode909
0
430
Python札幌 LT資料
Avatar for t3tra t3tra
7
1.1k
GoLab2025 Recap
Avatar for kuro kuro_kurorrr
0
790
AI時代を生き抜く 新卒エンジニアの生きる道
Avatar for coconala_engineer coconala_engineer
1
500
リリース時」テストから「デイリー実行」へ！開発マネージャが取り組んだ、レガシー自動テストのモダン化戦略
Avatar for goataka (GOAMI Takaaki) goataka
0
150
Rubyで鍛える仕組み化プロヂュース力
Avatar for muryoimpl muryoimpl
0
270
AIの誤りが許されない業務システムにおいて“信頼されるAI” を目指す / building-trusted-ai-systems
Avatar for Yuya Matsumura yuya4
6
4.1k
Combinatorial Interview Problems with Backtracking Solutions - From Imperative Procedural Programming to Declarative Functional Programming - Part 2
Avatar for Philip Schwarz philipschwarz
PRO
0
130
Graviton と Nitro と私
Avatar for maroon1st maroon1st
0
160
re:Invent 2025 トレンドからみる製品開発への AI Agent 活用
Avatar for Kohei Yoshikawa yoskoh
0
570

Featured

See All Featured
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
0
3.4k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
320
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
260
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.9k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
0
170
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
0
130
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
4.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
196
70k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
43

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