Playwright MCP

MCP Server Playwright

A Model Context Protocol server that provides browser automation capabilities using Playwright

Enable LLMs to interact with web pages, take screenshots, and execute JavaScript in a real browser environment

目录

• 特性
• 安装
• 配置
• 组件

- 工具 - 资源

• 许可证

特性

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

安装

通过Smithery安装

通过以下方式自动安装MCP Server Playwright for Claude Desktop 铁匠铺:

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

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

使用npx：

npx @automatalabs/mcp-server-playwright install

此命令将：

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

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

• 窗户： %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"]
    }
  }
}

与光标一起使用

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

1. 安装 Playwright 浏览器 （如果还没有）：

   npx playwright install

1. 为Cursor安装MCP服务器Playwright 使用Smithery：

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

1. 配置文件设置:\

如果不使用Claude，配置文件(claude_desktop_config.json)可能不会自动创建。

- 在Windows上，创建一个名为的文件夹 Claude 在 %APPDATA% （通常 C:\Users\\AppData\Roaming\Claude). - 在该文件夹中，创建一个名为 claude_desktop_config.json 内容如下：

   {
     "serverPort": 3456
   }

1. 按照中的其余步骤进行操作 安装 以上章节 以完成设置。

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

注： 确保你已经安装了Node.js npx 在您的系统PATH中可用。

组件

工具

browser_navigate

导航到浏览器中的任何URL

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

browser_screenshot

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

{
  "name": "screenshot-name",     // required
  "selector": "#element-id",     // optional
  "fullPage": true              // optional, default: 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"
}

资源

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

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

1. 截图 (screenshot://)

- 访问捕获的屏幕截图的PNG图像 - 由捕获过程中指定的名称引用

许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。