MCP Playwright : un service MCP qui fournit des opérations d'automatisation du navigateur.

Introduction générale

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

Liste des fonctions

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

Utiliser l'aide

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

Processus d'installation

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

1. Vérification de l'environnement
   • 确保电脑已安装 Node.js（建议使用最新稳定版）。
   • 需要支持 MCP 的客户端，比如 Claude Desktop Client。
   • 安装 Git，用于下载代码（可选）。
2. 下载项目（可选手动安装）
   • Ouvrez un terminal et exécutez le programme :

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

   • Accédez au catalogue de projets :

     cd mcp-playwright
     

3. Installation des dépendances
   • Exécuter dans le répertoire du projet :

     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. Configuration de Claude Desktop
   • 找到 Claude Desktop 的配置文件（通常在用户目录下的 Claude 文件夹中，文件名为 claude-desktop-config.json).
   • Ajouter ce qui suit :

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

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

Comment l'utiliser

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

Automatisation du navigateur

• 打开网页
  在 Claude Desktop 输入：

打开网页 https://example.com

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

• 点击元素
  Entrée :

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

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

• Remplir le formulaire
  Entrée :

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

工具会自动填入内容。

• capture d'écran (informatique)
  Entrée :

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

截图会保存到当前目录。

• 运行 JavaScript
  Entrée :

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

返回网页标题。

• 获取日志
  Entrée :

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

工具会返回错误日志。

Test de l'API

• 发送 GET 请求
  Entrée :

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

返回状态码和数据。

• 发送 POST 请求
  Entrée :

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

工具会验证结果。

• 更新数据
  Entrée :

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

数据会被更新。

操作实例

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

1. Entrée :

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

2. Entrée :

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

3. Entrée :

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

4. Entrée :

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

5. Entrée :

关闭浏览器

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

测试工具

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

• Saisissez-le dans le terminal :

npm test

• 带覆盖率报告：

  npm run test:coverage
  

测试报告会生成在 coverage Catalogue.

mise en garde

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