How do I view and interact with the traces of my tests in the Playwright Trace Viewer?

Answer

Viewing and Interacting with Traces in Playwright Trace Viewer

To view and interact with the traces of your tests in the Playwright Trace Viewer, follow these steps:

1. Run tests with the --show-trace-viewer flag: Execute your tests using the npx playwright command with the --show-trace-viewer flag turned on. This generates an HTML report.

   npx playwright test --show-trace-viewer

2. Open the HTML report: The report shows a summary of all tests, including passed, failed, flaky, and skipped tests. You can filter and search for specific tests.

3. Click on a test: This opens the detailed view, where you can see more information about the test, such as errors, test steps, and traces.

4. Navigate to the 'Traces' tab: In the detailed view, scroll down to the 'Traces' tab and click on the trace screenshot to open the trace.

5. Interact with the trace: In the Trace Viewer, you can click through each action or hover over the timeline to see what happened during each step. The Trace Viewer creates a DOM snapshot, allowing you to fully interact with it and open the devtools.

6. Inspect logs, sources, and network: During each step of your test, you can inspect logs, sources, and network activity.

By default, the playwright.config file contains the configuration needed to create a trace.zip file for each test. These traces are set up to run on the first retry of failed tests but not on the first run or second retry. To force tracing to be turned on locally, use the --trace ON flag while running the npx playwright command:

npx playwright test --trace ON

Now you can easily view and interact with the traces of your tests in the Playwright Trace Viewer, making it easier to debug and understand your test execution.