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
350

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
49
Pardon the disruption: a user-first approach to software design
Avatar for derek-b derekb
0
78
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
34
Add Location-based Searching to Your PHP App with Elasticsearch
Avatar for derek-b derekb
1
330
Map, Filter, and Reduce in PHP
Avatar for derek-b derekb
0
750
You Version Your Code, Why Not Your Database?
Avatar for derek-b derekb
0
61
Taming Your Data with Elasticsearch - PHP Benelux
Avatar for derek-b derekb
1
460
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
すべてのコンテキストを、 ユーザー価値に変える
Avatar for Michiru Kato applism118
2
490
Result型で“失敗”を型にするPHPコードの書き方
Avatar for Takuma Kajikawa kajitack
4
130
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
Avatar for uki00a uki00a
0
140
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
Avatar for 이가은 gaeun5744
3
300
CursorはMCPを使った方が良いぞ
Avatar for taiga taigakono
0
150
KotlinConf 2025 現地で感じたServer-Side Kotlin
Avatar for Takehata Naoto n_takehata
1
220
第9回 情シス転職ミートアップ 株式会社IVRy（アイブリー）の紹介
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
1
210
関数型まつりレポート for JuliaTokai #22
Avatar for GOTOH Shunsuke antimon2
0
140
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
Avatar for Takuya Katsusa takuyakatsusa
1
230
地方に住むエンジニアの残酷な現実とキャリア論
Avatar for nakamichi ichimichi
3
1k
「Cursor/Devin全社導入の理想と現実」のその後
Avatar for Ryoichi Saito saitoryc
0
120
AIネイティブなプロダクトをGolangで挑む取り組み
Avatar for nmatsumoto4 nmatsumoto4
0
120

Featured

See All Featured
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
299
51k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
24
1.7k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.3k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.6k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
39
1.9k
Done Done
Avatar for chrislema chrislema
184
16k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.3k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
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