Observability: Traces, Videos and Logs

Observability features like traces, videos and logs turn opaque UI failures into actionable insights. Playwright can capture these artifacts automatically, which is invaluable when debugging in CI.

Using Traces and Videos to Debug Failures #

You can enable tracing and video recording in your Playwright configuration or per test, and then upload artifacts from CI for later inspection.

// playwright.config.ts (snippet for trace and video)
import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    trace: 'on-first-retry',
    video: 'retain-on-failure',
  },
});

# After a failed run, open the trace viewer locally
npx playwright show-trace path/to/trace.zip

Logs, console output and network recordings complement traces and can be used selectively for noisy or complex areas.

Common Mistakes #

Mistake 1 — Debugging only from textual error messages #

This can be slow.

❌ Wrong: Guessing at timing issues without visual context.

✅ Correct: Use traces and videos to see exactly what the user would see.

Mistake 2 — Collecting too many artifacts without a plan #

This overwhelms storage and people.

❌ Wrong: Saving all artifacts forever but rarely reviewing them.

✅ Correct: Capture targeted artifacts on failures and use them actively in triage.