Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Browser Automation Testing with Headless Chrome

derek-b
November 14, 2018

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).

derek-b

November 14, 2018
Tweet

More Decks by derek-b

Other Decks in Technology

Transcript

  1. Derek Binkley - @DerekB_WI
    Browser Automation Testing
    with Headless Chrome

    View full-size slide

  2. Derek Binkley - @DerekB_WI
    Is anybody there?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. Derek Binkley - @DerekB_WI

    View full-size slide

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

    View full-size slide

  15. Derek Binkley - @DerekB_WI
    Imports

    View full-size slide

  16. Derek Binkley - @DerekB_WI
    Define

    View full-size slide

  17. Derek Binkley - @DerekB_WI
    Setup

    View full-size slide

  18. Derek Binkley - @DerekB_WI
    Tear down

    View full-size slide

  19. Derek Binkley - @DerekB_WI
    The Assertion

    View full-size slide

  20. Derek Binkley - @DerekB_WI

    View full-size slide

  21. Derek Binkley - @DerekB_WI

    View full-size slide

  22. Derek Binkley - @DerekB_WI

    View full-size slide

  23. Derek Binkley - @DerekB_WI
    click()

    View full-size slide

  24. Derek Binkley - @DerekB_WI
    Class change

    View full-size slide

  25. Derek Binkley - @DerekB_WI
    screenshot()

    View full-size slide

  26. Derek Binkley - @DerekB_WI

    View full-size slide

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

    View full-size slide

  28. Derek Binkley - @DerekB_WI
    pdf()

    View full-size slide

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

    View full-size slide

  30. Derek Binkley - @DerekB_WI

    View full-size slide

  31. Derek Binkley - @DerekB_WI
    type()

    View full-size slide

  32. Derek Binkley - @DerekB_WI
    Click the button

    View full-size slide

  33. Derek Binkley - @DerekB_WI
    The assertion

    View full-size slide

  34. Derek Binkley - @DerekB_WI

    View full-size slide

  35. Derek Binkley - @DerekB_WI
    hover()

    View full-size slide

  36. Derek Binkley - @DerekB_WI
    getComputedStyle()

    View full-size slide

  37. Derek Binkley - @DerekB_WI
    RGB value

    View full-size slide

  38. Derek Binkley - @DerekB_WI
    setViewport()

    View full-size slide

  39. Derek Binkley - @DerekB_WI
    Resolution?

    View full-size slide

  40. Derek Binkley - @DerekB_WI
    emulate()

    View full-size slide

  41. Derek Binkley - @DerekB_WI
    Visibility

    View full-size slide

  42. Derek Binkley - @DerekB_WI
    Sessions

    View full-size slide

  43. Derek Binkley - @DerekB_WI
    waitForNavigation()

    View full-size slide

  44. Derek Binkley - @DerekB_WI

    View full-size slide

  45. Derek Binkley - @DerekB_WI
    I failed :(

    View full-size slide

  46. 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 full-size slide

  47. 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 full-size slide

  48. 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 full-size slide

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

    View full-size slide

  50. Thanks to Our
    Sponsors
    2018

    View full-size slide