
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- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads playwright-trace automatically when relevant.
- 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
- Start with
trace open <trace.zip>to extract the trace and see its metadata. - Use
trace actionsto 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, ortrace errorsfor cross-cutting views. - Use
trace snapshot <action-id>to get the DOM snapshot, or run a browser command against it. - Use
trace closeto 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
playwright-dev
microsoft/playwright
Explains how to develop Playwright - add APIs, MCP tools, CLI commands, and vendor dependencies.
playwright-devops
microsoft/playwright
DevOps workflows for Playwright - CI failure analysis, workflow debugging, and release operations.
playwright-cli
microsoft/playwright
Automate browser interactions, test web pages and work with Playwright tests.
playwright-triage
microsoft/playwright
Open the skill to read its SKILL.md instructions.
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.
playwright-mcp-dev
microsoft/playwright
Explains how to add and debug playwright MCP tools and CLI commands.
Popular testing & qa skills
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.
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.
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.
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.
test-driven-development
obra/superpowers
Use when implementing any feature or bugfix, before writing implementation code
finishing-a-development-branch
obra/superpowers
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work