What is Playwright Trace Viewer and how does it help?

The Answer

Trace Viewer is Playwright's built-in debugging GUI. It provides a full timeline of test actions with: DOM snapshots at every step, network log, console output, and screenshots — allowing you to 'time-travel' through a test failure.

Deep Dive Explanation

The Trace Viewer shows: 1) Action log (every click, fill, navigation), 2) DOM snapshot before and after each action, 3) Network requests and responses, 4) Console messages, 5) Source code at the point of each action. This makes CI debugging feasible without needing to reproduce failures locally.

example.spec.ts

// Enable tracing in config
export default defineConfig({
  use: { trace: 'on-first-retry' }
});

// After a failure, view the trace:
// npx playwright show-trace test-results/trace.zip

// Manually start/stop tracing
await context.tracing.start({ screenshots: true, snapshots: true, sources: true });
// ... run test steps
await context.tracing.stop({ path: './trace.zip' });