Browser Automation Testing

D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=47 derek-b
June 05, 2018
53

Browser Automation Testing

D12eaf3ef46e4f0fc6b714fd2b7ffe3b?s=128

derek-b

June 05, 2018
Tweet

Transcript

  1. Browser Automated Testing with Headless Chrome Derek Binkley @DerekB_WI

  2. Derek Binkley @DerekB_WI Who Am I? • Derek Binkley •

    @TurnTo networks • Married, 2 daughters, 1 son
  3. None
  4. None
  5. Customer Generated Content

  6. Derek Binkley @DerekB_WI JavaScript Experience?

  7. What is It?

  8. Derek Binkley @DerekB_WI What Are We Doing? • Automate a

    browser • Try out a site/application • Validate functionality
  9. Derek Binkley @DerekB_WI Headless Chrome • June 2017 • Full

    browser • Chrome Dev Tools • No GUI
  10. Headless Chrome will replace PhantomJS

  11. Is Anybody There?

  12. Derek Binkley @DerekB_WI Why? • Reliability • Dependability • Sleep

    better after an update
  13. Derek Binkley @DerekB_WI Install • npm init • npm i

    —save mocha chai • npm i --save puppeteer • Add test script to package.json
  14. Derek Binkley @DerekB_WI Basics • Test Defined as JavaScript •

    Full Access to DOM • Assertions using Chai • Run using Mocha
  15. Derek Binkley @DerekB_WI Setup Command package.json

  16. Let’s Get Working

  17. Imports

  18. Test Suite Setup

  19. Setup and Teardown

  20. The Assertion

  21. Run the Test

  22. Example 2

  23. None
  24. None
  25. Setup Next Test

  26. Click a Button

  27. CSS Class Change

  28. Evaluate page

  29. Run the Test

  30. Take a Screenshot

  31. afterEach() runs after every test

  32. Example 4

  33. Print to PDF

  34. • Try out some pdf options of your own •

    https:/ /github.com/GoogleChrome/puppeteer/blob/ master/docs/api.md#pagepdfoptions
  35. Example 5

  36. None
  37. page.type

  38. Challenge: Write test for blank input. Does it pass?

  39. Example 6

  40. Test CSS

  41. page.hover

  42. getComputedStyle()

  43. Example 8

  44. setViewport()

  45. Viewport 1200x800

  46. deviceScaleFactor: 3

  47. viewport 300x200

  48. Emulate a Device

  49. Look for iPhone selector

  50. Testing a login session

  51. Example 10

  52. waitForNavigation

  53. Successful Login

  54. Check for logged in message

  55. Derek Binkley @DerekB_WI Experiment Further const context = await browser.createIncognitoBrowserContext();

    page.focus(‘#myselector’) page.mouse.move(x, y, [options]) page.mouse.click(x, y, [options]) page.keyboard.press(‘Tab’) page.touchscreen.tap(x, y) https:/ /github.com/GoogleChrome/puppeteer/blob/master/docs/api.md
  56. None
  57. Derek Binkley @DerekB_WI Thanks Bedankt • @DerekB_WI • https:/ /joind.in/talk/e62ac

  58. 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 • Photos courtesy of https:/ /www.flickr.com/photos/internetarchivebookimages • https:/ /medium.com/@kensoh/chromeless-chrominator-chromy-navalia-lambdium- ghostjs-autogcd-ef34bcd26907