调试工具

🌐 Debugging Tools

高亮显示、操作记录、用户注释和调试器控制。所有这些都需要 devtools 功能。

🌐 Highlighting, action recording, user annotations, and debugger control. All of these require the devtools capability.

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

跟踪和视频录制也是这一功能的一部分——见 跟踪 和 视频录制。

🌐 Tracing and video recording are also part of this capability — see Tracing and Video Recording.

突出元素

🌐 Highlighting elements

browser_highlight

在页面上的某个元素周围显示一个持续的高亮覆盖。当你希望观看有界面浏览器的人看到代理正在谈论哪个元素时，这很有用。

🌐 Show a persistent highlight overlay around an element on the page. Useful when you want a human watching the headed browser to see which element the agent is talking about.

参数	类型	是否必填	描述
target	字符串	是	元素引用或选择器
style	字符串	否	叠加层额外的内联 CSS，例如 outline: 2px dashed red

→ browser_highlight { target: "e12", style: "outline: 2px dashed red" }

browser_hide_highlight

移除高亮覆盖。传入添加时使用的相同 target，或者省略 target 来清除页面的高亮。

🌐 Remove a highlight overlay. Pass the same target used to add it, or omit target to clear the page's highlights.

参数	类型	必填	描述
target	字符串	否	元素引用或选择器。不填则清除页面上所有高亮

→ browser_hide_highlight { target: "e12" }
→ browser_hide_highlight     // clear everything

记录用户操作

🌐 Recording user actions

让用户在浏览器中演示一个操作流程，然后把他们做的事情转成 Playwright 代码。

🌐 Ask the user to demonstrate a flow in the browser, then turn what they did into Playwright code.

browser_start_recording

开始记录用户在浏览器中执行的操作。不需要任何参数。页面会被置于前端，方便用户进行操作。

🌐 Start recording actions the user performs in the browser. Takes no parameters. The page is brought to the front so the user can interact with it.

browser_stop_recording

停止录制并将录制的操作以 Playwright 代码返回，代码语言由 --codegen 设置。不接受任何参数。

🌐 Stop the recording and return the recorded actions as Playwright code, in the language set by --codegen. Takes no parameters.

You: Let me show you how the discount code is applied.

→ browser_start_recording
  Recording started. Call browser_stop_recording to retrieve the recorded actions.

  // ... the user clicks through the flow in the browser ...

You: Done.

→ browser_stop_recording

  Recording stopped. Recorded actions:

  await page.getByRole('textbox', { name: 'Discount code' }).fill('SAVE20');
  await page.getByRole('button', { name: 'Apply' }).click();

收集用户注释

🌐 Collecting user annotations

browser_annotate

在当前页面以标注模式打开 Playwright 仪表板，并等待用户在其上进行标注。返回标注后的截图、ARIA 快照以及带有文本的标注矩形列表。不需要任何参数。

🌐 Open the Playwright Dashboard in annotation mode for the current page and wait for the user to draw annotations on it. Returns the annotated screenshot, the ARIA snapshot, and the list of annotation rectangles with their text. Takes no parameters.

You: Circle the parts of this page that look wrong.

→ browser_annotate

  The header overlaps the nav on narrow screens.
  session / Dashboard @ https://app.example.com (1280x720)
    { x: 24, y: 12, width: 320, height: 48 }: this should not overlap
  - [Annotation image](annotations-2026-09-04T10-15-00-000Z.png)
  - [Annotation snapshot](annotations-2026-09-04T10-15-00-000Z.yaml)

如果用户关闭仪表板而没有提交，工具会返回 No annotations were submitted.

🌐 If the user closes the dashboard without submitting, the tool returns No annotations were submitted.

调试器控制

🌐 Debugger control

browser_resume

在脚本暂停后恢复执行——例如在调试测试时遇到 page.pause()。

🌐 Resume script execution after it was paused — for example by a page.pause() in a test being debugged.

参数	类型	必填	描述
step	布尔值	否	为 true 时，执行将在下一步动作前再次暂停，方便逐步调试
location	字符串	否	运行到指定的 <file>:<line>，例如 example.spec.ts:42

→ browser_resume                                     // run to completion
→ browser_resume { step: true }                      // step one action
→ browser_resume { location: "checkout.spec.ts:42" } // run to a line