Viewing Playwright traces

• 00:31 Running a trace of a test locally
• 01:23 Opening and inspecting the local trace report
• 02:38 Using trace viewer for debugging
• 05:35 Fixing the test and re-running it

In this video, we learn how to use Playwright's trace viewer to find and fix failing tests locally and on CI. Trace viewer is a powerful tool that allows developers to inspect, debug, and understand what's happening in their tests at a granular level.

To run traces locally, we need to use the --trace-on flag when executing the test command. In the example shown in the video, a failing test is identified, and the trace is run by executing npx playwright test [filename] --trace-on. This runs the tests on Chromium, Webkit, and Firefox, and a local trace report is generated as a result.

Opening the local trace report in the browser provides a detailed view of what happened during the test. We can see the individual tests, identify which ones passed and failed, inspect the actual steps, and finally, open the trace viewer for further investigation.

The trace viewer shows a timeline of the test along with a DOM snapshot, allowing developers to hover over different points in time to see what was happening. By inspecting the DOM snapshot, we can identify what's going right or wrong with the test, and compare that with the actual code or expectations in the test script.

Moreover, the trace viewer allows further interaction with the snapshot, showing any console errors, network requests, and metadata related to the test. Opening the snapshot in a new window provides more space to inspect the elements, modify CSS, or even change the structure or state of the DOM.

In conclusion, the trace viewer in Playwright can be an invaluable tool for developers to quickly identify issues in their tests and understand exactly what needs to be fixed. By providing a detailed view of the tests' execution, the trace viewer helps save time and effort during the debugging process. Happy testing!