The Playwright Trace Viewer is a post-mortem debugging tool that records a timeline of every action with before/after DOM snapshots, network calls, console logs, source, and screenshots. You open a saved trace.zip to replay exactly what happened, without re-running the test.
Traces are Playwright's answer to 'it fails only on CI and I can't reproduce it'. Enable trace capture in config (commonly 'on-first-retry' to keep green runs fast), and on failure Playwright writes a trace.zip. Opening it with npx playwright show-trace gives an interactive timeline: click any step to see the DOM snapshot immediately before and after, hover to inspect the locator that was targeted, and view the network and console panels for that moment. Because the snapshots are real, rendered DOM, you can literally see the overlay that intercepted a click or the empty list that failed an assertion. This turns opaque CI failures into a five-minute diagnosis and is one of Playwright's strongest advantages over Selenium's screenshot-only debugging.
A test fails only on CI. The engineer downloads the trace.zip artifact, runs npx playwright show-trace, clicks the failing click step, and sees a promo modal covering the button in the 'before' snapshot — diagnosed in minutes, without ever reproducing the CI environment locally.
// Enable in config
// use: { trace: 'on-first-retry' }
# Open a saved trace locally
npx playwright show-trace trace.zip
# In CI, upload the report/traces as an artifact, e.g. GitHub Actions:
# - uses: actions/upload-artifact@v4
# if: ${{ !cancelled() }}
# with:
# name: playwright-report
# path: playwright-report/Scenario: A test passes locally but fails ~30% of the time on CI, and screenshots at failure look normal. Colleagues are adding random sleeps hoping to fix it. How does the Trace Viewer give a faster, correct diagnosis?