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
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
HTTPプロトコル正しく理解していますか？ 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ〜
Avatar for ♛Heitor Hirose hekuchan
2
680
AI Schema Enrichment for your Oracle AI Database
Avatar for thatjeffsmith thatjeffsmith
0
260
Oxlintはいいぞ
Avatar for Yuji Yamaguchi yug1224
5
1.3k
今から始めるClaude Code超入門
Avatar for 448jp | OKI Yoshiya 448jp
8
8.6k
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
270
AI時代の認知負荷との向き合い方
Avatar for OptFit Corp. optfit
0
150
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
Avatar for Mulyu mulyu
3
190
AIによる高速開発をどう制御するか？ ガードレール設置で開発速度と品質を両立させたチームの事例
Avatar for tonkotsuboy_com tonkotsuboy_com
7
2.2k
Fragmented Architectures
Avatar for Denys Poltorak denyspoltorak
0
150
なるべく楽してバックエンドに型をつけたい！(楽とは言ってない)
Avatar for HIBIKI CUBE hibiki_cube
0
140
Package Management Learnings from Homebrew
Avatar for Mike McQuaid mikemcquaid
0
210
Smart Handoff/Pickup ガイド - Claude Code セッション管理
Avatar for rasshii yukiigarashi
0
130

Featured

See All Featured
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
110
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
53
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
54
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.1k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
65
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.1k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
270
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
8.4k

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