MCP Server Playwright

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

功能

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

安装

通过Smithery安装

要自动为Claude Desktop安装MCP Server Playwright，请通过Smithery执行以下命令：

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一起使用

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

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

为Cursor安装MCP Server Playwright，使用Smithery：

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 Server Playwright提供的所有浏览器自动化工具，例如网页导航、截图捕获和JavaScript执行。

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

组件

工具

`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文件。