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
340

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
45
Pardon the disruption: a user-first approach to software design
Avatar for derek-b derekb
0
75
Teaching Through Code Review
Avatar for derek-b derekb
0
98
Add Location-Based Searching to Your Site with Elasticsearch
Avatar for derek-b derekb
0
31
Add Location-based Searching to Your PHP App with Elasticsearch
Avatar for derek-b derekb
1
320
Map, Filter, and Reduce in PHP
Avatar for derek-b derekb
0
730
You Version Your Code, Why Not Your Database?
Avatar for derek-b derekb
0
59
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
“技術カンファレンスで何か変わる？” ──RubyKaigi後の自分とチームを振り返る
Avatar for shun ssagara00
0
110
データベースの技術選定を突き詰める ～複数事例から考える最適なデータベースの選び方～
Avatar for nnaka2992 nnaka2992
2
1.6k
個人開発の学生アプリが企業譲渡されるまで
Avatar for akidon0000 akidon0000
2
1.2k
Vibe Coding の話をしよう
Avatar for schroneko schroneko
14
3.8k
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
Avatar for r-kagaya rkaga
4
1.4k
Beyond_the_Prompt__Evaluating__Testing__and_Securing_LLM_Applications.pdf
Avatar for Mete Atamel meteatamel
0
110
Cursor/Devin全社導入の理想と現実
Avatar for Ryoichi Saito saitoryc
29
22k
Ruby で作る RISC-V CPU エミュレーター / RISC-V CPU emulator made with Ruby
Avatar for hachi (Hayao Kimura) hayaokimura
5
1.1k
AIコーディングの理想と現実
Avatar for Tomohisa Takaoka tomohisa
37
40k
Flutterでllama.cppをつかってローカルLLMを試してみた
Avatar for sakuraidayo sakuraidayo
0
150
2025年のz-index設計を考える
Avatar for TAK tak_dcxi
12
4.5k
LRパーサーはいいぞ
Avatar for ydah ydah
7
1.4k

Featured

See All Featured
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
61k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
693
190k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
280
13k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
49k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
45
9.5k
Side Projects
Avatar for Sacha Greif sachag
453
42k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
71
4.8k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k

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