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

Browser Automated Tests

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for derek-b derek-b
April 09, 2018
Programming
1
390

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
69
Pardon the disruption: a user-first approach to software design
Avatar for derek-b derekb
0
95
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
53
Add Location-based Searching to Your PHP App with Elasticsearch
Avatar for derek-b derekb
1
360
Map, Filter, and Reduce in PHP
Avatar for derek-b derekb
0
850
You Version Your Code, Why Not Your Database?
Avatar for derek-b derekb
0
71
Taming Your Data with Elasticsearch - PHP Benelux
Avatar for derek-b derekb
1
490
What Raising 3 Kids Taught Me About Working With Users
Avatar for derek-b derekb
0
420

Other Decks in Programming

See All in Programming
Python’s True Superpower
Avatar for Hynek Schlawack hynek
0
200
CSC307 Lecture 13
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
310
ふつうの Rubyist、ちいさなデバイス、大きな一年
Avatar for bash0C7 bash0c7
0
720
CopilotKit + AG-UIを学ぶ
Avatar for NearMeの技術発表資料です nearme_tech
PRO
2
150
オブザーバビリティ駆動開発って実際どうなの？
Avatar for yohfee yohfee
3
750
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
280
開発ステップを細分化する、破綻しないAI開発体制
Avatar for keigo kspace
0
110
AWS Infrastructure as Code の新機能 2025 総まとめ 〜SA 4人による怒涛のデモ祭り〜
Avatar for Kenji Kono konokenj
10
3.3k
Rで始めるML・LLM活用入門
Avatar for wakama1994 wakamatsu_takumu
0
170
Go1.26 go fixをプロダクトに適用して困ったこと
Avatar for Hiroki Kurasawa kurakura0916
0
330
Ruby x Terminal
Avatar for Akira Matsuda a_matsuda
7
590
encoding/json/v2のUnmarshalはこう変わった：内部実装で見る設計改善
Avatar for Hiroki Kurasawa kurakura0916
0
350

Featured

See All Featured
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.2k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
260
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
3
360
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
300
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
370
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
81
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
390
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
14k

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