Browser Automation Testing with Headless Chrome - That Conference

Developers are unit testing, QA staff is integration testing, Users are acceptance testing. Do you really need to add browser automated tests too? Have you ever experienced side effects of upgrading third party components or server configuration changes? Do you have trouble testing your entire site to ensure bugs weren't introduced?

If so, you may need browser automation testing. In this talk we see how to combine Jasmine, Mocha, and Chai to automate your browser and test all your site's components. This will lead you to deliver your updates reliably and catch bugs before they get deployed.

Transcript

1. Derek Binkley - @DerekB_WI
2. Derek Binkley - @DerekB_WI
3. Derek Binkley - @DerekB_WI Browser Automation Testing with Headless Chrome
4. Derek Binkley - @DerekB_WI Is anybody there?
5. Derek Binkley - @DerekB_WI Who Am I? • Derek Binkley • TurnTo Networks • Married, 2 daughters, 1 son
7. Derek Binkley - @DerekB_WI Who Are You? • JavaScript? • QA? • Selenium? • DevOps?
8. Derek Binkley - @DerekB_WI What are we doing? • Automate a Browser • Try a site like a user • Validate Functionality
9. Derek Binkley - @DerekB_WI Headless Chrome • Introduced June 2017 • Full Browser • No GUI • Controlled by Node library (Puppeteer)
10. Derek Binkley - @DerekB_WI Headless Chrome to replace PhantomJS
11. Derek Binkley - @DerekB_WI Selenium v. Headless Chrome • Won’t replace selenium • Selenium complex and powerful • Chrome - single browser testing • Different uses
12. Derek Binkley - @DerekB_WI Why? • Reliability • Dependability • Sleep better after an update • In addition to other tests
13. Derek Binkley - @DerekB_WI Components • Using Node • Puppeteer - give us Chrome • Mocha - Runs Test • Chai - Provides assertions
14. Derek Binkley - @DerekB_WI Setup Script • package.json
16. Derek Binkley - @DerekB_WI Run It
17. Derek Binkley - @DerekB_WI
18. Derek Binkley - @DerekB_WI •Assemble •Act •Assert
19. Derek Binkley - @DerekB_WI Imports
20. Derek Binkley - @DerekB_WI Define
21. Derek Binkley - @DerekB_WI Setup
22. Derek Binkley - @DerekB_WI Tear down
23. Derek Binkley - @DerekB_WI The Assertion
24. Derek Binkley - @DerekB_WI
25. Derek Binkley - @DerekB_WI
26. Derek Binkley - @DerekB_WI
27. Derek Binkley - @DerekB_WI click()
28. Derek Binkley - @DerekB_WI Class change
29. Derek Binkley - @DerekB_WI screenshot()
30. Derek Binkley - @DerekB_WI
31. Derek Binkley - @DerekB_WI this.currentTest.state
32. Derek Binkley - @DerekB_WI pdf()
33. Derek Binkley - @DerekB_WI PDF options • https://github.com/GoogleChrome/puppeteer/blob/master/docs/ api.md#pagepdfoptions
34. Derek Binkley - @DerekB_WI
35. Derek Binkley - @DerekB_WI type()
36. Derek Binkley - @DerekB_WI Click the button
37. Derek Binkley - @DerekB_WI The assertion
38. Derek Binkley - @DerekB_WI
39. Derek Binkley - @DerekB_WI hover()
40. Derek Binkley - @DerekB_WI getComputedStyle()
41. Derek Binkley - @DerekB_WI RGB value
42. Derek Binkley - @DerekB_WI setViewport()
43. Derek Binkley - @DerekB_WI Resolution?
44. Derek Binkley - @DerekB_WI emulate()
45. Derek Binkley - @DerekB_WI Sessions
46. Derek Binkley - @DerekB_WI waitForNavigation()
47. Derek Binkley - @DerekB_WI Page Interactions • page.focus(‘#myselector’) • page.mouse.move(x, y, [options]) • page.mouse.click(x, y, [options]) • page.keyboard.press(‘Tab’) • page.touchscreen.tap(x, y)
48. 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 • https://puppeteersandbox.com/ • https://groups.google.com/forum/m/#!topic/phantomjs/9aI5d-LDuNE • https://medium.com/@kensoh/chromeless-chrominator-chromy-navalia-lambdium-ghostjs- autogcd-ef34bcd26907
49. Derek Binkley - @DerekB_WI Resources • https://about.gitlab.com/2017/12/19/moving-to- headless-chrome/ • https://github.com/nesk/puphpeteer • http://mickadoo.github.io/php,phpunit,chrome,testing/ 2017/10/08/php-tests-using-headless-chrome.html • https://github.com/nesk/puphpeteer
50. Derek Binkley - @DerekB_WI Community
51. Derek Binkley - @DerekB_WI Thanks
52. Derek Binkley - @DerekB_WI