Skip to main content
Version: 1.12.0

Trace Viewer

Playwright Trace Viewer is a GUI tool that helps exploring recorded Playwright traces after the script ran.

Playwright Trace Viewer

Recording a trace#

Traces can be recorded using the BrowserContext.Tracing API as follows:

await using var browser = playwright.Chromium.LaunchAsync();
await using var context = await browser.NewContextAsync();
// Start tracing before creating / navigating a page.
await context.Tracing.StartAsync(new TracingStartOptions
Screenshots: true,
Snapshots: true
var page = context.NewPageAsync();
await page.GotoAsync("");
// Stop tracing and export it into a zip archive.
await context.Tracing.StopAsync(new TracingStopOptions
Path: ""

This will record the trace and place it into the file named

Viewing the trace#

You can open the saved trace using Playwright CLI:

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 typ 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.