How Trace Viewer works in playwright

Trace Viewer is one of Playwright’s most powerful debugging and reporting features, and understanding it deeply is something that really impresses interviewers and senior QA leads.

Let’s break down Playwright’s Advanced Trace Viewer — step by step 👇

---

🎯 What Is the Playwright Trace Viewer?

Playwright Trace Viewer is an interactive visual debugger that lets you replay, inspect, and analyze your automated test runs after they’ve finished.

It’s like a flight recorder for your test — it captures everything:

• All actions (clicks, fills, navigations)
• Screenshots before and after each step
• DOM snapshots
• Network requests and responses
• Console logs, errors, and page events
• Source code references for each step

You can open the .zip trace file later and visually replay what your test did.

---

⚙️ How It Works

During test execution, Playwright can record a full trace of your session using the --trace option or configuration.

Example (CLI)

npx playwright test --trace on

or to only record failed tests:

npx playwright test --trace retain-on-failure

After the run, Playwright saves a .zip file like:

test-results/my-test-name/trace.zip

You can open it later using:

npx playwright show-trace trace.zip

This launches a full visual UI in your browser.

---

🧩 What the Trace Viewer Shows

When you open trace.zip, you get a powerful dashboard with multiple panes:

1. Timeline Panel (left)

Shows a time-based sequence of all actions:

• Clicks
• Inputs
• Page navigations
• Network calls
• Assertions

Each step is timestamped and colored by status (success/failure).

---

2. Action Details (center)

When you click a step, you can see:

• The exact code line in your test (test.spec.ts or .js)
• The locator used (page.getByRole('button', { name: 'Login' }))
• The DOM snapshot at that moment
• Screenshot before and after the action

This helps you verify exactly what Playwright saw at runtime.

---

3. Live DOM Snapshot (right pane)

You can hover over elements and see their:

• CSS selectors
• HTML attributes
• Visibility state
• Bounding box positions

It even highlights animations and element transitions.

---

4. Network Tab

Shows all XHR/fetch requests triggered by your actions:

• URL
• Status code
• Timing
• Request/response payloads

This is extremely helpful for debugging API-driven frontends.

---

5. Console & Logs

All console logs (console.log, console.error) and errors from the browser are captured with timestamps — you can inspect them just like in DevTools.

---

🧠 Why It’s “Advanced”

Playwright’s Trace Viewer isn’t just a video recording — it’s stateful:

• You can pause at any step and inspect the real DOM snapshot
• You can see what the element looked like when the test interacted
• You can replay test steps interactively (forward/backward)
• It includes multi-page tracing (great for login → dashboard → logout flows)
• It’s self-contained — one .zip file works anywhere

---

🧪 Typical Use Case

1. Your CI test fails randomly.

2. You download trace.zip from CI artifacts.

3. Run:

   npx playwright show-trace trace.zip
   

4. You replay the test visually and realize:

   • A spinner was still visible
   • The element wasn’t clickable yet → This helps you pinpoint flaky timing issues instantly.

---

🧩 Integration Example (Playwright Config)

// playwright.config.ts
export default {
  reporter: [['html'], ['line']],
  use: {
    trace: 'retain-on-failure', // record trace only for failed tests
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
};

This setup keeps your reports lightweight but captures full traces when needed.

---

🚀 Bonus: Playwright Trace vs. Selenium Video/Logs

Feature	Selenium	Playwright Trace Viewer
Visual Replay	❌ Requires manual video recording	✅ Built-in
DOM Snapshot	❌ No	✅ Yes
Element Locator Visualization	❌ No	✅ Yes
Network Traffic	✅ (via proxy tools)	✅ Built-in
Console Logs	✅ (via listeners)	✅ Built-in
Interactive Replay	❌ No	✅ Yes
Multi-page Flow Support	Partial	✅ Excellent

---

✅ Summary

Aspect	Playwright Trace Viewer
What it is	Visual replay and debugging tool
What it records	DOM, screenshots, network, console
Why it’s useful	Debug flakiness, inspect runtime states
Output	trace.zip
Command	npx playwright show-trace trace.zip

---