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
51
Pardon the disruption: a user-first approach to software design
Avatar for derek-b derekb
0
79
Teaching Through Code Review
Avatar for derek-b derekb
0
100
Add Location-Based Searching to Your Site with Elasticsearch
Avatar for derek-b derekb
0
35
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
62
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
Claude Code派？Gemini CLI派？ みんなで比較LT会！_20250716
Avatar for じゅん junholee
1
690
Streamlitで実現できるようになったこと、実現してくれたこと
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
2
210
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
Avatar for azukiazusa azukiazusa1
2
690
「App Intent」よくわからんけどすごい！
Avatar for rinngo rinngo0302
1
120
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
Avatar for Kenji Kono konokenj
6
960
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
Avatar for uutan1108 ohmori_yusuke
1
130
slogパッケージの深掘り
Avatar for やーびー integral0515
0
120
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜（奥田りさ）
Avatar for RisaTube risatube
PRO
1
480
GPUを計算資源として使おう！
Avatar for prime number primenumber
1
290
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
Avatar for Aki Nakahara akinko_0915
0
160
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
Avatar for yoshiyoshifujii yoshiyoshifujii
4
580
AWS Summit Japan 2024と2025の比較／はじめてのKiro、今あなたは岐路に立つ
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
240

Featured

See All Featured
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.9k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
278
23k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.7k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.5k
Side Projects
Avatar for Sacha Greif sachag
455
43k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.5k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.3k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k

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