Quiz: Trace viewer · Learn Playwright

Check the Console tab for JavaScript errors that might have broken the pageFind the red failure marker on the timeline, click the failing action, check the Before/After DOM snapshots to see what was actually on the pageCheck the Network tab to see if the page loaded correctlyLook at the Log tab to see which locator Playwright tried to match

trace: 'on' — always record so you have traces for every test whether it passes or failstrace: 'on-first-retry' — records only when a test actually fails (requires a retry), balancing debugging usefulness with storage costtrace: 'off' — traces slow down CI and the HTML report is enough for debuggingtrace: 'retain-on-failure' — records everything and discards only after a test passes, maximizing coverage

Unzip the file and open index.html in any browserOpen trace.playwright.dev in a browser and drag the .zip file onto itUse npx playwright show-trace — npx downloads Playwright temporarilyTraces can only be viewed by whoever recorded them — they're machine-specific

The page state when the test startedThe exact moment of the click or fill — shows precisely where Playwright's action landed, highlighted in the snapshotThe DOM tree parsed from the locator selector used in that actionThe accessibility tree at the time of the action

The raw browser console output during the testWhat Playwright was waiting for — which actionability checks ran, which locator it tried to match, and the sequence of retriesThe test source code with each line highlighted as it executedNetwork request/response pairs associated with the selected action

Nothing — test environment credentials are disposable and not sensitiveDon't post the trace to public Slack channels or GitHub issues — auth tokens visible in the trace could be used to access the test environmentPlaywright automatically redacts auth tokens from traces before savingOnly traces from production runs contain real credentials — CI test credentials are auto-rotated

CPU and memory usage during the test runA chronological view of actions and navigations — blue blocks for Playwright actions, green for navigations, with a red marker at the point of failureNetwork waterfall — each bar represents a network requestTest steps as defined in test.step() blocks

Use the Trace Viewer's built-in CSS inspector on the right side panelPop out the DOM snapshot into a separate browser window — you can then open DevTools and inspect the HTML and CSSExport the snapshot as HTML and open it in the browserThe DOM snapshot is read-only — you can't inspect CSS in Trace Viewer

Check yourself