14.5Trace Viewer

Playwright's Trace Viewer is the most powerful debugging tool for CI failures. It records a complete timeline of every action, network request, DOM snapshot, and console message.

Enabling Traces

// playwright.config.ts
export default defineConfig({
  use: {
    trace: 'on-first-retry',  // Record traces only when tests retry
    // Other options: 'on', 'off', 'retain-on-failure'
  },
});

Viewing Traces

# Open trace viewer locally
npx playwright show-trace test-results/login-test/trace.zip

# Or open the online viewer and drag-drop the trace file
# https://trace.playwright.dev

The Trace Viewer shows:

• Timeline: Every action with screenshots before and after
• Network: All HTTP requests and responses
• Console: Browser console output
• Source: The test code with the failing line highlighted
• DOM snapshot: Inspect the page state at any point in time