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
49
Pardon the disruption: a user-first approach to software design
Avatar for derek-b derekb
0
78
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
34
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
61
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
390

Other Decks in Programming

See All in Programming
AIネイティブなプロダクトをGolangで挑む取り組み
Avatar for nmatsumoto4 nmatsumoto4
0
120
無関心の谷
Avatar for kanayannet kanayannet
0
180
Kotlin エンジニアへ送る：Swift 案件に参加させられる日に備えて～似てるけど色々違う Swift の仕様 / from Kotlin to Swift
Avatar for Elvis Shi lovee
1
250
XP, Testing and ninja testing
Avatar for seki at druby.org m_seki
2
120
TypeScript LSP の今までとこれから
Avatar for Yosuke Kurami quramy
1
510
Elixir で IoT 開発、 Nerves なら簡単にできる！？
Avatar for pojiro pojiro
1
150
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
Avatar for Kenji Kazumura kazumura
1
190
統一感のある Go コードを生成 AI の力で手にいれる
Avatar for Kotaro Otaka otakakot
0
3k
エンジニア向け採用ピッチ資料
Avatar for 犬飼嵩 inusan
0
140
Using AI Tools Around Software Development
Avatar for inouehi inouehi
0
1.2k
LINEヤフー データグループ紹介
Avatar for LINEヤフー株式会社 採用情報 lycorp_recruit_jp
0
760
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
Avatar for Yuka O’oka oukayuka
2
820

Featured

See All Featured
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
Navigating Team Friction
Avatar for Lara Hogan lara
187
15k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.5k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
86
4.7k
Scaling GitHub
Avatar for Zach Holman holman
459
140k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k

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