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 Who Am I? • Derek Binkley

    • Senior Engineer, TurnTo Networks • Married, 2 daughters, 1 son
  2. Derek Binkley - @DerekB_WI What are we doing? • Automate

    a Browser • Try a site like a user • Validate Functionality
  3. Derek Binkley - @DerekB_WI Headless Chrome • Introduced June 2017

    • Full Browser • No GUI • Controlled by Node library (Puppeteer)
  4. Derek Binkley - @DerekB_WI Selenium v. Headless Chrome • Won’t

    replace selenium • Selenium complex and powerful • Chrome - single browser testing • Different uses
  5. Derek Binkley - @DerekB_WI Why? • Reliability • Dependability •

    Sleep better after an update • In addition to other tests
  6. Derek Binkley - @DerekB_WI Components • Using Node • Puppeteer

    - give us Chrome • Mocha - Runs Test • Chai - Provides assertions
  7. 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)
  8. 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
  9. 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