MCP-Server-Playwright

目录

• 特性
• 安装
• 配置
• 组件
  • 工具
  • 资源
• 许可证

特性

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

安装

通过Smithery安装

要通过Smithery自动为Claude Desktop安装MCP Server Playwright：

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

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

使用npx：
bash
npx @automatalabs/mcp-server-playwright install

此命令将：

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

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

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

使用mcp-get：
bash
npx @michaellatman/mcp-get@latest install @automatalabs/mcp-server-playwright

配置

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

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

与Cursor一起使用

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

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

2. 使用Smithery为Cursor安装MCP Server Playwright：
   bash
   npx -y @smithery/cli install @automatalabs/mcp-server-playwright --client cursor

3. 配置文件设置：
   如果您不使用Claude，则配置文件（claude_desktop_config.json）可能不会自动创建。

   • 在Windows上，在%APPDATA%（通常是C:\Users\<YourName>\AppData\Roaming\Claude）中创建一个名为Claude的文件夹。
   • 在该文件夹内，创建一个名为claude_desktop_config.json的文件，并包含以下内容：

   json
   {
   "serverPort": 3456
   }4. 按照上面安装部分的其余步骤完成设置。

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

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

组件

工具

browser_navigate

在浏览器中导航到任何URL
javascript
{
"url": "https://stealthbrowser.cloud"
}

browser_screenshot

捕获整个页面或特定元素的截图
javascript
{
"name": "screenshot-name", // 必填
"selector": "#element-id", // 可选
"fullPage": true // 可选，默认: false
}

browser_click

使用CSS选择器点击页面上的元素
javascript
{
"selector": "#button-id"
}

browser_click_text

通过文本内容点击页面上的元素
javascript
{
"text": "Click me"
}

browser_hover

使用CSS选择器悬停在页面上的元素上
javascript
{
"selector": "#menu-item"
}

browser_hover_text

通过文本内容悬停在页面上的元素上
javascript
{
"text": "Hover me"
}

browser_fill

填写输入字段
javascript
{
"selector": "#input-field",
"value": "Hello World"
}

browser_select

使用CSS选择器在SELECT元素中选择一个选项
javascript
{
"selector": "#dropdown",
"value": "option-value"
}

browser_select_text

通过文本内容在SELECT元素中选择一个选项
javascript
{
"text": "Choose me",
"value": "option-value"
}

browser_evaluate

在浏览器控制台中执行JavaScript
javascript
{
"script": "document.title"
}

资源

1. 控制台日志 (console://logs)

   • 以文本格式访问浏览器控制台输出
   • 包括来自浏览器的所有控制台消息

2. 截图 (screenshot://<n>)

   • 访问捕获的PNG格式截图
   • 通过捕获时指定的名称引用

许可证

此项目根据MIT许可证发布 - 详情请参阅LICENSE文件。