<< All versions

Skill v1.0.0

currentTrusted Publisher100/100
microsoft/playwright/playwright-trace
──Details
PublishedSeptember 29, 2026 at 11:07 AM
Content Hashsha256:c23e94ec9d91eceb...
Git SHA
──Files
Files (1 file, 4.8 KB)
SKILL.md4.8 KBactive
SKILL.md · 176 lines · 4.8 KB

version: "1.0.0" name: playwright-trace description: Inspect Playwright trace files from the command line — list actions, view requests, console, errors, snapshots and screenshots. allowed-tools: Bash(npx playwright trace:*)

Playwright Trace CLI

Inspect .zip trace files produced by Playwright tests without opening a browser.

Workflow

  1. Start with trace open <trace.zip> to extract the trace and see its metadata.
  2. Use trace actions to see all actions with their action IDs.
  3. Use trace action <action-id> to drill into a specific action — see parameters, logs, source location, and available snapshots.
  4. Use trace requests, trace console, or trace errors for cross-cutting views.
  5. Use trace snapshot <action-id> to get the DOM snapshot, or run a browser command against it.
  6. Use trace close to remove the extracted trace data when done.

All commands after open operate on the currently opened trace — no need to pass the trace file again. Opening a new trace replaces the previous one.

Commands

Open a trace

bash
# Extract trace and show metadata: browser, viewport, duration, action/error counts
npx playwright trace open <trace.zip>

Close a trace

bash
# Remove extracted trace data
npx playwright trace close

Actions

bash
# List all actions as a tree with action IDs and timing
npx playwright trace actions
 
# Filter by action title (regex, case-insensitive)
npx playwright trace actions --grep "click"
 
# Only failed actions
npx playwright trace actions --errors-only

Action details

bash
# Show full details for one action: params, result, logs, source, snapshots
npx playwright trace action <action-id>

The action command displays available snapshot phases (before, action, after) and the exact command to extract them.

Requests

bash
# All network requests: start time (on the `trace actions` clock), method, status, URL, duration, size
npx playwright trace requests
 
# Filter by URL pattern
npx playwright trace requests --grep "api"
 
# Filter by HTTP method
npx playwright trace requests --method POST
 
# Only failed requests (status >= 400)
npx playwright trace requests --failed

Request details

bash
# Show full details for one request: headers, body, security
npx playwright trace request <request-id>

Console

bash
# All console messages and stdout/stderr
npx playwright trace console
 
# Only errors
npx playwright trace console --errors-only
 
# Only browser console (no stdout/stderr)
npx playwright trace console --browser
 
# Only stdout/stderr (no browser console)
npx playwright trace console --stdio
 
# Filter by message text pattern
npx playwright trace console --grep "failed to fetch"

Errors

bash
# All errors with stack traces and associated actions
npx playwright trace errors

Snapshots

The snapshot command loads the DOM snapshot for an action into a headless browser and runs a single browser command against it. Without a browser command, it returns the accessibility snapshot.

bash
# Get the accessibility snapshot (default)
npx playwright trace snapshot <action-id>
 
# Use a specific phase
npx playwright trace snapshot <action-id> --phase before
 
# Run eval to query the DOM
npx playwright trace snapshot <action-id> -- eval "document.title"
npx playwright trace snapshot <action-id> -- eval "document.querySelector('#error').textContent"
 
# Eval on a specific element ref (from the snapshot)
npx playwright trace snapshot <action-id> -- eval "el => el.getAttribute('data-testid')" e5
 
# Take a screenshot of the snapshot
npx playwright trace snapshot <action-id> -- screenshot
 
# Redirect output to a file
npx playwright trace snapshot <action-id> -- eval "document.body.outerHTML" --filename=page.html
npx playwright trace snapshot <action-id> -- screenshot --filename=screenshot.png

Only three browser commands are useful on a frozen snapshot: snapshot, eval, and screenshot.

Attachments

bash
# List all trace attachments
npx playwright trace attachments
 
# Extract an attachment by its number
npx playwright trace attachment 1
npx playwright trace attachment 1 -o out.png

Typical investigation

bash
# 1. Open the trace and see what's inside
npx playwright trace open test-results/my-test/trace.zip
 
# 2. What actions ran?
npx playwright trace actions
 
# 3. Which action failed?
npx playwright trace actions --errors-only
 
# 4. What went wrong?
npx playwright trace action 12
 
# 5. What did the page look like at that moment?
npx playwright trace snapshot 12
 
# 6. Query the DOM for more detail
npx playwright trace snapshot 12 -- eval "document.querySelector('.error-message').textContent"
 
# 7. Any relevant network failures?
npx playwright trace requests --failed
 
# 8. Any console errors?
npx playwright trace console --errors-only
All versions