视频录制

🌐 Video Recording

将浏览器会话记录为带有章节标记的 WebM 视频。需要 devtools 功能。

🌐 Record browser sessions as WebM videos with chapter markers. Requires the devtools capability.

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

browser_start_video

参数	类型	必需	描述
filename	字符串	否	自定义文件名
width	数字	否	视频宽度（像素）
height	数字	否	视频高度（像素）

browser_stop_video

→ browser_stop_video
  Video saved to: /output/login-flow.webm

browser_video_chapter

为结构化录音添加章节标记。

🌐 Add chapter markers for structured recordings.

参数	类型	是否必填	描述
title	字符串	是	章节标题
description	字符串	否	章节描述
duration	数字	否	显示时长（毫秒）

工作流程：记录错误重现

🌐 Workflow: recording a bug reproduction

→ browser_start_video { filename: "cart-bug-repro.webm" }

→ browser_video_chapter { title: "Setup: add items to cart" }
→ browser_navigate { url: "https://store.example.com" }
→ browser_click { ref: "e8" }     // Add item 1
→ browser_click { ref: "e12" }    // Add item 2
→ browser_click { ref: "e20" }    // Go to cart

→ browser_video_chapter {
    title: "Verify items in cart",
    description: "Both items should be visible"
  }
→ browser_snapshot
  - list "Cart items":
    - listitem: "Headphones - $49.99"
    - listitem: "Cable - $9.99"

→ browser_video_chapter {
    title: "Bug: refresh clears cart",
    description: "Cart should persist but items disappear"
  }
→ browser_reload
→ browser_snapshot
  - heading "Your cart is empty" [level=1]
→ browser_take_screenshot

→ browser_stop_video
  // Attach cart-bug-repro.webm to the bug report

自动录制

🌐 Automatic recording

使用环境变量自动记录所有会话：

🌐 Record all sessions automatically using the environment variable:

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

或者通过配置文件：

🌐 Or via the config file:

{
  "saveVideo": { "width": 800, "height": 600 }
}

使用案例

🌐 Use cases

场景	方法
Bug重现	记录步骤，附加到问题
测试文档	使用章节标记记录
代理监控	记录代理会话以供审查
演示创建	记录精美的演练