MCPInstall

playwright-trace

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

Installs
46
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/microsoft/playwright --skill playwright-trace
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads playwright-trace automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

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

Requests

# 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

# 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

# Filter by message text pattern
npx playwright trace console --grep "failed to fetch"

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

# 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

FAQ

What does the playwright-trace skill do?

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

How do I install playwright-trace?

Run npx skills add https://github.com/microsoft/playwright --skill playwright-trace in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/playwright-trace/ (personal) or .claude/skills/playwright-trace/ (project).

Which AI agents can use playwright-trace?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is playwright-trace safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains playwright-trace?

It is published by microsoft in microsoft/playwright, and it is an official skill from the maker of the technology it covers. It has 46 recorded installs.

More from microsoft/playwright

View all →

playwright-dev

microsoft/playwright

Explains how to develop Playwright - add APIs, MCP tools, CLI commands, and vendor dependencies.

OfficialTesting & QA3.7K installs

playwright-devops

microsoft/playwright

DevOps workflows for Playwright - CI failure analysis, workflow debugging, and release operations.

OfficialDevOps & Cloud1K installs

playwright-cli

microsoft/playwright

Automate browser interactions, test web pages and work with Playwright tests.

OfficialTesting & QA528 installs

playwright-triage

microsoft/playwright

Open the skill to read its SKILL.md instructions.

Testing & QA425 installs

playwright-test-results

microsoft/playwright

Query Playwright CI test results from the aggregated DuckDB database. Answers questions about flaky tests, failure rates, slow tests, and per-run/SHA/PR results without hunting through GitHub artifacts.

Testing & QA408 installs

playwright-mcp-dev

microsoft/playwright

Explains how to add and debug playwright MCP tools and CLI commands.

OfficialTesting & QA313 installs

Popular testing & qa skills

View category →

tdd

mattpocock/skills

Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.

Testing & QA1.2M installs

grilling

mattpocock/skills

Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.

Testing & QA996.2K installs

migrate-to-shoehorn

mattpocock/skills

Migrate test files from as type assertions to @total-typescript/shoehorn. Use when user mentions shoehorn, wants to replace as in tests, or needs partial test data.

Testing & QA484.1K installs

run-train

lllllllama/rigorpilot-skills

Rigor Train skill for deep learning research repositories. Use when a documented or selected training command should be run conservatively for startup verification, short-run verification, full kickoff, or resume, with command, config, seed, log, checkpoint, status, and metric evidence written to standardized trainoutputs/. Do not use for environment setup, exploratory sweeps, speculative idea implementation, or end-to-end orchestration.

Testing & QA337.8K installs

test-driven-development

obra/superpowers

Use when implementing any feature or bugfix, before writing implementation code

Testing & QA261.8K installs

Use when implementation is complete, all tests pass, and you need to decide how to integrate the work

Testing & QA216.8K installs