Profiling a test in Playwright is a breeze with the Trace Viewer. This tool lets you view traces of your test, inspect the log, source, and network at each step, and interact with a DOM snapshot of the page before and after each action.
First, run your tests using the following command:
npx playwright show-report
This will generate an HTML report.
In the HTML report, you'll see a trace icon next to each test name file. Click on this icon to open the Trace Viewer for that specific test.
// Click on the trace icon next to the test name file
Alternatively, you can open a detailed view of a specific test, scroll down to the 'Traces' tab, and click on the trace screenshot.
// Open detailed view -> Traces tab -> Click on trace screenshot
Inside the Trace Viewer, you'll see all actions performed by Playwright along with their timings. This is a great way to identify bottlenecks or slow running tests.
// Analyze actions and timings in the Trace Viewer
And that's it! You've successfully profiled a test with Playwright's Trace Viewer. For more tips on efficient testing with Playwright, check out this blog post.
If you still have questions, please ask a question and I will try to answer it.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email firstname.lastname@example.org.