Skip to main content

Playwright traces

A Playwright trace records what the browser did — every action, with screenshots, DOM snapshots, network traffic and console output. Without the plugin, reading a trace means finding the zip file the run wrote and opening that file in a separate viewer. When the steps of a spec drive a browser and record a trace per step, the plugin shows that viewer under each step instead, in the spec file's Execution Report, beside the spec.

Data a step published​

A step can publish values while the step runs, through JUnit's TestReporter, and SpecBinder records those values in the report. The values appear in a panel beneath that step in the Execution Report tab, one labelled row per item — never in the spec source being edited. To show the values, switch on Show JUnit TestReporter entries under Settings → Tools → SpecBinder → Split view, nested under the Execution Report tab option, then use the Show Published Reporter Entries toggle on the toolbar above the Execution Report.

A Playwright trace reaches the spec file through the same route: the test publishes the trace file as an entry, and the plugin turns that row into a link that opens the trace viewer.

One row per published entry, beneath the step that recorded the entry — in the Execution Report, never in the spec source being edited.

Reading a trace in the editor​

A trace is one kind of published reporter entry, so traces appear wherever those entries do: under each step in the Execution Report, never in the spec source being edited. Open the Execution Report beside the spec, or alone, and press Show Published Reporter Entries on the toolbar over that pane. The button is not offered while the spec is on screen alone.

One press on the toolbar over the Execution Report, and a row naming the trace zip appears under every step that recorded one — in the report only, not in the spec.

A step with a recorded trace then shows a collapsed Playwright trace row beneath that step. Click the file name and the trace viewer opens inline, in the report pane — the same viewer that opening the zip would give, with screenshots, DOM snapshots, network, console and action timeline.

The full viewer, open under the failed step in the report: the actions, a screenshot of the page at the moment of failure, and tabs for the network traffic and console output.

Opening it full size in the browser​

Hovering the row shows a small ↗ beside the file name. Clicking the arrow opens the same trace at full size in the browser, in Playwright's own hosted viewer — useful when the trace needs the whole screen. Shift- or Alt-clicking the file name does the same, as the row's tooltip says.

Hovering the row shows a ↗ that opens the same trace in Playwright's full-size viewer in the browser. Shift- or Alt-clicking the file name does the same.

Nothing is uploaded. The plugin serves the zip from http://127.0.0.1 on the local machine, and the hosted viewer page fetches the zip from there, so the recording never leaves the local machine.

The hosted viewer is loaded from trace.playwright.dev, so opening a trace full size needs an internet connection. The inline viewer in the Execution Report does not.

Turning it on​

Traces are shown as published reporter entries, so one setting covers both: under Settings → Tools → SpecBinder → Split view, switch on Execution Report, then Show JUnit TestReporter entries beneath that option.

A single checkbox, under the Execution Report option — traces are shown as published entries, so no other switch is needed.