Browser Automation Testing

Transcript

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

   View Slide

2. Derek Binkley @DerekB_WI
   Who Am I?
   • Derek Binkley
   
   • @TurnTo networks
   
   • Married, 2 daughters, 1 son
   

   View Slide

3. View Slide

4. View Slide

5. Customer Generated Content
   

   View Slide

6. Derek Binkley @DerekB_WI
   JavaScript
   Experience?
   

   View Slide

7. What is It?
   

   View Slide

8. Derek Binkley @DerekB_WI
   What Are We Doing?
   • Automate a browser
   
   • Try out a site/application
   
   • Validate functionality
   

   View Slide

9. Derek Binkley @DerekB_WI
   Headless Chrome
   • June 2017
   
   • Full browser
   
   • Chrome Dev Tools
   
   • No GUI
   

   View Slide

10. Headless Chrome will replace
    PhantomJS
    

    View Slide

11. Is Anybody There?
    

    View Slide

12. Derek Binkley @DerekB_WI
    Why?
    • Reliability
    
    • Dependability
    
    • Sleep better after an update
    

    View Slide

13. Derek Binkley @DerekB_WI
    Install
    • npm init
    
    • npm i —save mocha chai
    
    • npm i --save puppeteer
    
    • Add test script to package.json
    

    View Slide

14. Derek Binkley @DerekB_WI
    Basics
    • Test Defined as JavaScript
    
    • Full Access to DOM
    
    • Assertions using Chai
    
    • Run using Mocha
    

    View Slide

15. Derek Binkley @DerekB_WI
    Setup Command
    package.json
    

    View Slide

16. Let’s Get Working
    

    View Slide

17. Imports
    

    View Slide

18. Test Suite Setup
    

    View Slide

19. Setup and Teardown
    

    View Slide

20. The Assertion
    

    View Slide

21. Run the Test
    

    View Slide

22. Example 2
    

    View Slide

23. View Slide

24. View Slide

25. Setup Next Test
    

    View Slide

26. Click a Button
    

    View Slide

27. CSS Class Change
    

    View Slide

28. Evaluate page
    

    View Slide

29. Run the Test
    

    View Slide

30. Take a Screenshot
    

    View Slide

31. afterEach() runs after every test
    

    View Slide

32. Example 4
    

    View Slide

33. Print to PDF
    

    View Slide

34. • Try out some pdf options of your own
    
    • https:/
    /github.com/GoogleChrome/puppeteer/blob/
    master/docs/api.md#pagepdfoptions
    

    View Slide

35. Example 5
    

    View Slide

36. View Slide

37. page.type
    

    View Slide

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

    View Slide

39. Example 6
    

    View Slide

40. Test CSS
    

    View Slide

41. page.hover
    

    View Slide

42. getComputedStyle()
    

    View Slide

43. Example 8
    

    View Slide

44. setViewport()
    

    View Slide

45. Viewport 1200x800
    

    View Slide

46. deviceScaleFactor: 3
    

    View Slide

47. viewport
    
    300x200
    

    View Slide

48. Emulate a Device
    

    View Slide

49. Look for iPhone selector
    

    View Slide

50. Testing a login session
    

    View Slide

51. Example 10
    

    View Slide

52. waitForNavigation
    
    

    View Slide

53. Successful Login
    

    View Slide

54. Check for logged in message
    

    View Slide

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
    

    View Slide

56. View Slide

57. Derek Binkley @DerekB_WI
    Thanks
    
    Bedankt
    • @DerekB_WI
    
    • https:/
    /joind.in/talk/e62ac
    

    View Slide

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
    

    View Slide