Pro Yearly is on sale from $80 to $50! »

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
2
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
1
41
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
73
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
21
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
1
130
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
59
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
47
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
50
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
120

Other Decks in Programming

See All in Programming
15217910de00471b472fecae440c6daf?s=48 ditn
2
500
3f2e97dc4e6a5daaf1cb8a406c533176?s=48 knqyf263
3
660
636420dfa4bd120435447924327530f0?s=48 nichimu
0
860
5167a0b0583441245fb9ed331477f826?s=48 kunihikosasaki
0
100
73b0a25ed03f649ec63ded82ce4ac7cb?s=48 nunulk
0
140
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
1
140
36631e35786e16256423db3c9de70a78?s=48 extendwings
0
280
C0e29dade6ec33081689ac135a269b45?s=48 crgarridos
1
150
774a937b74096e82576b37678d00aeca?s=48 kishino
1
110
75486cbfd37125f121cf4a6c5614601c?s=48 hideokamoto
1
150
C302e84057a922dce0ecbe80207e3fcc?s=48 mu_zaru
1
130
7d1521d950d9bc5697868830cb04ff2f?s=48 yimajo
0
120

Featured

See All Featured
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
100
11k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
256
36k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
232
810k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
55
5.3k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
500
36k
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
83
4.6k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
192
8.7k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
317
18k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
6
600
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1021
370k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
295
39k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
585
200k

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