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

Browser Automated Tests

derek-b
April 09, 2018

Browser Automated Tests

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

derek-b

April 09, 2018
Tweet

More Decks by derek-b

Other Decks in Programming

Transcript

  1. Browser Automated Tests
    Derek Binkley @DerekB_WI

    View Slide

  2. Derek Binkley @DerekB_WI
    Designer?

    Developer?

    Other?

    View Slide

  3. What is It?

    View Slide

  4. Derek Binkley @DerekB_WI
    Testing Tools
    • Text based

    • Page recorder

    • Selenium WebDriver

    • Browser Emulator

    View Slide

  5. Derek Binkley @DerekB_WI
    Headless Chrome
    • June 2017

    • Full browser

    • Chrome Dev Tools

    • No GUI

    View Slide

  6. Is Anybody There?

    View Slide

  7. Derek Binkley @DerekB_WI
    Why?
    • Reliability

    • Dependability

    • Sleep better after an update

    View Slide

  8. What do we need?
    Node

    Chrome

    Puppeteer

    Mocha

    Chai

    View Slide

  9. Derek Binkley @DerekB_WI
    Install
    • npm init

    • npm i —save mocha chai

    • npm i --save puppeteer

    • Add test script to package.json

    View Slide

  10. Derek Binkley @DerekB_WI
    Setup Command
    package.json

    View Slide

  11. Examples

    View Slide

  12. Derek Binkley @DerekB_WI
    Basics
    • Test Defined as JavaScript

    • Full Access to DOM

    • Assertions using Chai

    View Slide

  13. Derek Binkley @DerekB_WI
    First Test

    View Slide

  14. Derek Binkley @DerekB_WI
    First Test

    View Slide

  15. Derek Binkley @DerekB_WI
    Test Search

    View Slide

  16. Derek Binkley @DerekB_WI
    Test Search

    View Slide

  17. Derek Binkley @DerekB_WI
    Test Failed

    View Slide

  18. Derek Binkley @DerekB_WI
    Test Failed

    View Slide

  19. Derek Binkley @DerekB_WI
    Screenshots

    View Slide

  20. Derek Binkley @DerekB_WI
    Screenshots

    View Slide

  21. Derek Binkley @DerekB_WI
    Interactive Test

    View Slide

  22. Derek Binkley @DerekB_WI
    Interactive Test

    View Slide

  23. Derek Binkley @DerekB_WI
    Reacting to Changes
    • Changing link names

    • Changing server builds

    • Partners changing integrations

    • New branding

    View Slide

  24. Derek Binkley @DerekB_WI
    Thanks
    • @DerekB_WI

    • http:/
    /derekb-wi.com

    View Slide

  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

    View Slide