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

Browser Automated Tests

derek-b
April 09, 2018
Programming
1
270

Browser Automated Tests

Combine Headless Chrome with Mocha, Chai and Node to automatically test your web pages.

derek-b

April 09, 2018
Tweet

More Decks by derek-b

See All by derek-b
Pardon the disruption: a user-first approach to software design
derekb
0
17
Teaching Through Code Review
derekb
0
82
Add Location-Based Searching to Your Site with Elasticsearch
derekb
0
14
Add Location-based Searching to Your PHP App with Elasticsearch
derekb
1
120
Map, Filter, and Reduce in PHP
derekb
0
200
You Version Your Code, Why Not Your Database?
derekb
0
44
Taming Your Data with Elasticsearch - PHP Benelux
derekb
1
250
What Raising 3 Kids Taught Me About Working With Users
derekb
0
140
Taming Your Data With Elasticsearch - PHP[world]
derekb
0
140

Other Decks in Programming

See All in Programming
小さなユーザーストーリーのすゝめ～的確な進捗把握編～
ryothkay
0
150
Laravel を低速化する技術 / how to slow laravel
hanhan1978
PRO
0
1.1k
Xcode が遅い! とにかく遅い!! 遅い Xcode をなんとかする方法
niw
0
1.2k
Xcode Cloudの評価
kishikawakatsumi
2
320
OpenAPIで 楽に始めるスキーマ駆動開発実践論 - PHP Conference 2022
komtaki
0
290
Micro Frontends for Java Microservices - Dublin JUG 2022
mraible
PRO
1
300
切り取り方を工夫してアプリケーションを漸進的に改善する / Incremental improvement by devising application change boundaries
yammerjp
1
140
Micro Frontends for Java Microservices - Cork JUG 2022
mraible
PRO
0
410
スクールでPHPとLaravelを学んでSymfonyの会社に就職してみた
kunihikokitamura
0
160
入門SQLi / Introduction of SQLi
satoki
2
850
Swift Concurrency時代のiOSアプリの作り方
koher
13
1.7k
Swift Concurrency Next Step
shiz
7
1.1k

Featured

See All Featured
Statistics for Hackers
jakevdp
782
210k
Building Flexible Design Systems
yeseniaperezcruz
311
34k
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
Why You Should Never Use an ORM
jnunemaker
PRO
48
7.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
499
130k
Fireside Chat
paigeccino
14
1.5k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
Designing on Purpose - Digital PM Summit 2013
jponch
107
5.7k
Teambox: Starting and Learning
jrom
124
7.8k
GraphQLの誤解/rethinking-graphql
sonatard
33
7.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
254
12k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6k

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