Pro Yearly is on sale from $80 to $50! »

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. Derek Binkley - @DerekB_WI Browser Automation Testing with Headless Chrome

  2. Derek Binkley - @DerekB_WI Is anybody there?

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

    • Senior Engineer, TurnTo Networks • Married, 2 daughters, 1 son
  4. None
  5. Derek Binkley - @DerekB_WI Who Are You? • JavaScript? •

    QA? • Selenium? • DevOps?
  6. Derek Binkley - @DerekB_WI What are we doing? • Automate

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

    • Full Browser • No GUI • Controlled by Node library (Puppeteer)
  8. Derek Binkley - @DerekB_WI Headless Chrome to replace PhantomJS

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

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

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

    - give us Chrome • Mocha - Runs Test • Chai - Provides assertions
  12. Derek Binkley - @DerekB_WI Setup Script • package.json

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

  15. Derek Binkley - @DerekB_WI

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

  17. Derek Binkley - @DerekB_WI Imports

  18. Derek Binkley - @DerekB_WI Define

  19. Derek Binkley - @DerekB_WI Setup

  20. Derek Binkley - @DerekB_WI Tear down

  21. Derek Binkley - @DerekB_WI The Assertion

  22. Derek Binkley - @DerekB_WI

  23. Derek Binkley - @DerekB_WI

  24. Derek Binkley - @DerekB_WI

  25. Derek Binkley - @DerekB_WI click()

  26. Derek Binkley - @DerekB_WI Class change

  27. Derek Binkley - @DerekB_WI screenshot()

  28. Derek Binkley - @DerekB_WI

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

  30. Derek Binkley - @DerekB_WI pdf()

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

  32. Derek Binkley - @DerekB_WI

  33. Derek Binkley - @DerekB_WI type()

  34. Derek Binkley - @DerekB_WI Click the button

  35. Derek Binkley - @DerekB_WI The assertion

  36. Derek Binkley - @DerekB_WI

  37. Derek Binkley - @DerekB_WI hover()

  38. Derek Binkley - @DerekB_WI getComputedStyle()

  39. Derek Binkley - @DerekB_WI RGB value

  40. Derek Binkley - @DerekB_WI setViewport()

  41. Derek Binkley - @DerekB_WI Resolution?

  42. Derek Binkley - @DerekB_WI emulate()

  43. Derek Binkley - @DerekB_WI Visibility

  44. Derek Binkley - @DerekB_WI Sessions

  45. Derek Binkley - @DerekB_WI waitForNavigation()

  46. Derek Binkley - @DerekB_WI

  47. Derek Binkley - @DerekB_WI I failed :(

  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)
  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
  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
  51. Derek Binkley - @DerekB_WI Thanks • https://joind.in/talk/90b81

  52. Thanks to Our Sponsors 2018