To view and interact with the traces of your tests in the Playwright Trace Viewer, follow these steps:
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
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.
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.
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.
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.
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.
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 email@example.com.