Menu
Inspect Playwright trace files from the command line — list actions, view requests, console, errors, snapshots and screenshots.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
This skill should be used when the user asks to "debug", "diagnose", "check health", "run doctor", or says "app not working", "server down", "login broken", "blank page", "white screen", "500 error", "CORS error", "auth issue", "can't connect", "database error", "migration failed", "services not running", "certificate error", or asks to check if the Batuda server or web app is healthy locally.
This skill should be used when working with git worktrees for parallel Claude/dev sessions on Batuda — creating, provisioning, running, listing/diagnosing, or tearing down a worktree's dev stack, or cleaning up orphaned data. Covers the shared-services model (one Docker stack; each worktree gets its own Postgres database + MinIO bucket), the `pnpm cli worktree` commands, lifecycle hooks, and per-worktree CORS/portless.
Run the research quality eval (packages/research golden set) against the live pipeline and read the numbers. Use when asked to "run the eval", benchmark research grounding/recall, or take a before/after on a research change. Encodes the routing, cost, and safety guardrails so a run is not misconfigured.
Generates consistent git commit messages following project conventions. Use when committing changes, creating PRs, or when asked to write commit messages. Also validates if proposed messages follow project format.
This skill should be used when the user asks to "release", "deploy", "ship", "create a new version", "release server", "release internal", "release ui", "release mail-worker", "release all", or mentions CalVer versioning. Handles interactive release workflow for Batuda targets (server, internal, ui, mail-worker, or all) with independent CalVer versioning, GitHub tag-based deploys/publishes, and post-release verification.
Review the current diff for regressions, correctness bugs, tests, simplifications, and docs issues, scaling depth to a low/medium/high/xhigh/max effort level. Use when the user asks to review changes, review a diff/branch/PR, or runs /base-ui-review. Pass --comment to post a top-level PR comment, --comment inline for inline PR comments, or --fix to apply findings.
| name | playwright-trace |
| description | Inspect Playwright trace files from the command line — list actions, view requests, console, errors, snapshots and screenshots. |
| allowed-tools | Bash(npx:*) |
Inspect .zip trace files produced by Playwright tests without opening a browser.
trace open <trace.zip> to extract the trace and see its metadata.trace actions to see all actions with their action IDs.trace action <action-id> to drill into a specific action — see parameters, logs, source location, and available snapshots.trace requests, trace console, or trace errors for cross-cutting views.trace snapshot <action-id> to get the DOM snapshot, or run a browser command against it.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.
# Extract trace and show metadata: browser, viewport, duration, action/error counts
npx playwright trace open <trace.zip>
# Remove extracted trace data
npx playwright trace close
# 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
# 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.
# 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
# Show full details for one request: headers, body, security
npx playwright trace request <request-id>
# 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
# All errors with stack traces and associated actions
npx playwright trace errors
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.
# 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
# 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