Browser Automation Testing with Headless Chrome

D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=47 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).

D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=128

derek-b

November 14, 2018
Tweet

Transcript

  1. 3.

    Derek Binkley - @DerekB_WI Who Am I? • Derek Binkley

    • Senior Engineer, TurnTo Networks • Married, 2 daughters, 1 son
  2. 4.
  3. 6.

    Derek Binkley - @DerekB_WI What are we doing? • Automate

    a Browser • Try a site like a user • Validate Functionality
  4. 7.

    Derek Binkley - @DerekB_WI Headless Chrome • Introduced June 2017

    • Full Browser • No GUI • Controlled by Node library (Puppeteer)
  5. 9.

    Derek Binkley - @DerekB_WI Selenium v. Headless Chrome • Won’t

    replace selenium • Selenium complex and powerful • Chrome - single browser testing • Different uses
  6. 10.

    Derek Binkley - @DerekB_WI Why? • Reliability • Dependability •

    Sleep better after an update • In addition to other tests
  7. 11.

    Derek Binkley - @DerekB_WI Components • Using Node • Puppeteer

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