Combine Headless Chrome with Mocha, Chai and Node to automatically test your web pages.
Browser Automated TestsDerek Binkley @DerekB_WI
View Slide
Derek Binkley @DerekB_WIDesigner?Developer?Other?
What is It?
Derek Binkley @DerekB_WITesting Tools• Text based• Page recorder• Selenium WebDriver• Browser Emulator
Derek Binkley @DerekB_WIHeadless Chrome• June 2017• Full browser• Chrome Dev Tools• No GUI
Is Anybody There?
Derek Binkley @DerekB_WIWhy?• Reliability• Dependability• Sleep better after an update
What do we need?NodeChromePuppeteerMochaChai
Derek Binkley @DerekB_WIInstall• npm init• npm i —save mocha chai• npm i --save puppeteer• Add test script to package.json
Derek Binkley @DerekB_WISetup Commandpackage.json
Examples
Derek Binkley @DerekB_WIBasics• Test Defined as JavaScript• Full Access to DOM• Assertions using Chai
Derek Binkley @DerekB_WIFirst Test
Derek Binkley @DerekB_WITest Search
Derek Binkley @DerekB_WITest Failed
Derek Binkley @DerekB_WIScreenshots
Derek Binkley @DerekB_WIInteractive Test
Derek Binkley @DerekB_WIReacting to Changes• Changing link names• Changing server builds• Partners changing integrations• New branding
Derek Binkley @DerekB_WIThanks• @DerekB_WI• http://derekb-wi.com
Derek Binkley @DerekB_WIResources• 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