Browser Automated Tests

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

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