mcpbeat

Playwright Trace

microsoft/playwright-trace

Inspect Playwright trace files from the command line — list actions, view requests, console, errors, snapshots and screenshots.

1k tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
93957
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/microsoft/playwright --skill playwright-trace

What it tells the agent to use

found in the instruction text
Bash runs shell commands — read the instruction before connecting

The instruction itself

14 sections, as written by the author

Playwright Trace CLI

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

Workflow

  • Start with trace open <trace.zip> to extract the trace and see its metadata.
  • Use trace actions to see all actions with their action IDs.
  • Use trace action <action-id> to drill into a specific action — see parameters, logs, source location, and available snapshots.
  • Use trace requests, trace console, or trace errors for cross-cutting views.
  • Use trace snapshot <action-id> to get the DOM snapshot, or run a browser command against it.
  • 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

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

Close a trace

# Remove extracted trace data
npx playwright trace close

Actions

# 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

# 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, input, after) and the exact command to extract them.

Requests

# All network requests: 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

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

Console

# 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

Errors

# 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.

# Get the accessibility snapshot (default)
npx playwright trace snapshot <action-id>

# Use a specific phase
npx playwright trace snapshot <action-id> --name 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

# 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

# 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

How to use it

Copy the folder

Take microsoft/playwright-trace from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.

Install what it needs

The instructions reference npx. Without those the skill loads but fails at the first command.