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

Introducción general

MCP-Playwright es una herramienta de código abierto desarrollada por ExecuteAutomation y alojada en GitHub. Se basa en Playwright y Modelo de Protocolo de Contexto (MCP), con el objetivo de permitir a los usuarios implementar la automatización del navegador y las pruebas de API mediante comandos de lenguaje natural. Esta herramienta es adecuada tanto para desarrolladores como para probadores y puede conectar Claude y otros grandes modelos lingüísticos (LLM) para controlar acciones del navegador como abrir una página web, hacer clic en un botón, rellenar un formulario, hacer una captura de pantalla o enviar una solicitud de API mediante texto simple. No requiere que los usuarios escriban código complejo, lo que reduce el umbral de uso. El proyecto se encuentra actualmente en fase de desarrollo, la función se mejora gradualmente, la bienvenida a la comunidad para contribuir código.

Lista de funciones

• Automatización del navegador: Soporte para navegar a una página web específica, hacer clic en un elemento, rellenar un cuadro de entrada, seleccionar una opción desplegable, etc.
• Pruebas APIPuede enviar peticiones GET, POST, PUT, PATCH, DELETE e inspeccionar la respuesta.
• función de captura de pantalla: Se puede interceptar toda la página web o un área específica y guardarla como imagen.
• Ejecutar JavaScriptLa capacidad de ejecutar código JavaScript personalizado en el navegador.
• Obtener el registro de la consola: Extrae información de error, advertencia o depuración del navegador.
• control del lenguaje natural: Se conecta a modelos como Claude mediante el protocolo MCP y funciona con comandos de texto.

Utilizar la ayuda

MCP-Playwright requiere una instalación y configuración sencillas para funcionar. A continuación se detallan los pasos para ayudarle a empezar rápidamente.

Proceso de instalación

Para ejecutar esta herramienta, es necesario preparar el entorno e instalar los componentes pertinentes. A continuación se detalla cómo hacerlo:

1. Comprobación del entorno
   • Asegúrate de que tu ordenador tiene instalado Node.js (se recomienda la última versión estable).
   • Se necesita un cliente compatible con MCP, como Claude Desktop Client.
   • Instale Git para descargar el código (opcional).
2. Descargar proyecto (instalación manual opcional)
   • 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
     

   • Esto instalará Playwright y otros componentes necesarios.
4. Instalar directamente a través de npm (recomendado)
   • Si no quieres descargarlo manualmente, puedes simplemente ejecutarlo:

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

   • Esto instalará globalmente el servidor.
5. Instalación mediante Smithery (para Claude Desktop)
   • Ejecute el siguiente comando para instalarlo y configurarlo automáticamente:

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

6. Configuración de Claude Desktop
   • Localice el archivo de configuración de Claude Desktop (normalmente en la carpeta Claude del directorio de usuario bajo el nombre de archivo claude-desktop-config.json).
   • Añade lo siguiente:

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

   • Después de guardar y reiniciar Claude Desktop, el botón "Attach from MCP" aparecerá en la interfaz, indicando que la configuración se ha realizado correctamente.

Cómo utilizarlo

Una vez instalado, puedes utilizar comandos de lenguaje natural para controlar el navegador o probar la API. a continuación te explicamos cómo hacerlo.

Automatización del navegador

• Abrir la página
  Entra en Claude Desktop:

打开网页 https://example.com

La herramienta inicia el navegador y carga la página.

• pulsar sobre un elemento
  Entrada:

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

Encontrará el ID loginBtn y haga clic en él.

• Rellene el formulario
  Entrada:

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

La herramienta rellena el contenido automáticamente.

• captura de pantalla (informática)
  Entrada:

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

La captura de pantalla se guarda en el directorio actual.

• Ejecución de JavaScript
  Entrada:

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

Devuelve el título de la página.

• Obtención de registros
  Entrada:

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

La herramienta devuelve un registro de errores.

Pruebas API

• Enviar solicitud GET
  Entrada:

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

Devuelve el código de estado y los datos.

• Enviar solicitud POST
  Entrada:

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

La herramienta validará los resultados.

• Datos actualizados
  Entrada:

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

Los datos se actualizarán.

ejemplo de funcionamiento

Supongamos que desea probar un proceso de inicio de sesión:

1. Entrada:

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

2. Entrada:

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

3. Entrada:

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

4. Entrada:

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

5. Entrada:

关闭浏览器

Todo el proceso se realiza a través del lenguaje natural y es sencillo e intuitivo.

Herramientas de prueba

El proyecto utiliza Jest para las pruebas. Si desea verificar la funcionalidad, puede ejecutar pruebas:

• Introdúcelo en el terminal:

npm test

• Informe de cobertura de banda:

  npm run test:coverage
  

El informe de la prueba se genera en el coverage Catálogo.

advertencia

• Actualmente, la herramienta no admite solicitudes de autenticación complejas (como OAuth).
• Si tiene problemas, consulte la documentación oficial en https://executeautomation.github.io/mcp-playwright/.
• El proyecto es de código abierto, puedes hacer un fork y enviar sugerencias para mejorarlo.