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.
Screenshots = true,
Snapshots = true,
Sources = true
var page = context.NewPageAsync();
// Stop tracing and export it into a zip archive.
Path = "trace.zip"
This will record the trace and place it into the file named
Viewing the trace
You can open the saved trace using Playwright CLI or in your browser on
pwsh bin/Debug/netX/playwright.ps1 show-trace trace.zip
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:
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:
|Before||A snapshot at the time action is called.|
|Action||A snapshot at the moment of the performed input. This type of snapshot is especially useful when exploring where exactly Playwright clicked.|
|After||A 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.
pwsh bin/Debug/netX/playwright.ps1 show-trace https://example.com/trace.zip
trace.playwright.dev is a statically hosted variant of the Trace Viewer.
Viewing local traces
When navigating to trace.playwright.dev, you can upload trace files using drag and drop.
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.