Skip to main content

视频录制

🌐 Video Recording

将浏览器会话记录为带有章节卡片和操作提示的 WebM 视频。需要 devtools 功能。

🌐 Record browser sessions as WebM videos with chapter cards and action callouts. Requires the devtools capability.

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

browser_start_video​

参数类型必填描述
filename字符串否保存视频的文件。相对名称会相对于工作区根目录解析。默认保存到输出目录下的 video-{timestamp}.webm
size对象否视频大小，格式为 { width, height }
→ browser_start_video { filename: "cart-bug-repro.webm" }
  Video recording started.

→ browser_start_video { size: { width: 800, height: 600 } }

browser_stop_video​

停止录音并返回已录制的文件。不需要任何参数。

🌐 Stop recording and return the recorded files. Takes no parameters.

→ browser_stop_video
  - [Video](cart-bug-repro.webm)

browser_video_chapter​

在录音中添加章节标记。显示带有模糊背景的全屏章节卡片。

🌐 Add a chapter marker to the recording. Shows a full-screen chapter card with a blurred backdrop.

参数类型必填描述
title字符串是章节标题
description字符串否章节描述
duration数字否显示章节卡片的持续时间（毫秒）

显示浏览器视频操作 / 隐藏浏览器视频操作​

🌐 browser_video_show_actions / browser_video_hide_actions

用页面上的标注说明后续操作，标出操作名称并高亮目标元素。在录制视频或屏幕录制时很有用。

🌐 Annotate subsequent actions with an on-page callout that names the action and highlights the target element. Useful while recording video or screencasting.

参数类型是否必填描述
duration数字否每个注释在屏幕上停留的时间，单位毫秒。默认值为 500
position字符串否操作标题的位置：top-left、top、top-right（默认）、bottom-left、bottom、bottom-right
cursor字符串否pointer（默认）在操作点之间动画显示鼠标指针；none 禁用光标装饰

browser_video_hide_actions 不需要参数，并且会停止注释。

→ browser_video_show_actions { position: "bottom", duration: 800 }
→ browser_click { target: "e8" }
→ browser_video_hide_actions

工作流程：记录错误重现​

🌐 Workflow: recording a bug reproduction

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

→ browser_video_chapter { title: "Setup: add items to cart" }
→ browser_navigate { url: "https://store.example.com" }
→ browser_click { target: "e8" }
→ browser_click { target: "e12" }
→ browser_click { target: "e20" }

→ browser_video_chapter {
    title: "Verify items in cart",
    description: "Both items should be visible"
  }
→ browser_snapshot
  - list "Cart items" [ref=e30]:
    - listitem [ref=e31]: Headphones - $49.99
    - listitem [ref=e32]: Cable - $9.99

→ browser_video_chapter {
    title: "Bug: refresh clears cart",
    description: "Cart should persist but items disappear"
  }
→ browser_navigate { url: "https://store.example.com/cart" }

  - heading "Your cart is empty" [level=1] [ref=e2]

→ browser_take_screenshot
→ browser_stop_video
  - [Video](cart-bug-repro.webm)

使用案例​

🌐 Use cases

场景方法
Bug 重现记录步骤，并附加到问题中
测试文档用章节卡记录
代理监控记录代理会话以供查看
演示创建开启操作提示进行录制