Killer Feature: Trace Viewer

A test failed in CI. What happened? In Selenium, you have a stack trace and maybe a screenshot. In Playwright, you have the Trace Viewer -- a full timeline of everything that happened during the test. Think of it as a flight recorder for your tests.

What the Trace Viewer Shows You

• Screenshot at every single action (before and after)
• DOM snapshot at each step -- you can inspect elements
• Network requests and responses with full payloads
• Console logs from the browser
• Timeline showing exactly how long each action took
• Source code highlighting the exact line that failed

import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    // Record trace for every test (good for debugging)
    trace: 'on',

    // Or record only on failure/retry (good for CI)
    // trace: 'on-first-retry',
    // trace: 'retain-on-failure',
  },
});

# Run tests with tracing
npx playwright test

# Open trace viewer for a failed test
npx playwright show-trace test-results/my-test/trace.zip

# Or view traces online (no install needed)
# Upload trace.zip to trace.playwright.dev