Config and CI

Trace Viewer in Playwright

Use Playwright Trace Viewer to inspect actions, DOM snapshots, network calls, console logs, screenshots, and failures after a test run.

What Trace Viewer Shows

  • Action timeline.
  • Before and after DOM snapshots.
  • Locator resolution details.
  • Network requests and responses.
  • Console messages and errors.
  • Screenshots and attachments.

How to Enable Trace

// playwright.config.ts
use: {
  trace: 'on-first-retry'
}

How to Open Trace

npx playwright show-trace trace.zip

Reading the Trace

  1. Start from the failed action.
  2. Check the locator snapshot.
  3. Look at the page before the action.
  4. Review console and network panels.
  5. Confirm whether the problem is test code, data, timing, or application behavior.

Debugging Failed Tests

Trace Viewer is strongest when you use it to answer one question: what did Playwright try to do, and what did the browser actually show at that moment?

☰