$30 off During Our Annual Pro Sale. View Details »

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
61
Pardon the disruption: a user-first approach to software design
Avatar for derek-b derekb
0
87
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
48
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
820
You Version Your Code, Why Not Your Database?
Avatar for derek-b derekb
0
67
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
410

Other Decks in Programming

See All in Programming
ゲームの物理 剛体編
Avatar for Fadis fadis
0
350
Graviton と Nitro と私
Avatar for maroon1st maroon1st
0
110
tparseでgo testの出力を見やすくする
Avatar for utagawa kiki utgwkk
2
250
ローカルLLMを⽤いてコード補完を⾏う VSCode拡張機能を作ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
110
エディターってAIで操作できるんだぜ
Avatar for kis9a kis9a
0
740
非同期処理の迷宮を抜ける: 初学者がつまづく構造的な原因
Avatar for PADAone pd1xx
1
730
Navigation 3: 적응형 UI를 위한 앱 탐색
Avatar for Sungyong An fornewid
1
370
俺流レスポンシブコーディング 2025
Avatar for TAK tak_dcxi
14
8.9k
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
Avatar for syumai syumai
7
2.3k
手が足りない！兼業データエンジニアに必要だったアーキテクチャと立ち回り
Avatar for zinkosuke zinkosuke
0
760
組み合わせ爆発にのまれない - 責務分割 x テスト
Avatar for HAL halhorn
1
150
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
150

Featured

See All Featured
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
60
How to make the Groovebox
Avatar for あそなす asonas
2
1.8k
Between Models and Reality
Avatar for mayunak mayunak
0
130
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
2
3.8k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.3k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.1k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
9.1k

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