Skip to main content

Tracing

Record execution traces that capture DOM snapshots, screenshots, network activity, and console logs at every step. Requires the devtools capability.

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--caps=devtools"]
    }
  }
}

browser_start_tracing​

Start trace recording with screenshots and DOM snapshots enabled. Takes no parameters. Traces are written live into traces/ inside the output directory, so the links are usable while recording.

→ browser_start_tracing

  Trace recording started
  - [Action log](traces/trace-1772620500000.trace)
  - [Network log](traces/trace-1772620500000.network)
  - [Resources](traces/resources)

browser_stop_tracing​

Stop trace recording. Takes no parameters. Fails if tracing was not started.

→ browser_stop_tracing

  Trace recording stopped.
  - [Trace](traces/trace-1772620500000.trace)
  - [Network log](traces/trace-1772620500000.network)
  - [Resources](traces/resources)

View traces in the Playwright Trace Viewer:

npx playwright show-trace traces/trace-1772620500000.trace

The trace viewer shows a timeline of every action with DOM snapshots (before and after), screenshots, network requests and responses, console messages, and timing.

Workflow: debugging a broken checkout​

You: Something fails during checkout. Record a trace.

→ browser_start_tracing
→ browser_navigate { url: "https://store.example.com/cart" }
→ browser_click { target: "e15" }
→ browser_fill_form { fields: [
    { name: "Name",    target: "e30", type: "textbox", value: "Alice Smith" },
    { name: "Address", target: "e32", type: "textbox", value: "123 Main St" },
    { name: "Zip",     target: "e34", type: "textbox", value: "94102" }
  ]}
→ browser_click { target: "e40" }

  - heading "Error" [level=1] [ref=e2]
  - text: Payment processing failed

→ browser_console_messages { level: "error" }
  [ERROR] POST /api/payment 422: {"error":"Card number required"}

→ browser_stop_tracing
  // Share the trace with the team for full timeline analysis

Automatic session recording​

Save a session log for every session automatically:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--caps=devtools", "--save-session"]
    }
  }
}