Browser Automated Tests

Combine Headless Chrome with Mocha, Chai and Node to automatically test your web pages.

Transcript

1. Browser Automated Tests
   Derek Binkley @DerekB_WI
   

   View Slide

2. Derek Binkley @DerekB_WI
   Designer?
   
   Developer?
   
   Other?
   

   View Slide

3. What is It?
   

   View Slide

4. Derek Binkley @DerekB_WI
   Testing Tools
   • Text based
   
   • Page recorder
   
   • Selenium WebDriver
   
   • Browser Emulator
   

   View Slide

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

   View Slide

6. Is Anybody There?
   

   View Slide

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

   View Slide

8. What do we need?
   Node
   
   Chrome
   
   Puppeteer
   
   Mocha
   
   Chai
   

   View Slide

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

   View Slide

10. Derek Binkley @DerekB_WI
    Setup Command
    package.json
    

    View Slide

11. Examples
    

    View Slide

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

    View Slide

13. Derek Binkley @DerekB_WI
    First Test
    

    View Slide

14. Derek Binkley @DerekB_WI
    First Test
    

    View Slide

15. Derek Binkley @DerekB_WI
    Test Search
    

    View Slide

16. Derek Binkley @DerekB_WI
    Test Search
    

    View Slide

17. Derek Binkley @DerekB_WI
    Test Failed
    

    View Slide

18. Derek Binkley @DerekB_WI
    Test Failed
    

    View Slide

19. Derek Binkley @DerekB_WI
    Screenshots
    

    View Slide

20. Derek Binkley @DerekB_WI
    Screenshots
    

    View Slide

21. Derek Binkley @DerekB_WI
    Interactive Test
    

    View Slide

22. Derek Binkley @DerekB_WI
    Interactive Test
    

    View Slide

23. Derek Binkley @DerekB_WI
    Reacting to Changes
    • Changing link names
    
    • Changing server builds
    
    • Partners changing integrations
    
    • New branding
    

    View Slide

24. Derek Binkley @DerekB_WI
    Thanks
    • @DerekB_WI
    
    • http:/
    /derekb-wi.com
    

    View Slide

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

    View Slide