Skip to main content

Tracing

记录执行跟踪，捕获每个步骤的 DOM 快照、屏幕截图、网络活动和控制台日志。需要 devtools 功能。

🌐 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​

→ browser_start_tracing
  Tracing started

browser_stop_tracing​

→ browser_stop_tracing
  Trace saved to: /output/trace-2024-03-15.zip
  Network log: /output/trace-2024-03-15.network

在 Playwright Trace Viewer 中查看跟踪：

🌐 View traces in the Playwright Trace Viewer:

npx playwright show-trace /output/trace-2024-03-15.zip

追踪查看器显示每个操作的时间轴，包括 DOM 快照（前后）、截图、网络请求和响应、控制台消息以及时间信息。

🌐 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 { ref: "e15" }    // "Proceed to checkout"
→ browser_fill_form { fields: [
    { ref: "e30", value: "Alice Smith" },
    { ref: "e32", value: "123 Main St" },
    { ref: "e34", value: "94102" }
  ]}
→ browser_click { ref: "e40" }    // "Place order"
→ browser_snapshot
  - heading "Error" [level=1]
  - text: "Payment processing failed"

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

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

自动会话录制​

🌐 Automatic session recording

自动保存每个会话的痕迹：

🌐 Save traces for every session automatically:

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