How do you capture Trace Files?

The Answer

Playwright traces are full recordings of a test run: DOM snapshots, network traffic, console logs, and action timings. Enable them in config and view with the built-in Trace Viewer GUI.

Deep Dive Explanation

Trace options: 'on' (always), 'off' (never), 'retain-on-failure' (only for failed tests), 'on-first-retry' (best for CI - captures trace when a test fails and is being retried). The `sources: true` option includes your TypeScript source files in the trace, making it easy to see which line of code caused each action.

example.spec.ts

// playwright.config.ts
export default defineConfig({
  use: {
    // Best practice: capture trace on first retry (avoids storing traces for all passing tests)
    trace: 'on-first-retry',
  },
});

// View a trace file
// npx playwright show-trace playwright-report/data/some-test-trace.zip

// Programmatic trace control
test('manual trace', async ({ page, context }) => {
  await context.tracing.start({ screenshots: true, snapshots: true, sources: true });
  await page.goto('/complex-flow');
  // ... test steps
  await context.tracing.stop({ path: './traces/complex-flow.zip' });
});