What is a Playwright trace and how do I open it?

A Playwright trace is an interactive recording of a test run containing DOM snapshots, network requests, console logs, and action timelines. You open it with npx playwright show-trace path/to/trace.zip or at trace.playwright.dev.

This answer is one piece of Chapter 12: Debugging a Red Test.

Debugging Tools in Playwright
Tracing & Trace Viewer
Which Tool, and When

The Trace Viewer is Playwright's most comprehensive debugging tool. Unlike static screenshots or flat video files, a trace records the full interactive DOM state before and after every single locator action, alongside network requests, console outputs, and source code locations.

You typically configure tracing in playwright.config.ts or via test.use() by specifying trace: 'on', trace: 'on-first-retry', or trace: 'retain-on-failure'. When the test completes, Playwright packages the recorded test execution into a trace.zip archive in your test-results/ directory.

To inspect the trace, execute npx playwright show-trace path/to/trace.zip in your terminal. This opens an interactive viewer where you can scrub through execution time, inspect DOM snapshots at each action step, examine network payloads, and pinpoint failure causes.

trace-demo.spec.js(https://practice.learnplayforge.com)

import { test, expect } from '@playwright/test';

test.use({ trace: 'on' });

test('records execution trace', async ({ page }) => {
  await page.goto('/catalog.html?mock=static&seed=42&autologin=1');
  const grinder = page.locator('article[data-sku="MRD-1003"]');
  await grinder.getByRole('button', { name: 'Add to cart' }).click();
  await expect(page.getByTestId('cart-total')).toHaveText('₹11,900');
});

Output

Running 1 test using 1 worker

  ok 1 trace-demo.spec.js:5:1 › records execution trace (1.4s)

  1 passed (2.7s)

# Trace archive generated:
test-results/trace-demo-records-execution-trace/trace.zip

# Command to open the trace:
npx playwright show-trace test-results/trace-demo-records-execution-trace/trace.zip

Test yourself

What is included inside a Playwright trace archive (trace.zip), and how do you view it?

AI can write the test now. The job is knowing whether it checks anything. That's what the course teaches, one chapter at a time.

163 lessons · 226 drills · start free

What is a Playwright trace and how do I open it?

Related questions