Playwright trace CLI commands overview
The Playwright trace CLI allows inspection of .zip trace files from the command line without opening a browser. The workflow is: (1) trace open <trace.zip> to extract and see metadata, (2) trace actions to list all actions with IDs, (3) trace action <action-id> to drill into a specific action, (4) trace requests, trace console, or trace errors for cross-cutting views, (5) trace snapshot <action-id> to get DOM snapshot, (6) trace close to remove extracted trace data. All commands after open operate on the currently opened trace. Opening a new trace replaces the previous one.
trace open command
npx playwright trace open <trace.zip> extracts a trace file and displays metadata including browser, viewport, duration, and action/error counts.
trace close command
npx playwright trace close removes extracted trace data when done inspecting.
trace actions command options
npx playwright trace actions lists all actions as a tree with action IDs and timing. Options include: --grep <regex> to filter by action title (case-insensitive), and --errors-only to show only failed actions.
trace action command
npx playwright trace action <action-id> shows full details for one action including parameters, result, logs, source location, and available snapshots. The command displays available snapshot phases (before, input, after) and the exact command to extract them.
trace requests command options
npx playwright trace requests displays all network requests with start time, method, status, URL, duration, and size. Options include: --grep <pattern> to filter by URL pattern, --method <METHOD> to filter by HTTP method, and --failed to show only requests with status >= 400.
trace request command
npx playwright trace request <request-id> shows full details for one request including headers, body, and security information.
trace console command options
npx playwright trace console displays all console messages and stdout/stderr. Options include: --errors-only to show only errors, --browser to show only browser console (no stdout/stderr), --stdio to show only stdout/stderr (no browser console), and --grep <pattern> to filter by message text pattern.
trace errors command
npx playwright trace errors displays all errors with stack traces and associated actions.
trace snapshot command
npx playwright trace snapshot <action-id> 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. Useful browser commands are: eval to query the DOM, screenshot to take a screenshot, and snapshot. Options include: --name <phase> to use a specific phase (before, input, after), --filename to redirect output to a file.
trace snapshot examples
Examples: npx playwright trace snapshot <action-id> gets the accessibility snapshot (default); npx playwright trace snapshot <action-id> --name before uses the before phase; npx playwright trace snapshot <action-id> -- eval "document.title" runs eval to query the DOM; npx playwright trace snapshot <action-id> -- eval "el => el.getAttribute('data-testid')" e5 runs eval on a specific element ref; npx playwright trace snapshot <action-id> -- screenshot takes a screenshot; npx playwright trace snapshot <action-id> -- eval "document.body.outerHTML" --filename=page.html redirects output to a file.
trace attachments command
npx playwright trace attachments lists all trace attachments. npx playwright trace attachment <number> extracts an attachment by its number. Use -o <filename> to specify output filename.
Typical trace investigation workflow
A typical investigation follows these steps: (1) npx playwright trace open test-results/my-test/trace.zip to open the trace, (2) npx playwright trace actions to see what actions ran, (3) npx playwright trace actions --errors-only to find which action failed, (4) npx playwright trace action 12 to see what went wrong in that action, (5) npx playwright trace snapshot 12 to see what the page looked like, (6) npx playwright trace snapshot 12 -- eval to query the DOM for more detail, (7) npx playwright trace requests --failed to check for network failures, (8) npx playwright trace console --errors-only to check for console errors.