Playwright Trace Viewer: Debug Any Test Failure in 60 Seconds

Stop adding console.log to your tests. Playwright’s Trace Viewer gives you a complete timeline of every action, network request, and DOM snapshot — letting you debug any failure in 60 seconds.

Enable Tracing

// playwright.config.ts
export default defineConfig({
  use: {
    trace: 'retain-on-failure', // Only save traces for failed tests
    // Options: 'on', 'off', 'retain-on-failure', 'on-first-retry'
  },
});

Open the Trace Viewer

# After a test fails, open the trace
npx playwright show-trace test-results/my-test/trace.zip

# Or view in browser
npx playwright show-trace --browser test-results/my-test/trace.zip

What the Trace Shows You

• Action timeline: every click, fill, navigation in chronological order
• DOM snapshots: the exact state of the page at each step (before AND after)
• Network requests: every API call with request/response bodies
• Console logs: browser console output at each step
• Source code: which line of your test was executing
• Screenshots: visual state at every action

The 60-Second Debugging Flow

1. Open trace file for the failed test (5 seconds)
2. Jump to the failing action in the timeline (10 seconds)
3. Compare DOM snapshot before and after the action (15 seconds)
4. Check network tab — did the API return expected data? (15 seconds)
5. Check console — any JS errors? (10 seconds)
6. Identify root cause and fix (5 seconds to know what to change)

CI Integration: Auto-Upload Traces

# GitHub Actions
- uses: actions/upload-artifact@v4
  if: failure()
  with:
    name: playwright-traces
    path: test-results/
    retention-days: 7

When a test fails in CI, download the trace artifact and open it locally. You see exactly what the CI runner saw — no more “works on my machine.”