Debug with Trace Viewer

Intermediate10 minTrending

Record and analyze test execution traces to debug failures with DOM snapshots, network logs, console output, and step-by-step action replay.

Prerequisites

-Playwright test project set up
-Failing or flaky tests to debug

Steps

Enable tracing in config

Configure Playwright to record traces automatically on test failures.

$ cat << 'EOF' // playwright.config.ts use: { trace: 'on-first-retry', // Record trace on first retry screenshot: 'only-on-failure', video: 'on-first-retry', }, retries: 2, EOF

Use 'on-first-retry' in CI to capture traces only for failures, keeping artifacts small. Use 'on' during local debugging to always record.

Run tests with tracing enabled

Execute tests and generate trace files for failed tests.

$ npx playwright test --trace on

Open the trace viewer

Analyze a recorded trace with the interactive viewer.

$ npx playwright show-trace test-results/my-test-chromium/trace.zip

The trace viewer shows actions, DOM snapshots, network requests, console logs, and source code for each step. Use the timeline to scrub through the test execution.

Record a trace programmatically

Control trace recording within a specific test for targeted debugging.

$ cat > tests/debug.spec.ts << 'EOF' import { test, expect } from '@playwright/test'; test('debug this test', async ({ page, context }) => { await context.tracing.start({ screenshots: true, snapshots: true, sources: true }); await page.goto('/'); await page.getByRole('button', { name: 'Submit' }).click(); await expect(page.getByText('Success')).toBeVisible(); await context.tracing.stop({ path: 'debug-trace.zip' }); }); EOF

View traces in the online viewer

Open traces in the browser-based viewer without installing anything.

$ echo 'Upload your trace.zip to: https://trace.playwright.dev'

Full Script

full-script.sh

#!/bin/bash
# Playwright Trace Debugging Workflow
set -euo pipefail

echo "=== Trace Debugging ==="

# Check for existing trace files
TRACES=$(find test-results -name 'trace.zip' 2>/dev/null)

if [ -n "$TRACES" ]; then
  echo "Found trace files:"
  echo "$TRACES"
  echo ""

  # Open the first trace found
  FIRST_TRACE=$(echo "$TRACES" | head -1)
  echo "Opening: $FIRST_TRACE"
  npx playwright show-trace "$FIRST_TRACE"
else
  echo "No trace files found. Running tests with tracing enabled..."
  echo ""

  npx playwright test --trace on 2>&1 || true

  echo ""
  TRACES=$(find test-results -name 'trace.zip' 2>/dev/null)
  if [ -n "$TRACES" ]; then
    echo "Traces recorded:"
    echo "$TRACES"
    echo ""
    echo "View with: npx playwright show-trace <path>"
  else
    echo "All tests passed. No traces to debug."
  fi
fi

echo ""
echo "=== Trace Options ==="
echo "Always record: npx playwright test --trace on"
echo "On failure:    npx playwright test --trace on-first-retry"
echo "View trace:    npx playwright show-trace <trace.zip>"
echo "Online viewer: https://trace.playwright.dev"

FAQ

Discussion

Loading comments...

#!/bin/bash # Playwright Trace Debugging Workflow set -euo pipefail echo "=== Trace Debugging ===" # Check for existing trace files TRACES=$(find test-results -name 'trace.zip' 2>/dev/null) if [ -n "$TRACES" ]; then echo "Found trace files:" echo "$TRACES" echo "" # Open the first trace found FIRST_TRACE=$(echo "$TRACES" | head -1) echo "Opening: $FIRST_TRACE" npx playwright show-trace "$FIRST_TRACE" else echo "No trace files found. Running tests with tracing enabled..." echo "" npx playwright test --trace on 2>&1 || true echo "" TRACES=$(find test-results -name 'trace.zip' 2>/dev/null) if [ -n "$TRACES" ]; then echo "Traces recorded:" echo "$TRACES" echo "" echo "View with: npx playwright show-trace <path>" else echo "All tests passed. No traces to debug." fi fi echo "" echo "=== Trace Options ===" echo "Always record: npx playwright test --trace on" echo "On failure: npx playwright test --trace on-first-retry" echo "View trace: npx playwright show-trace <trace.zip>" echo "Online viewer: https://trace.playwright.dev"