Features of Trace Viewer in Playwright

Playwright Trace Viewer is used to debug tests by exploring recorded traces after a script is run. It is most useful when running test in CI pipeline. We can also view traces locally.

To record a trace, first we need to configure the trace option in playwright.congif file.

Trace Options	Explanation
off	No trace recorded.
on	Records trace in each run
retain-on-failure	Records trace for all test, but keeps only trace of failed test. Trace for passed run is removed
on-first-retry	Records trace only after a test is failed and retried for the first time
on-all-retires	Records trace only after a test is failed and for all retries

To record a trace locally, we need to run tests using –trace on option.

npx playwright test --trace on

After the test is run, the trace is recorded based on the option given in config file. To view the trace, we need to open HTML report using npx playwright show-report command.

Click the Traces link to open the trace viewer.

Here are some of the features of Trace Viewer:

Actions

We can see the locator details and the time taken to complete each action in the Actions tab. By clicking the Before and After tab, we can see the snapshot before and after an action has taken place. These snapshots are useful for debugging a particular action.

When we double click a particular action, the timeline, locators, console logs and networks logs are filtered for that action.

Call

The time taken to complete an action and the locator details are populated in the Call tab. We can also check if in strict mode and if a timeout has occurred.

Log

Playwright’s auto wait functionality can be seen in Logs. Before an action is performed, playwright automatically checks if the element is stable, visible and enabled. This is recorded in the logs.

From the above code, we can see that for performing a click action, playwright is waiting for the element to be visible, enabled and stable, scrolling the element into view, performing the action and waiting for the navigation to be complete.

Errors and Console

When a test fails, we can check the error message in the Errors tab. A red line highlighting the error is visible in the timeline.

In the Console tab, we can see logs from both the browser and from our tests. If we have used any console.log in our tests, then the message is displayed in the Console tab.

Network

In the network tab, we can see all the request made to a server during our tests. We can see information about request header, request body, response header and response body by clicking on each method. These are useful during API testing.

Source

We can view the entire code in Source tab. A line of code is highlighted corresponding to the action selected in Actions tab.

In conclusion, we can use Trace Viewer to effectively debug our tests in CI environments or locally.