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

Browser Automated Tests

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
91
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
410
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
flutter_test のその先へ — Flutter アプリの LLM 機能に「評価」という品質保証を
Avatar for Kosuke Saigusa kosukesaigusa
0
190
React Native에 현대적인 빌드 도구 더하기: Rollipop 구현기
Avatar for Geunhyeok LEE leegeunhyeok
0
180
SFCで実現する病院・医療システムの動的組み立て式UI
Avatar for kouki.miura koukimiura
1
170
조합이폭발하는디자인시스템이걸눈으로도테스트하라고요
Avatar for giljongyu giljongyu
0
720
SODA - FACT BOOK（EN）
Avatar for SODA inc. sodainc
1
210
作れるエンジニアから、価値を届けるエンジニアへ
Avatar for Ryu-nakayama ryunakayama
1
210
TS 7.0 で baseUrl が使えなくなった今、パスエイリアスをどうするか
Avatar for おおいし bicstone
2
510
Railsのためのパスキー実践入門 〜マルチテナントSaaSでの意思決定〜
Avatar for utakaha utakaha
4
3.2k
現場と育てるRailsモデリング 〜Spreadsheetから始めたモデル設計〜
Avatar for siroemk siroemk
2
1.2k
社内AIエージェント「Askワンバン」における コストチューニングの取り組み
Avatar for t0yohei t0yohei
0
160
S3 TablesのIcebergデータに、AIエージェントからアクセスしてみた / 20261016developersio2026joetsu-accessing-iceberg-in-s3tables-via-agent
Avatar for kasacchiful kasacchiful
PRO
0
280
プロジェクトコードをキレイキレイしよう！暗黙的な参照を読み解く静的解析
Avatar for Takuma Osada ostk0069
0
200

Featured

See All Featured
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.4k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
550
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
390
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
41k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.6k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
409
67k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
1
510
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
35
2.9k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.7k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
232
55k

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