Trace Viewer

🔍 Playwright Trace Viewer: Your Test’s Time Machine

Imagine you’re a detective. Something went wrong during a bank heist movie scene, but the director wasn’t watching. Luckily, there were security cameras recording EVERYTHING—every footstep, every word, every second. Trace Viewer is that security camera for your tests!

🎬 The Story: Why We Need a Time Machine

Picture this: You wrote a test. It worked yesterday. Today? It fails. But WHY?

Without Trace Viewer, you’re like a detective with no clues. With Trace Viewer, you have:

• 📹 A recording of every action
• 📸 Screenshots at every moment
• 🌐 Every network call your browser made
• 📝 The exact state of your page

Let’s learn how to use this superpower!

1️⃣ Trace Configuration: Setting Up Your Cameras

What Is Trace Configuration?

Think of it like setting up security cameras before opening a store. You decide:

• When should cameras record?
• What should they capture?
• Where should recordings be saved?

🎯 Simple Configuration Example

// playwright.config.js
export default {
  use: {
    // Record only when test fails
    trace: 'on-first-retry'
  }
}

📊 All Configuration Options

🧙‍♂️ Pro Configuration: Full Control

export default {
  use: {
    trace: {
      mode: 'on',
      screenshots: true,
      snapshots: true,
      sources: true
    }
  }
}

What each option captures:

• screenshots → Pictures at each step
• snapshots → DOM state (the page’s code)
• sources → Your test code

🎯 Per-Test Configuration

Want trace for just ONE test?

test('checkout flow', async ({ page }, testInfo) => {
  // Start recording NOW
  await testInfo.attach('trace', {
    contentType: 'application/zip',
    path: 'trace.zip'
  });
});

2️⃣ Opening Trace Files: Accessing Your Recordings

What Are Trace Files?

After your test runs, Playwright creates a .zip file. This file contains:

• All screenshots
• Network logs
• DOM snapshots
• Action timeline

It’s like a movie of your test!

🎬 Three Ways to Open Traces

Method 1: Command Line (Fastest!)

npx playwright show-trace trace.zip

This opens Trace Viewer in your browser instantly!

Method 2: From Test Report

npx playwright show-report

Click any failed test → Click “Trace” tab → Watch the magic!

Method 3: Online Viewer

1. Go to: trace.playwright.dev
2. Drag your .zip file
3. Done! No installation needed!

graph TD
    A["Test Runs"] --> B{Test Failed?}
    B -->|Yes| C["Trace File Created"]
    B -->|No| D["No Trace if 'retain-on-failure'"]
    C --> E["Open with CLI"]
    C --> F["Open in Report"]
    C --> G["Open Online"]
    E --> H["🎉 Trace Viewer!"]
    F --> H
    G --> H

📁 Where Are Trace Files?

By default: test-results/[test-name]/trace.zip

Custom location:

trace: {
  mode: 'on',
  // Custom output folder
}
// Files appear in test-results folder

3️⃣ Trace Viewer Features: Your Detective Toolkit

🎪 Welcome to Detective Headquarters!

When you open Trace Viewer, you see a powerful dashboard. Let’s explore each tool:

📸 Feature 1: Screenshot Gallery

What it shows: A filmstrip of screenshots from your test.

Why it’s amazing:

• See exactly what the user saw
• Spot visual bugs instantly
• Compare “before” and “after” states

[Click] → [Type] → [Submit] → [Wait] → [Assert]
  📸        📸         📸         📸        📸

🌐 Feature 2: Network Tab

Like a phone record for your browser!

See every request your test made:

• API calls
• Images loaded
• Scripts fetched
• Response times

// Your test does this:
await page.goto('/api/users');

// Network tab shows:
// GET /api/users → 200 OK → 45ms

🔍 Feature 3: Console Tab

All console.log messages appear here!

// In your page:
console.log('User logged in!');

// Trace Viewer Console Tab:
// ✓ "User logged in!" (at 00:02.500)

📝 Feature 4: Source Tab

See your actual test code highlighted at each step!

• Green highlight = current line
• Shows exactly where the test is
• Great for debugging loops and conditions

🏠 Feature 5: DOM Snapshot

Like a freeze-frame of your webpage’s skeleton!

• See the HTML at any moment
• Inspect elements as they were
• Find missing or wrong elements

🎭 Feature 6: Action Inspector

Click any action to see:

• What selector was used
• How long it took
• What value was typed
• Any errors that occurred

graph LR
    A["Trace Viewer"] --> B["Screenshots"]
    A --> C["Network Tab"]
    A --> D["Console Tab"]
    A --> E["Source Tab"]
    A --> F["DOM Snapshot"]
    A --> G["Action Inspector"]
    B --> H["Visual Debugging"]
    C --> I["API Debugging"]
    D --> J["Log Debugging"]
    E --> K["Code Navigation"]
    F --> L["Element Debugging"]
    G --> M["Action Details"]

4️⃣ Trace Viewer Timeline: Your Test’s Movie Player

🎬 The Timeline: Control Your Test Movie

The timeline is like a video player for your test. It sits at the bottom of Trace Viewer.

⏱️ Timeline Components

|--[Action]--[Action]--[Action]--[Action]--|
0s          2s          4s          6s     8s
    ▲                       ▲
    Start                   Current

🎯 Using the Timeline

Click anywhere on the timeline to:

• Jump to that exact moment
• See the screenshot from then
• View the DOM at that point
• Check what network calls happened

🎮 Timeline Controls

📍 Action Markers on Timeline

Each colored block represents an action:

• 🟦 Blue = Navigation (goto, reload)
• 🟩 Green = Successful action
• 🟨 Yellow = Waiting
• 🟥 Red = Failed action

🔍 Zooming In

When tests are long, zoom helps!

1. Use the zoom slider
2. Or scroll with trackpad/mouse
3. Focus on the problem area

⏪ Scrubbing Through Time

Drag the playhead to watch your test like a movie:

Past ←——————|playhead|——————→ Future
            ▼
        Current moment

This shows:

• Screenshot updating live
• DOM changing in real-time
• Network requests appearing

🎯 Timeline Pro Tips

1. Find the red block → That’s where things broke
2. Check the moment before red → What was the last good state?
3. Look at timing gaps → Long gaps might mean slow responses

graph TD
    A["Timeline Bar"] --> B["Click to Jump"]
    A --> C["Drag to Scrub"]
    A --> D["Zoom to Focus"]
    B --> E["Screenshot Updates"]
    B --> F["DOM Updates"]
    B --> G["Network Shows"]
    C --> E
    D --> H["See Specific Area"]

🎉 Putting It All Together

Real Debugging Story

The Problem: Your login test fails sometimes.

Step 1: Configure trace for retries

trace: 'on-first-retry'

Step 2: Run tests, let it fail

npx playwright test

Step 3: Open the trace

npx playwright show-trace trace.zip

Step 4: Use the timeline to find the red action

Step 5: Check the screenshot—maybe a popup blocked the button!

Step 6: Check the network—maybe the API was slow!

Step 7: Fix and celebrate! 🎊

🏆 Quick Summary

🚀 You’re Now a Test Detective!

Remember:

• Traces are like security camera footage for your tests
• Configure them wisely (save space, capture what matters)
• Use the timeline to travel through your test’s history
• Every failed test is a mystery YOU can solve!

Happy debugging, detective! 🕵️‍♂️