微软开源浏览器自动化功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 Codecode --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'
# For VS Code Insiderscode-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）

欢迎分享

发表评论