Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Browser Automated Tests

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for derek-b derek-b
April 09, 2018
Programming
430
1

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

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
90
Pardon the disruption: a user-first approach to software design
Avatar for derek-b derekb
0
120
Teaching Through Code Review
Avatar for derek-b derekb
0
130
Add Location-Based Searching to Your Site with Elasticsearch
Avatar for derek-b derekb
0
74
Add Location-based Searching to Your PHP App with Elasticsearch
Avatar for derek-b derekb
1
400
Map, Filter, and Reduce in PHP
Avatar for derek-b derekb
0
910
You Version Your Code, Why Not Your Database?
Avatar for derek-b derekb
0
100
Taming Your Data with Elasticsearch - PHP Benelux
Avatar for derek-b derekb
1
540
What Raising 3 Kids Taught Me About Working With Users
Avatar for derek-b derekb
0
460

Other Decks in Programming

See All in Programming
ChromeでローカルLLM
Avatar for ryu ryu1013
0
160
パスワード再設定メールのURLについて知っておこう
Avatar for uyuki uyuki234
0
190
Zero-Tap Sign-In対応、結局何をすればいいの？
Avatar for mitohato14 mitohato14
0
820
S3 TablesのIcebergデータに、AIエージェントからアクセスしてみた / 20261016developersio2026joetsu-accessing-iceberg-in-s3tables-via-agent
Avatar for kasacchiful kasacchiful
PRO
0
210
Vue.jsで作る空間解析アプリとCapacitorプラグインのData Bridge
Avatar for Hal hal_spidernight
1
110
우리의 Nitro Modules는 당신의 Turbo Modules보다 아름답다
Avatar for HyunWoo Lee l2hyunwoo
0
220
AI-Powered Domain-Driven Design
Avatar for Alberto Brandolini ziobrando
0
320
React Native에 현대적인 빌드 도구 더하기: Rollipop 구현기
Avatar for Geunhyeok LEE leegeunhyeok
0
150
Optunaを作ったときにやりたかったこと、その後 (2026/10/16, Optuna Meetup #3)
Avatar for Takuya Akiba iwiwi
4
1.3k
なぜCTOを降りてFDEを選んだのか？〜なぜプロダクト企業がFDEで顧客の現場に踏み込むのか〜
Avatar for ryuta sakamoto gonta
1
240
phperだってパンチカードでコーディングしたい
Avatar for hideki kinjyo o0h
PRO
0
460
graphql-ruby を Spinel で速くしようとした話
Avatar for Fumiaki MATSUSHIMA mtsmfm
0
120

Featured

See All Featured
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
280
Test your architecture with Archunit
Avatar for Yoan thirion
2
2.5k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
25k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.8k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
22k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
3.5k
Design in an AI World
Avatar for tapps tapps
1
360
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.3k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.9k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.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