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
   

   View Slide

2. Derek Binkley - @DerekB_WI
   Is anybody there?
   

   View Slide

3. Derek Binkley - @DerekB_WI
   Who Am I?
   • Derek Binkley
   • Senior Engineer, TurnTo Networks
   • Married, 2 daughters, 1 son
   

   View Slide

4. View Slide

5. Derek Binkley - @DerekB_WI
   Who Are You?
   • JavaScript?
   • QA?
   • Selenium?
   • DevOps?
   

   View Slide

6. Derek Binkley - @DerekB_WI
   What are we doing?
   • Automate a Browser
   • Try a site like a user
   • Validate Functionality
   

   View Slide

7. Derek Binkley - @DerekB_WI
   Headless Chrome
   • Introduced June 2017
   • Full Browser
   • No GUI
   • Controlled by Node library (Puppeteer)
   

   View Slide

8. Derek Binkley - @DerekB_WI
   Headless Chrome to replace PhantomJS
   

   View Slide

9. Derek Binkley - @DerekB_WI
   Selenium v. Headless Chrome
   • Won’t replace selenium
   • Selenium complex and powerful
   • Chrome - single browser testing
   • Different uses
   

   View Slide

10. Derek Binkley - @DerekB_WI
    Why?
    • Reliability
    • Dependability
    • Sleep better after an update
    • In addition to other tests
    

    View Slide

11. Derek Binkley - @DerekB_WI
    Components
    • Using Node
    • Puppeteer - give us Chrome
    • Mocha - Runs Test
    • Chai - Provides assertions
    

    View Slide

12. Derek Binkley - @DerekB_WI
    Setup Script
    • package.json
    

    View Slide

13. View Slide

14. Derek Binkley - @DerekB_WI
    Let’s try it
    

    View Slide

15. Derek Binkley - @DerekB_WI
    

    View Slide

16. Derek Binkley - @DerekB_WI
    •Assemble
    •Act
    •Assert
    

    View Slide

17. Derek Binkley - @DerekB_WI
    Imports
    

    View Slide

18. Derek Binkley - @DerekB_WI
    Define
    

    View Slide

19. Derek Binkley - @DerekB_WI
    Setup
    

    View Slide

20. Derek Binkley - @DerekB_WI
    Tear down
    

    View Slide

21. Derek Binkley - @DerekB_WI
    The Assertion
    

    View Slide

22. Derek Binkley - @DerekB_WI
    

    View Slide

23. Derek Binkley - @DerekB_WI
    

    View Slide

24. Derek Binkley - @DerekB_WI
    

    View Slide

25. Derek Binkley - @DerekB_WI
    click()
    

    View Slide

26. Derek Binkley - @DerekB_WI
    Class change
    

    View Slide

27. Derek Binkley - @DerekB_WI
    screenshot()
    

    View Slide

28. Derek Binkley - @DerekB_WI
    

    View Slide

29. Derek Binkley - @DerekB_WI
    this.currentTest.state
    

    View Slide

30. Derek Binkley - @DerekB_WI
    pdf()
    

    View Slide

31. Derek Binkley - @DerekB_WI
    PDF options
    • https://github.com/GoogleChrome/puppeteer/blob/master/docs/
    api.md#pagepdfoptions
    

    View Slide

32. Derek Binkley - @DerekB_WI
    

    View Slide

33. Derek Binkley - @DerekB_WI
    type()
    

    View Slide

34. Derek Binkley - @DerekB_WI
    Click the button
    

    View Slide

35. Derek Binkley - @DerekB_WI
    The assertion
    

    View Slide

36. Derek Binkley - @DerekB_WI
    

    View Slide

37. Derek Binkley - @DerekB_WI
    hover()
    

    View Slide

38. Derek Binkley - @DerekB_WI
    getComputedStyle()
    

    View Slide

39. Derek Binkley - @DerekB_WI
    RGB value
    

    View Slide

40. Derek Binkley - @DerekB_WI
    setViewport()
    

    View Slide

41. Derek Binkley - @DerekB_WI
    Resolution?
    

    View Slide

42. Derek Binkley - @DerekB_WI
    emulate()
    

    View Slide

43. Derek Binkley - @DerekB_WI
    Visibility
    

    View Slide

44. Derek Binkley - @DerekB_WI
    Sessions
    

    View Slide

45. Derek Binkley - @DerekB_WI
    waitForNavigation()
    

    View Slide

46. Derek Binkley - @DerekB_WI
    

    View Slide

47. Derek Binkley - @DerekB_WI
    I failed :(
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

51. Derek Binkley - @DerekB_WI
    Thanks
    • https://joind.in/talk/90b81
    

    View Slide

52. Thanks to Our
    Sponsors
    2018
    

    View Slide