MCP Playwright: un servicio MCP que proporciona operaciones de automatización del navegador

Introducción general

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

Lista de funciones

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

Utilizar la ayuda

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

Proceso de instalación

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

1. Comprobación del entorno
   • 确保电脑已安装 Node.js（建议使用最新稳定版）。
   • 需要支持 MCP 的客户端，比如 Claude Desktop Client。
   • 安装 Git，用于下载代码（可选）。
2. 下载项目（可选手动安装）
   • Abre un terminal y ejecútalo:

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

   • Vaya al catálogo de proyectos:

     cd mcp-playwright
     

3. Instalación de dependencias
   • Ejecutar en el directorio del proyecto:

     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. Configuración de Claude Desktop
   • 找到 Claude Desktop 的配置文件（通常在用户目录下的 Claude 文件夹中，文件名为 claude-desktop-config.json).
   • 添加以下内容：

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

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

Cómo utilizarlo

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

Automatización del navegador

• Abrir la página
  在 Claude Desktop 输入：

打开网页 https://example.com

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

• pulsar sobre un elemento
  Entrada:

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

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

• Rellene el formulario
  Entrada:

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

工具会自动填入内容。

• captura de pantalla (informática)
  Entrada:

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

截图会保存到当前目录。

• 运行 JavaScript
  Entrada:

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

返回网页标题。

• 获取日志
  Entrada:

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

工具会返回错误日志。

Pruebas API

• 发送 GET 请求
  Entrada:

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

返回状态码和数据。

• 发送 POST 请求
  Entrada:

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

工具会验证结果。

• 更新数据
  Entrada:

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

数据会被更新。

操作实例

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

1. Entrada:

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

2. Entrada:

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

3. Entrada:

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

4. Entrada:

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

5. Entrada:

关闭浏览器

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

测试工具

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

• Introdúcelo en el terminal:

npm test

• 带覆盖率报告：

  npm run test:coverage
  

测试报告会生成在 coverage Catálogo.

advertencia

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