what-iff: Skill for Claude Code

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