Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Other Decks in Programming

See All in Programming
PHPでローカル環境用のSSL/TLS証明書を発行することはできるのか？ #phpconkagawa
Avatar for akase244 akase244
0
120
Kingdom of the Machine
Avatar for yui-knk yui_knk
2
1.2k
AIと共に生きる技術選定 2026
Avatar for Sugar Sato sgash708
0
110
AI-DLC Deep Dive
Avatar for yuukiyo yuukiyo
9
5k
実践CRDT
Avatar for tamadeveloper tamadeveloper
0
610
iOS機能開発のAI環境と起きた変化
Avatar for Ryu-nakayama ryunakayama
0
190
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
320
Import assertionsが消えた日～ECMAScriptの仕様はどう決まり、なぜ覆るのか～
Avatar for おおいし bicstone
2
150
属人化しないコード品質の作り方_2026.04.07.pdf
Avatar for Masaki Murano muraaano
0
280
Terraform言語の静的解析 / static analysis of Terraform language
Avatar for Kazuma Watanabe wata727
1
120
第3木曜LT会 #28
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
120
UIの境界線をデザインする | React Tokyo #15 メイントーク
Avatar for SASAPIYO sasagar
2
410

Featured

See All Featured
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
70
39k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
430
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
300
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
230
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.5k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
560
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
33k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.7k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.5k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k

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