Skip to main content

Trace Viewer

Playwright Trace Viewer is a GUI tool that helps exploring recorded Playwright traces after the script ran. Open traces locally or in your browser on

Playwright Trace Viewer

Recording a trace

Set the trace: 'on-first-retry' option in the test configuration file. This will produce file for each test that was retried.

import type { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
retries: 1,
use: {
trace: 'on-first-retry',
export default config;

Available options to record a trace:

  • 'on-first-retry' - Record a trace only when retrying a test for the first time.
  • 'off' - Do not record a trace.
  • 'on' - Record a trace for each test. (not recommended as it's performance heavy)
  • 'retain-on-failure' - Record a trace for each test, but remove it from successful test runs.

You can also use trace: 'retain-on-failure' if you do not enable retries but still want traces for failed tests.

If you are not using Playwright Test, use the browserContext.tracing API instead.

Viewing the trace

You can open the saved trace using Playwright CLI or in your browser on

npx playwright show-trace


Once trace is opened, you will see the list of actions Playwright performed on the left hand side:


Selecting each action reveals:

  • action snapshots,
  • action log,
  • source code location,
  • network log for this action

in the properties pane. You will also see rendered DOM snapshots associated with each action.


When tracing with the screenshots option turned on, each trace records screencast and renders it as a film strip:

Film strip

You can hover over the film strip to see a magnified image:


That helps locating the action of interest very quickly.


When tracing with the snapshots option turned on, Playwright captures a set of complete DOM snapshots for each action. Depending on the type of the action, it will capture:

BeforeA snapshot at the time action is called.
ActionA snapshot at the moment of the performed input. This type of snapshot is especially useful when exploring where exactly Playwright clicked.
AfterA snapshot after the action.

Here is what the typical Action snapshot looks like:


Notice how it highlights both, the DOM Node as well as the exact click position.

Viewing remote Traces

You can open remote traces using it's URL. They could be generated in a CI run and makes it easy to view the remote trace without having to manually download the file.

npx playwright show-trace

Using is a statically hosted variant of the Trace Viewer.

Viewing local traces

When navigating to, you can upload trace files using drag and drop.

Remote traces

You can also pass the URL of your uploaded trace (e.g. inside your CI) from some accessible storage as a parameter. CORS (Cross-Origin Resource Sharing) rules might apply.