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

Browser Automated Tests

D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=47 derek-b
April 09, 2018
Programming
1
260

Browser Automated Tests

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

D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=128

derek-b

April 09, 2018
Tweet

More Decks by derek-b

See All by derek-b
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
8
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
1
41
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
81
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
23
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
1
140
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
60
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
50
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
51
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
120

Other Decks in Programming

See All in Programming
06cd0c34899f8d878d44074d52ccd4e6?s=48 selcukusta
2
110
5afbf65e9e32cef9ab74e5b5347a5bce?s=48 korosuke613
2
270
Af64bc38c0ffcfcabdf430759ee491ce?s=48 lovee
2
220
5ade34f8bdf1b55c4ff82c11cf23cf42?s=48 minamijoyo
3
520
32ae0ae04b5c4f1b29ee9e8826823fbc?s=48 joergneumann
0
130
3295d80faee461db1093982361256fe4?s=48 panini
1
160
39adbc0cddb8c0ea8470c80248e9e71b?s=48 hyodol2513
0
630
Af64bc38c0ffcfcabdf430759ee491ce?s=48 lovee
9
2.9k
6c366ab6293eb42aec0e6f5f69b50882?s=48 ryokbt
2
310
Fd15b843f17ce72dcec6a1c658082f8c?s=48 tetsukick
0
180
8284465a94bbdf1ea82cf1a67d55f447?s=48 kilometer
4
500
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
170

Featured

See All Featured
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
88
3.4k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
71
260k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
285
19k
78b475797a14c84799063c7cd073962f?s=48 holman
461
280k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
242
21k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
119
16k
282d599b414022eba5096510f675b6e2?s=48 chrislema
173
14k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
437
28k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
73
7.5k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
72
1.4k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
28
950
11c84dff30266b907714802088852677?s=48 jasonvnalue
81
8.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