Browser Automation Testing with Headless Chrome

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 tutorial we will combine Puppeteer, 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. You can find the requirements for the workshop on this [website](https://www.derekb-wi.com/single-post/2018/05/20/Dutch-PHP-Tutorial-Preperation).

Transcript

1. Derek Binkley - @DerekB_WI Browser Automation Testing with Headless Chrome
2. Derek Binkley - @DerekB_WI Is anybody there?
3. Derek Binkley - @DerekB_WI Who Am I? • Derek Binkley • Senior Engineer, TurnTo Networks • Married, 2 daughters, 1 son
5. Derek Binkley - @DerekB_WI Who Are You? • JavaScript? • QA? • Selenium? • DevOps?
6. Derek Binkley - @DerekB_WI What are we doing? • Automate a Browser • Try a site like a user • Validate Functionality
7. Derek Binkley - @DerekB_WI Headless Chrome • Introduced June 2017 • Full Browser • No GUI • Controlled by Node library (Puppeteer)
8. Derek Binkley - @DerekB_WI Headless Chrome to replace PhantomJS
9. Derek Binkley - @DerekB_WI Selenium v. Headless Chrome • Won’t replace selenium • Selenium complex and powerful • Chrome - single browser testing • Different uses
10. Derek Binkley - @DerekB_WI Why? • Reliability • Dependability • Sleep better after an update • In addition to other tests
11. Derek Binkley - @DerekB_WI Components • Using Node • Puppeteer - give us Chrome • Mocha - Runs Test • Chai - Provides assertions
12. Derek Binkley - @DerekB_WI Setup Script • package.json
14. Derek Binkley - @DerekB_WI Let’s try it
15. Derek Binkley - @DerekB_WI
16. Derek Binkley - @DerekB_WI •Assemble •Act •Assert
17. Derek Binkley - @DerekB_WI Imports
18. Derek Binkley - @DerekB_WI Define
19. Derek Binkley - @DerekB_WI Setup
20. Derek Binkley - @DerekB_WI Tear down
21. Derek Binkley - @DerekB_WI The Assertion
22. Derek Binkley - @DerekB_WI
23. Derek Binkley - @DerekB_WI
24. Derek Binkley - @DerekB_WI
25. Derek Binkley - @DerekB_WI click()
26. Derek Binkley - @DerekB_WI Class change
27. Derek Binkley - @DerekB_WI screenshot()
28. Derek Binkley - @DerekB_WI
29. Derek Binkley - @DerekB_WI this.currentTest.state
30. Derek Binkley - @DerekB_WI pdf()
31. Derek Binkley - @DerekB_WI PDF options • https://github.com/GoogleChrome/puppeteer/blob/master/docs/ api.md#pagepdfoptions
32. Derek Binkley - @DerekB_WI
33. Derek Binkley - @DerekB_WI type()
34. Derek Binkley - @DerekB_WI Click the button
35. Derek Binkley - @DerekB_WI The assertion
36. Derek Binkley - @DerekB_WI
37. Derek Binkley - @DerekB_WI hover()
38. Derek Binkley - @DerekB_WI getComputedStyle()
39. Derek Binkley - @DerekB_WI RGB value
40. Derek Binkley - @DerekB_WI setViewport()
41. Derek Binkley - @DerekB_WI Resolution?
42. Derek Binkley - @DerekB_WI emulate()
43. Derek Binkley - @DerekB_WI Visibility
44. Derek Binkley - @DerekB_WI Sessions
45. Derek Binkley - @DerekB_WI waitForNavigation()
46. Derek Binkley - @DerekB_WI
47. Derek Binkley - @DerekB_WI I failed :(
48. 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)
49. 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
50. Derek Binkley - @DerekB_WI Resources • https://gist.github.com/mrmoses/6a40744b91c4fe999cb04f6325779ad9 • https://blog.logrocket.com/a-quick-and-complete-guide-to-mocha- testing-d0e0ea09f09d • 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
51. Derek Binkley - @DerekB_WI Thanks • https://joind.in/talk/90b81
52. Thanks to Our Sponsors 2018