MCP 服务器 Playwright

一个使用 Playwright 提供浏览器自动化功能的模型上下文协议服务器
_{使 LLM 能够与网页交互、截取屏幕截图并在真实浏览器环境中执行 JavaScript}

功能

🌐 全面的浏览器自动化功能
📸 截取整个页面或特定元素的屏幕截图
🖱️ 全面的网页交互（导航、点击、表单填写）
📊 控制台日志监控
🔧 在浏览器上下文中执行 JavaScript

安装

通过 Smithery 安装

要自动通过 Smithery 安装 MCP 服务器 Playwright 用于 Claude Desktop：

npx -y @smithery/cli install @automatalabs/mcp-server-playwright --client claude

您可以使用 npx 或 mcp-get 安装此包：

使用 npx：

npx @automatalabs/mcp-server-playwright install

此命令将：

检查您的操作系统兼容性（Windows/macOS）
创建或更新 Claude 配置文件
配置 Playwright 服务器集成

配置文件将自动创建/更新在：

Windows: %APPDATA%\Claude\claude_desktop_config.json
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

使用 mcp-get：

npx @michaellatman/mcp-get@latest install @automatalabs/mcp-server-playwright

配置

安装过程将自动将以下配置添加到您的 Claude 配置文件中：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@automatalabs/mcp-server-playwright"]
    }
  }
}

与 Cursor 一起使用

您也可以使用 Cursor（一个 AI 驱动的代码编辑器）与 MCP 服务器 Playwright 一起使用。要通过 MCP 在 Cursor 中启用浏览器自动化：

安装 Playwright 浏览器（如果尚未安装）：
```
npx playwright install
```

使用 Smithery 安装 MCP 服务器 Playwright 用于 Cursor：

npx -y @smithery/cli install @automatalabs/mcp-server-playwright --client cursor

配置文件设置：
如果您不使用 Claude，配置文件（claude_desktop_config.json）可能不会自动创建。
- 在 Windows 上，在 %APPDATA 中创建一个名为 Claude 的文件夹（通常为 C:\Users\<YourName>\AppData\Roaming\Claude）。
- 在该文件夹内，创建一个名为 claude_desktop_config.json 的文件，并包含以下内容：
```
{
  "serverPort": 3456
}
```
按照上方安装部分的剩余步骤完成设置。

现在，您可以直接从 Cursor 的 AI 功能中使用 MCP 服务器 Playwright 提供的所有浏览器自动化工具，例如网页导航、屏幕截图和 JavaScript 执行。

注意：确保您已安装 Node.js 并在系统 PATH 中可用 npx。

组件

工具

`browser_navigate`

在浏览器中导航到任何 URL

{
  "url": "https://stealthbrowser.cloud"
}

`browser_screenshot`

截取整个页面或特定元素的屏幕截图

{
  "name": "screenshot-name",     // 必填
  "selector": "#element-id",     // 可选
  "fullPage": true              // 可选，默认：false
}

`browser_click`

使用 CSS 选择器点击页面上的元素

{
  "selector": "#button-id"
}

`browser_click_text`

通过文本内容点击页面上的元素

{
  "text": "Click me"
}

`browser_hover`

使用 CSS 选择器在页面上的元素上悬停

{
  "selector": "#menu-item"
}

`browser_hover_text`

通过文本内容在页面上的元素上悬停

{
  "text": "Hover me"
}

`browser_fill`

填写输入字段

{
  "selector": "#input-field",
  "value": "Hello World"
}

`browser_select`

使用 CSS 选择器在 SELECT 元素中选择选项

{
  "selector": "#dropdown",
  "value": "option-value"
}

`browser_select_text`

通过文本内容在 SELECT 元素中选择选项

{
  "text": "Choose me",
  "value": "option-value"
}

`browser_evaluate`

在浏览器控制台中执行 JavaScript

{
  "script": "document.title"
}

资源

控制台日志 (console://logs)
- 以文本格式访问浏览器控制台输出
- 包含来自浏览器的所有控制台消息
屏幕截图 (screenshot://<n>)
- 访问捕获的屏幕截图的 PNG 图像
- 通过捕获时指定的名称引用

许可证

本项目根据 MIT 许可证授权 - 详细内容请参阅 LICENSE 文件。

VikashLoomba/MCP-Server-Playwright

星标增长

证据时间轴