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
370

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

Other Decks in Programming

See All in Programming
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
7
690
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
Avatar for mazrean mazrean
0
140
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
450
O Que É e Como Funciona o PHP-FPM?
Avatar for Marcel dos Santos marcelgsantos
0
240
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
Avatar for CARTA Engineering carta_engineering
0
470
Temporal Knowledge Graphで作る！ 時間変化するナレッジを扱うAI Agentの世界
Avatar for po3rin po3rin
5
1.1k
Kotlinで実装するCPU/GPU 「協調的」パフォーマンス管理
Avatar for matuyuhi matuyuhi
0
200
エンジニアに事業やプロダクトを理解してもらうためにやってること
Avatar for bayashi murabayashi
0
110
実践Claude Code：20の失敗から学ぶAIペアプログラミング
Avatar for 武田隆志 takedatakashi
18
9.3k
ALL CODE BASE ARE BELONG TO STUDY
Avatar for uzulla uzulla
29
6.9k
フロントエンド開発のためのブラウザ組み込みAI入門
Avatar for Masashi Hirano masashi
7
3.7k
AI時代に必須！状況言語化スキル / ai-context-verbalization
Avatar for MinoDriven minodriven
2
270

Featured

See All Featured
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.9k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
33k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
2.9k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.6k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
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