Answer

Profiling a Test with Playwright's Trace Viewer

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.

Step 1: Run Your Tests

First, run your tests using the following command:

npx playwright show-report

This will generate an HTML report.

Step 2: Open the Trace Viewer

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

Step 3: Analyze the Test

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.