Browser Automation Testing

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