微软开源浏览器自动化功MCP服务playwright-mcp

项目简介

使用 Playwright 提供浏览器自动化能力的模型上下文协议 (MCP) 服务器。该服务器允许 LLMs 通过结构化可访问性快照与网页交互，无需截图或视觉调整模型。

关键特性

• 快速轻量：使用 Playwright 的无障碍树，而非基于像素的输入。
• LLM-友好：无需视觉模型，纯基于结构化数据运行。
• 确定性工具应用：避免截图方法常见的歧义。

用例

网页导航和表单填写

• 结构化内容的数据提取
• 由LLMs驱动的自动化测试
• 通用浏览器交互代理

示例配置

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

VS Code 中的安装

您可以使用以下按钮之一在 VS Code 中安装 Playwright MCP 服务器：
或者，您可以使用 VS Code CLI 安装 Playwright MCP 服务器：

# For VS Code code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

# For VS Code Insiders code-insiders --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

安装后，Playwright MCP 服务器将可用于与您的 GitHub Copilot 代理在 VS Code 中使用。

User data directory 用户数据目录

Playwright MCP 将使用新配置文件启动 Chrome 浏览器，配置文件位于

- `%USERPROFILE%\AppData\Local\ms-playwright\mcp-chrome-profile` on Windows - `~/Library/Caches/ms-playwright/mcp-chrome-profile` on macOS - `~/.cache/ms-playwright/mcp-chrome-profile` on Linux

所有登录信息都将存储在该配置文件中，您可以在会话之间删除它以清除离线状态。

运行无 GUI 的浏览器（无头浏览器）

此模式适用于后台或批量操作。

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

在 Linux 上运行无 DISPLAY 的浏览器

当在无显示器的系统上或在 IDE 的工作进程上运行带头的浏览器时，从具有 DISPLAY 的环境运行 MCP 服务器，并通过传递 --port 标志来启用 SSE 传输。

npx @playwright/mcp@latest --port 8931

然后在 MCP 客户端配置中，将 url 设置为 SSE 端点：

{   "mcpServers": {     "playwright": {       "url": "http://localhost:8931/sse"     }   } }

工具模式

工具提供两种模式：

1. Snapshot Mode (default): 使用无障碍快照以获得更好的性能和可靠性
2. Vision Mode: 使用截图进行基于视觉的交互

要使用视觉模式，在启动服务器时添加 --vision 标志：

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

视觉模式最适合与能够使用 X Y 坐标空间与元素交互的计算机使用模型配合使用，基于提供的截图。

使用自定义传输的编程使用

import { createServer } from '@playwright/mcp'; // ... const server = createServer({   launchOptions: { headless: true } }); transport = new SSEServerTransport("/messages", res); server.connect(transport);

快照模式

Playwright MCP 提供了一套用于浏览器自动化的工具。以下是所有可用的工具：

• browser_navigate
  • url (string): 要导航到的 URL
  • Description: Navigate to a URL
    描述：导航到 URL
  • 参数：
• browser_go_back
  • 描述：返回上一页
  • 参数：无
• browser_go_forward
  • 描述：前进到下一页
  • 参数：无
• browser_click
  • element (string): 用于获取与元素交互权限的易读元素描述
  • ref (string): 来自页面快照的精确目标元素引用
  • 描述：在网页上执行点击操作
  • 参数：
• browser_hover
  • element (string): 用于获取与元素交互权限的元素可读描述
  • ref (string): 来自页面快照的精确目标元素引用
  • 描述：在页面元素上悬停
  • 参数：
• browser_drag
  • startElement (string): 用于获取与元素交互权限的、可读的源元素描述
  • startRef (string): 页面快照中精确的源元素引用
  • endElement (string): 用于获取与元素交互权限的易读目标元素描述
  • endRef (string): 从页面快照中获取的精确目标元素引用
  • 描述：在两个元素之间执行拖放操作
  • 参数：
• browser_type
  • element (string): 用于获取与元素交互权限的易读元素描述
  • ref (string): 从页面快照中获取的精确目标元素引用
  • text (string):
  • submit (boolean): 提交输入文本（按下 Enter 键后）
  • 描述：在可编辑元素中输入文本
  • 参数：
• browser_select_option
  • element (string): 用于获取与元素交互权限的易读元素描述
  • ref (string): 从页面快照中获取的精确目标元素引用
  • values (array): 选中下拉列表中的值数组。
  • 描述：在下拉列表中选择选项
  • 参数：
• browser_choose_file
  • paths (array): 要上传的文件的绝对路径。可以是单个文件或多个文件。
  • 描述：选择一个或多个文件进行上传
  • 参数：
• browser_press_key
  • key (string):要按下的键的名称或要生成的字符，例如 `ArrowLeft` 或 `a`
  • 描述：按键盘上的键
  • 参数：
• browser_snapshot
  • 描述：捕获当前页面的无障碍快照（比截图更好）
  • Parameters: None 参数：无
• browser_save_as_pdf
  • 描述：保存页面为 PDF
  • 参数：无
• browser_take_screenshot
  • raw (字符串): 可选返回无损 PNG 屏幕截图。默认为 JPEG。
  • 描述：捕获页面截图
  • 参数：
• browser_wait
  • time (number): 等待时间（秒，上限为 10 秒）
  • 描述：等待指定时间（秒）
  • 参数：
• browser_close 浏览器关闭
  • 描述：关闭页面
  • 参数：无

视觉模式

视觉模式提供使用截图进行视觉交互的工具。以下是所有可用工具：

• browser_navigate
  • url (string): 要导航到的 URL
  • 描述：导航到 URL
  • 参数：
• browser_go_back
  • 描述：返回上一页
  • 参数：无
• browser_go_forward
  • 描述：前进到下一页
  • 参数：无
• browser_screenshot
  • 描述：捕获当前页面的截图
  • 参数：无
• browser_move_mouse
  • X 坐标
  • Y 坐标
  • 描述：将鼠标移动到指定坐标
  • 参数：
• browser_click
  • x （数字）：点击的 X 坐标
  • y （数字）：点击的 Y 坐标
  • 描述：在指定坐标处点击
  • 参数：
• browser_drag
  • startX （数字）：起始 X 坐标
  • startY （数字）：起始 Y 坐标
  • endX （数字）：结束 X 坐标
  • endY （数字）：结束 Y 坐标
  • 描述：执行拖放操作
  • 参数：
• browser_type 浏览器类型
  • 输入文本（字符串）
  • 提交输入文本（按下 Enter 键后）
  • 描述：在指定坐标处输入文本
  • 参数：
• browser_press_key
  • 按键名称或生成字符（字符串），例如 `ArrowLeft` 或 `a`
  • 描述：按键盘上的键
  • 参数：
• browser_choose_file
  • 输入文本（数组）：上传文件的绝对路径。可以是单个文件或多个文件。
  • 描述：选择一个或多个文件上传
  • 参数：
• browser_save_as_pdf
  • 描述：保存页面为 PDF
  • 参数：无
• browser_wait
  • time （数字）：等待时间（秒，上限为 10 秒）
  • 描述：等待指定时间（秒）
  • 参数：
• browser_close
  • 描述：关闭页面
  • 参数：无

项目链接

https://github.com/microsoft/playwright-mcp

扫码加入技术交流群，备注「开发语言-城市-昵称」

（文：GitHubStore）

微软开源浏览器自动化功MCP服务playwright-mcp最先出现在每时AI。