DevTools and Headless Chrome - The Automation Power-Couple

on YouTube ↗19m

" summary

Demos combining Chrome Headless and DevTools show concrete automation: launch headless Chrome, use Puppeteer to open pages, send raw DevTools protocol commands (via puppeteer.client.send) to enable CSS coverage, trigger interactions, then call startRuleUsage / stopRuleUsage and compute coverage. A scraper/test script reports precise numbers — e.g. 54% unused CSS with no interaction dropping to 14% unused CSS after exercising the UI — and the script runs and closes the browser successfully.

AI-written summary · about

" chapters (10)

1. 0:00Start
2. 0:45provide a good user experience in a consistent manner
3. 1:12use a framework like selenium an end-to-end testing
4. 4:47using the page dot evaluate method
5. 13:15sending down the entire bootstrap css library to the client
6. 13:45help us find the amount of unused css in your application
7. 15:46using the network panel and the websockets filter
8. 17:05start monitoring the css coverage
9. 17:31add an event handler
10. 17:51simulate all the user actions

" related talks

• 32mDevTools and Headless Chrome - The Automation Power CoupleYonatan Mevorach · GDG DevFest Ukraine 2017
• 30mPowerful Automation with the Chrome DevTools ProtocolTrent Willis · Nordic.js 2018
• 28mRethinking Browser Automation: Unleashing the Power of Puppeteer and PlaywrightÖnder Ceylan · JSWorld Conference 2024
• 19mWorking Well: The Future of Web TestingTrent Willis · dotJS 2017
• 01h 15mPuppeteer can automate that!Önder Ceylan · HolyJS Piter 2020
• 28mRethinking Browser Automation: Unleashing the Power of Puppeteer and PlaywrightÖnder Ceylan · DevWorld 2024
• 29mNext level of Front end testing with Devtools and WebDriverSrinivasan Sekar, Fathima Harris · SeleniumConf London 2019
• 25mAutomated Performance Testing With WebDriverChristian Bromann · Node+JS Interactive 2018