playwright-trace

Name: playwright-trace
Author: microsoft

Other Community

Repo stars 90,202
Author updated Live
Author repo playwright

Fluxly profile Facts only: domain, agents, trust score, runtime, permissions and network

Domain: Other
Compatible agents: Claude Code
Cursor
Cline
Codex
Windsurf
Gemini CLI

+20
Trust score: 88 / 100 · community maintained
Author / version / license: @microsoft · no license declared
Token usage: Lean
Setup complexity: Plug-and-play
External API key: Not required
Operating systems: macOS · Linux · Windows
Runtime requirements: No special requirements
Permissions: Read-only
Write / modify
Network behavior: Local-only
Install commands: 26 variants

Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.

Heads up: 未限定 allowed-tools，默认拥有全部工具权限。

Output preview playwright-trace.preview

---
name: playwright-trace
description: Inspect Playwright trace files from the command line — list actions, view requests, console, err…
category: other
runtime: no special runtime
---

# playwright-trace output preview

## PART A: Task fit
- Use case: Inspect Playwright trace files from the command line — list actions, view requests, console, errors, snapshots and screenshots. Inspect .zip trace files produced by Playwright tests without opening a browser. runs entirely locally. Works with Claude Code, Cursor, Cline and 23 more..
- Inputs: target material, constraints, expected output, and acceptance criteria.
- Evidence boundary: follow “Workflow / Commands / Open a trace” and do not present inference as author intent.

## PART B: Execution result
- **01** The card summarizes the use case; runtime output centers on “Inspect Playwright trace files from the command line — list actions, view requests, console, errors, snapshots and screenshots. Inspect .zip trace files produced by Playwright tests without opening a browser. runs entirely locally. Works with Claude Code, Cursor, Cline and 23 more.”.
- **02** When the source has headings, the agent prioritizes “Workflow / Commands / Open a trace” so the result follows the author’s structure.
- **03** Typical output includes task judgment, concrete steps, required commands or file edits, validation, and follow-up options.
- **04** Risk context follows the fingerprint: read files, write/modify files; mostly runs locally; usually needs no extra API key.

## Running Rules
- read files, write/modify files; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding scope.
- Return the result, validation criteria, and next iteration options.

SKILL.md SKILL.md

---
name: playwright-trace
description: Inspect Playwright trace files from the command line — list actions, view requests, console, err…
category: other
source: microsoft/playwright
---

# playwright-trace

## When to use
- Inspect Playwright trace files from the command line — list actions, view requests, console, errors, snapshots and scr…
- Use it when the task has clear inputs, repeatable steps, and validation criteria.

## What to provide
- Target material, scope, expected result, and forbidden changes.
- Whether network, commands, file writes, or external services are allowed.

## Execution rules
- Organize steps around “Workflow / Commands / Open a trace” and keep inference separate from source facts.
- read files, write/modify files; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding the task.

## Output requirements
- Return the deliverable, key evidence, validation method, and next action.
- Mark missing information as unknown; do not invent commands, platforms, or dependencies.

Evidence boundary and execution chain

The author source anchors workflow facts; repository files anchor sources and commands; Fluxly only adds fit, limitations, and quality judgment.

skill "playwright-trace" {
  input      -> user goal + target files + boundaries + acceptance criteria
  context    -> Workflow / Commands / Open a trace
  rules      -> SKILL.md triggers / order / output contract
  runtime    -> no special runtime | read files, write/modify files | mostly runs locally
  guardrails -> usually needs no extra API key + small-sample validation + diff/log review
  output     -> copyable result + checklist + next iteration
}

Interpretation is structured for decision-making; original keeps the upstream SKILL.md unchanged.

Decide Fit First

Core job: Inspect Playwright trace files from the command line — list actions, view requests, console, errors, snapshots and screenshots.…
Best fit: Use it when the task has reusable inputs, steps, and validation criteria rather than a one-off answer.
Avoid forcing it: If the source lacks commands, platform support, or external-service evidence, keep those fields unknown instead of guessing.

Design Intent

Structure: The skill is organized around “Workflow”, “Commands”, “Open a trace”, “Close a trace”, showing how the author expects the agent to judge fit, collect context, and produce verifiable output.
Trigger evidence: Prioritize the author’s wording around when to use it, what context to collect, and what output shape to produce.
Evidence boundary: Author text states facts, repository files prove commands and paths, and Fluxly only adds fit, limits, and usage judgment.

How To Use It

Inputs: Provide target material, scope, expected result, forbidden changes, and validation method.
Invocation: Name playwright-trace directly; if the source includes slash commands, start with the command and then add task context.
Validation: Start small and check whether the result follows “Workflow / Commands / Open a trace” before expanding.

Boundaries And Review

Dependencies: It usually needs no extra API key, so start with a small validation task.
Permissions: Declared permissions include read / write; ask the agent to state file, command, and rollback boundaries before acting.
Quality bar: A useful result names the deliverable, evidence, and next action. Generic prose means the task needs tighter context.

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

Install command

One-click installPick a runner, click Copy, paste into your terminal, press enter

npx skills add microsoft/playwright/packages/playwright-core/src/tools/trace -y

Open general install guide

View skill source

Works with

Claude Code
Cursor
Cline
Codex
Windsurf
Gemini
OpenCode
Roo Code
AAide
+Augment
GitHub Copilot
OpenClaw
KKiro
Junie
WWarp
Goose
Trae
Kilo Code
OpenHands
Amp
Zencoder
CContinue
AIAider
CodeBuddy
CodeGeeX
Replit Agent

Security audit

88 / 100

Community

未声明 license/许可。
未声明 version。
未限定 allowed-tools，默认拥有全部工具权限。

Metadata

Source: github
microsoft/playwright
中文

More by @microsoft

Category & tags

Category Other