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
270

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
76
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
11
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
1
72
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
120
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
35
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
1
170
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
91
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
86
D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=48 derekb
0
57

Other Decks in Programming

See All in Programming
Ee4cc84c4dedde009c013c6d5f1a2e84?s=48 tatchnicolas
2
2.3k
F21d69109b1c03921abf7d12f0fb6654?s=48 dscs
0
170
3f62dc4b2c8447c38d74267b871e7d37?s=48 solt9029
10
2.7k
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
0
140
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
280
Fe1782174fa3f0a2d07011df414a1267?s=48 evils
0
240
D8da26d8c2f31098cb33d5d6087e6668?s=48 shuheiyamada
0
500
72328eacb3f08064170cfec86b728d2a?s=48 onohiroshi1
5
21k
744f1c2c6cbea2ff5104b0ac512936bd?s=48 hpgrahsl
0
130
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
200
Dc8d7b0277a1646d6842105241e8bef5?s=48 peacock0803sz
0
330
6e704ad00f166b420eba3d174713c82b?s=48 urushiyama
0
390

Featured

See All Featured
5f50f94346fbcb23706f0707169317a4?s=48 aarron
261
36k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
288
47k
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
261
20k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
129
22k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
32
1.1k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
253
11k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
56k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
443
29k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
223
120k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
55
4.8k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
633
49k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
156
12k

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