Browser Automation Testing with Headless Chrome - That Conference

D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=47 derek-b
August 08, 2018

Browser Automation Testing with Headless Chrome - That Conference

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 talk we see how to combine Jasmine, 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.

D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=128

derek-b

August 08, 2018
Tweet

Transcript

  1. Derek Binkley - @DerekB_WI

  2. Derek Binkley - @DerekB_WI

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

  4. Derek Binkley - @DerekB_WI Is anybody there?

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

    • TurnTo Networks • Married, 2 daughters, 1 son
  6. None
  7. Derek Binkley - @DerekB_WI Who Are You? • JavaScript? •

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

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

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

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

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

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

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

  15. None
  16. Derek Binkley - @DerekB_WI Run It

  17. Derek Binkley - @DerekB_WI

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

  19. Derek Binkley - @DerekB_WI Imports

  20. Derek Binkley - @DerekB_WI Define

  21. Derek Binkley - @DerekB_WI Setup

  22. Derek Binkley - @DerekB_WI Tear down

  23. Derek Binkley - @DerekB_WI The Assertion

  24. Derek Binkley - @DerekB_WI

  25. Derek Binkley - @DerekB_WI

  26. Derek Binkley - @DerekB_WI

  27. Derek Binkley - @DerekB_WI click()

  28. Derek Binkley - @DerekB_WI Class change

  29. Derek Binkley - @DerekB_WI screenshot()

  30. Derek Binkley - @DerekB_WI

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

  32. Derek Binkley - @DerekB_WI pdf()

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

  34. Derek Binkley - @DerekB_WI

  35. Derek Binkley - @DerekB_WI type()

  36. Derek Binkley - @DerekB_WI Click the button

  37. Derek Binkley - @DerekB_WI The assertion

  38. Derek Binkley - @DerekB_WI

  39. Derek Binkley - @DerekB_WI hover()

  40. Derek Binkley - @DerekB_WI getComputedStyle()

  41. Derek Binkley - @DerekB_WI RGB value

  42. Derek Binkley - @DerekB_WI setViewport()

  43. Derek Binkley - @DerekB_WI Resolution?

  44. Derek Binkley - @DerekB_WI emulate()

  45. Derek Binkley - @DerekB_WI Sessions

  46. Derek Binkley - @DerekB_WI waitForNavigation()

  47. 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)
  48. 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
  49. Derek Binkley - @DerekB_WI Resources • 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 • https://github.com/nesk/puphpeteer
  50. Derek Binkley - @DerekB_WI Community

  51. Derek Binkley - @DerekB_WI Thanks

  52. Derek Binkley - @DerekB_WI