I’m working on automated testing with Puppeteer and need to monitor how my web application performs during test runs. I want to track things like page load times, script execution duration, and rendering performance.
Is it possible to collect performance data similar to what you see in Chrome DevTools performance tab while running Puppeteer tests? I’m looking for a way to get detailed timing information about DOM events, network requests, and JavaScript execution.
I’ve tried looking through the Puppeteer documentation but couldn’t find clear examples of how to enable performance monitoring. Has anyone successfully implemented performance tracking in their Puppeteer test suite? What’s the best approach to gather this type of timing data programmatically?
Yeah, you can extract performance data during Puppeteer execution - just need to combine a few approaches. Use page.evaluate(() => performance.getEntriesByType('navigation')) to grab detailed page load metrics like DNS lookup, connection time, and first paint events. For network monitoring, I’ve had good luck with page.setRequestInterception(true) and manually tracking request/response timings. Another approach I use a lot is enabling the Runtime domain with page._client.send('Runtime.enable') then activating the Performance domain - lets you capture heap usage and execution contexts. The main thing I’ve learned is you need to decide upfront what metrics actually matter since collecting everything kills performance. I usually stick to critical user journey timings instead of trying to profile everything during automated tests.
Found an easier approach than what’s been mentioned - just use await page.coverage.startJSCoverage() and page.coverage.startCSSCoverage() before your tests. You’ll get execution timings plus see which code actually runs. If you need something basic though, page.waitForLoadState() with networkidle works fine for most timing stuff without the complex tracing setup.
I’ve used Puppeteer’s performance API for about a year - works great for timing data. The page.metrics() method gives you basic stuff like DOM nodes, layout duration, and script execution time. For deeper analysis, I enable the Performance domain with page._client.send(‘Performance.enable’) then collect traces using page.tracing.start(). The tracing creates JSON files you can analyze yourself or drop into Chrome DevTools. Just watch when you start/stop tracing - timing matters for useful data. I wrap my test scenarios with tracing calls and parse the files for specific performance indicators. Also, page.evaluate() lets you grab window.performance timing data straight from the browser during tests.