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
47
Pardon the disruption: a user-first approach to software design
Avatar for derek-b derekb
0
76
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
32
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
60
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
380

Other Decks in Programming

See All in Programming
技術懸念に立ち向かい 法改正を穏便に乗り切った話
Avatar for popCashew pop_cashew
0
840
tsconfigのオプションで変わる型世界
Avatar for Keisuke Ikeda keisukeikeda
1
130
Passkeys for Java Developers
Avatar for Yoshikazu Nojima ynojima
1
210
FastMCPでMCPサーバー/クライアントを構築してみる
Avatar for ttnyt8701 ttnyt8701
2
100
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
Avatar for Yuuki Tsubouchi (yuuk1) yuukit
3
620
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
Avatar for Masayuki Izumi izumin5210
4
480
Parallel::Pipesの紹介
Avatar for Shoichi Kaji skaji
2
870
イベントストーミングから始めるドメイン駆動設計
Avatar for おだかとしゆき jgeem
3
430
ワンバイナリWebサービスのススメ
Avatar for mackee mackee
10
7.5k
型安全なDrag and Dropの設計を考える
Avatar for yudppp yudppp
5
660
DevTalks 25 - Create your own AI-infused Java apps with ease
Avatar for Kevin Dubois kdubois
2
120
インターフェース設計のコツとツボ
Avatar for おぎ togishima
2
490

Featured

See All Featured
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
45
9.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
5
620
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
460
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
252
21k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
750
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
53
11k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k

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