MCP Playwright：提供浏览器自动化操作的MCP服务

综合介绍

MCP-Playwright 是一个由 ExecuteAutomation 开发并托管在 GitHub 上的开源工具。它基于 Playwright 和 Model Context Protocol (MCP) 协议，目标是让用户通过自然语言指令实现浏览器自动化和 API 测试。这个工具适合开发者和测试人员，可以连接 Claude 等大型语言模型（LLM），通过简单文本控制浏览器操作，比如打开网页、点击按钮、填写表单、截图，或发送 API 请求。它不需要用户编写复杂代码，降低了使用门槛。项目目前处于开发阶段，功能逐步完善，欢迎社区贡献代码。

功能列表

• 浏览器自动化：支持导航到指定网页、点击元素、填写输入框、选择下拉选项等。
• API 测试：能发送 GET、POST、PUT、PATCH、DELETE 请求，并检查响应内容。
• 截图功能：可截取整个网页或特定区域，保存为图片。
• 执行 JavaScript：能在浏览器中运行自定义 JavaScript 代码。
• 获取控制台日志：提取浏览器中的错误、警告或调试信息。
• 自然语言控制：通过 MCP 协议与 Claude 等模型连接，用文本指令操作。

使用帮助

MCP-Playwright 需要简单的安装和配置才能使用。以下是详细步骤，帮助你快速上手。

安装流程

要运行这个工具，需要准备环境并安装相关组件。以下是具体操作：

1. 检查环境
   • 确保电脑已安装 Node.js（建议使用最新稳定版）。
   • 需要支持 MCP 的客户端，比如 Claude Desktop Client。
   • 安装 Git，用于下载代码（可选）。
2. 下载项目（可选手动安装）
   • 打开终端，运行：

     git clone https://github.com/executeautomation/mcp-playwright.git
     

   • 进入项目目录：

     cd mcp-playwright
     

3. 安装依赖
   • 在项目目录运行：

     npm install
     

   • 这会安装 Playwright 和其他必要组件。
4. 直接通过 npm 安装（推荐）
   • 如果不想手动下载，可以直接运行：

     npm install -g @executeautomation/playwright-mcp-server
     

   • 这会全局安装服务器。
5. 通过 Smithery 安装（适用于 Claude Desktop）
   • 运行以下命令自动安装并配置：

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

6. 配置 Claude Desktop
   • 找到 Claude Desktop 的配置文件（通常在用户目录下的 Claude 文件夹中，文件名为 claude-desktop-config.json）。
   • 添加以下内容：

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

   • 保存后重启 Claude Desktop，界面上会出现 “Attach from MCP” 按钮，表示配置成功。

如何使用

安装完成后，你可以用自然语言指令控制浏览器或测试 API。以下是详细操作方法。

浏览器自动化

• 打开网页
  在 Claude Desktop 输入：

打开网页 https://example.com

工具会启动浏览器并加载页面。

• 点击元素
  输入：

点击页面上的登录按钮，使用选择器 #loginBtn

它会找到 ID 为 loginBtn 的按钮并点击。

• 填写表单
  输入：

在用户名输入框填写 "admin"，使用选择器 #username
在密码输入框填写 "123456"，使用选择器 #password

工具会自动填入内容。

• 截图
  输入：

截取整个网页，保存为 "page.png"

截图会保存到当前目录。

• 运行 JavaScript
  输入：

在浏览器中执行 JavaScript 代码 "document.title"

返回网页标题。

• 获取日志
  输入：

获取浏览器控制台日志，只显示错误信息

工具会返回错误日志。

API 测试

• 发送 GET 请求
  输入：

对 https://api.example.com/data 发送 GET 请求

返回状态码和数据。

• 发送 POST 请求
  输入：

对 https://api.example.com/users 发送 POST 请求，数据为 {"name": "TestUser"}
检查响应中包含 "id"

工具会验证结果。

• 更新数据
  输入：

对 https://api.example.com/users/1 发送 PUT 请求，数据为 {"name": "NewUser"}

数据会被更新。

操作实例

假设你要测试一个登录流程：

1. 输入：

打开网页 http://eaapp.somee.com

2. 输入：

点击页面上的登录链接，使用选择器 #loginLink

3. 输入：

在用户名输入框填写 "admin"，使用选择器 #username
在密码输入框填写 "password"，使用选择器 #password
点击登录按钮，使用选择器 #loginBtn

4. 输入：

截取整个网页，保存为 "login_result.png"

5. 输入：

关闭浏览器

整个过程通过自然语言完成，简单直观。

测试工具

项目使用 Jest 进行测试。如果你想验证功能，可以运行测试：

• 在终端输入：

npm test

• 带覆盖率报告：

  npm run test:coverage
  

测试报告会生成在 coverage 目录。

注意事项

• 目前工具不支持复杂的身份验证请求（如 OAuth）。
• 如果遇到问题，可以查看官方文档：https://executeautomation.github.io/mcp-playwright/。
• 项目是开源的，你可以 fork 并提交改进建议。