What is the Playwright Trace Viewer?

The Trace Viewer is a powerful debugging tool that records a complete timeline of your test execution and lets you replay it step by step in the browser.

• ✓DOM snapshot for every action (before and after)
• ✓Screenshots at each step
• ✓Network requests and responses
• ✓Console logs and errors
• ✓Action timing (how long each step took)
• ✓Source code for each step

Option 1: On Failure Only (Recommended for CI)

// playwright.config.ts
export default defineConfig({
  use: {
    trace: 'retain-on-failure', // Only keep trace if test fails
  },
});

Option 2: Always

use: { trace: 'on' }

Option 3: Via CLI

npx playwright test --trace on

Option 4: Manually in a Test

test('debug this test', async ({ page, context }) => {
  await context.tracing.start({ screenshots: true, snapshots: true });

  await page.goto('/login');
  await page.getByLabel('Email').fill('user@test.com');

  await context.tracing.stop({ path: 'trace.zip' });
});

After Test Run

npx playwright show-report

Open the HTML report, click on a failed test → "Trace" tab shows the trace viewer.

Open a Trace File Directly

npx playwright show-trace trace.zip

Online Viewer

The trace viewer shows:

• ✓Timeline bar — each action as a segment
• ✓DOM panel — rendered HTML snapshot at the selected step
• ✓Source panel — test code with the current line highlighted
• ✓Network panel — all HTTP requests made
• ✓Console panel — browser console output
• ✓Action list — all recorded actions with timing

Pro Tip: When a test passes locally but fails in CI, enable traces in CI (retain-on-failure) and download the trace.zip artifact to debug exactly what happened.