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
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
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
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
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