Playwright MCP Server

Un servidor MCP que utiliza Playwright para la automatización del navegador y el web scraping.

GitHub
5.7k
Prueba este MCPPatrocinado

Documentación

MseeP.ai Security Assessment Badge
MseeP.ai Security Assessment

Playwright MCP Server 🎭

Trust Score smithery badge

Un servidor de Model Context Protocol que proporciona capacidades de automatización de navegador utilizando Playwright. Este servidor permite a los LLMs interactuar con páginas web, tomar capturas de pantalla, generar código de prueba, hacer scraping de la página y ejecutar JavaScript en un entorno de navegador real.

mcp-playwright MCP server

✨ Novedades en v1.0.10

🎯 Emulación de dispositivos con 143 perfiles de dispositivos reales!

Prueba tus aplicaciones web en perfiles de dispositivos reales con un simple comando:

// Test on iPhone 13 with automatic user-agent, touch support, and device pixel ratio
await playwright_resize({ device: "iPhone 13" });

// Switch to iPad with landscape orientation
await playwright_resize({ device: "iPad Pro 11", orientation: "landscape" });

// Test desktop view
await playwright_resize({ device: "Desktop Chrome" });

Soporte de lenguaje natural para asistentes de IA:

  • "Probar en iPhone 13"
  • "Cambiar a vista iPad"
  • "Rotar a horizontal"

Soporta 143 dispositivos: iPhone, iPad, Pixel, Galaxy y navegadores de escritorio con emulación adecuada de viewport, user-agent, eventos táctiles y ratios de píxeles del dispositivo.

📚 Ver referencia rápida de dispositivos | Guía de prompts

Captura de pantalla

Playwright + Claude

Documentación | Referencia de API

Instalación

Puedes instalar el paquete usando npm, mcp-get o Smithery:

Usando npm:

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

Usando mcp-get:

npx @michaellatman/mcp-get@latest install @executeautomation/playwright-mcp-server

Usando Smithery

Para instalar Playwright MCP para Claude Desktop automáticamente a través de Smithery:

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

Usando Claude Code:

claude mcp add --transport stdio playwright npx @executeautomation/playwright-mcp-server

Instalación en VS Code

Instala el servidor Playwright MCP en VS Code usando uno de estos botones:

Install in VS Code Install in VS Code Insiders

Alternativamente, puedes instalar el servidor Playwright MCP usando la CLI de VS Code:

# For VS Code
code --add-mcp '{"name":"playwright","command":"npx","args":["@executeautomation/playwright-mcp-server"]}'

# For VS Code Insiders
code-insiders --add-mcp '{"name":"playwright","command":"npx","args":["@executeautomation/playwright-mcp-server"]}'

Después de la instalación, el servidor ExecuteAutomation Playwright MCP estará disponible para usarse con tu agente GitHub Copilot en VS Code.

Instalación del navegador

Instalación automática (recomendada)

El servidor Playwright MCP instala automáticamente los binarios del navegador cuando lo usas por primera vez. Cuando el servidor detecta que falta un navegador, hará lo siguiente:

  1. Descargar e instalar automáticamente el navegador requerido (Chromium, Firefox o WebKit)
  2. Mostrar el progreso de la instalación en la consola
  3. Reintentar tu solicitud una vez que se complete la instalación

¡No se requiere configuración manual! Simplemente comienza a usar el servidor, y él se encarga de la instalación del navegador por ti.

Instalación manual (opcional)

Si prefieres instalar los navegadores manualmente o encuentras algún problema con la instalación automática:

# Install all browsers
npx playwright install

# Or install specific browsers
npx playwright install chromium
npx playwright install firefox
npx playwright install webkit

Ubicación de almacenamiento del navegador

Los navegadores se instalan en:

  • Windows: %USERPROFILE%\AppData\Local\ms-playwright
  • macOS: ~/Library/Caches/ms-playwright
  • Linux: ~/.cache/ms-playwright

Configuración para usar el servidor Playwright

Modo estándar (stdio)

Este es el modo recomendado para Claude Desktop.

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

Nota: En modo stdio, el registro se dirige automáticamente solo a archivos (no a la consola) para mantener una comunicación JSON-RPC limpia. Los registros se escriben en ~/playwright-mcp-server.log.

Modo HTTP (servidor independiente)

Cuando se ejecuta un navegador con interfaz gráfica en sistemas sin pantalla o desde procesos de trabajo de IDEs, puedes ejecutar el servidor MCP como un servidor HTTP independiente:

Nota para usuarios de Claude Desktop: Claude Desktop actualmente requiere el modo stdio (configuración de comando/argumentos). El modo HTTP se recomienda para VS Code, clientes personalizados y despliegues remotos. Consulta CLAUDE_DESKTOP_CONFIG.md para más detalles.

Iniciar el servidor HTTP

# Using npx
npx @executeautomation/playwright-mcp-server --port 8931

# Or after global installation
playwright-mcp-server --port 8931

El servidor se iniciará y mostrará los endpoints disponibles:

==============================================
Playwright MCP Server (HTTP Mode)
==============================================
Port: 8931

ENDPOINTS:
- SSE Stream:     GET  http://localhost:8931/sse
- Messages:       POST http://localhost:8931/messages?sessionId=<id>
- MCP (unified):  GET  http://localhost:8931/mcp
- MCP (unified):  POST http://localhost:8931/mcp?sessionId=<id>
- Health Check:   GET  http://localhost:8931/health
==============================================

Configuración del cliente para el modo HTTP

⚠️ CRÍTICO: El campo "type": "http" es REQUERIDO para el transporte HTTP/SSE.

Para VS Code GitHub Copilot:

{
  "github.copilot.chat.mcp.servers": {
    "playwright": {
      "url": "http://localhost:8931/mcp",
      "type": "http"
    }
  }
}

Para clientes MCP personalizados:

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/mcp",
      "type": "http"
    }
  }
}

Importante: Sin "type": "http", la conexión fallará.

Para Claude Desktop: Usa el modo stdio en su lugar (ver Modo estándar arriba)

Casos de uso para el modo HTTP

  • Ejecutar navegadores con interfaz gráfica en sistemas sin pantalla (por ejemplo, servidores remotos)
  • Integrar con VS Code GitHub Copilot
  • Ejecutar el servidor como un servicio en segundo plano
  • Acceder al servidor desde múltiples clientes
  • Depurar con el endpoint /health
  • Integraciones de clientes MCP personalizados

Monitoreo: El servidor incluye un sistema de monitoreo que se inicia en un puerto asignado dinámicamente (evitando conflictos). Revisa la salida de la consola para conocer el puerto real.

Nota: Para Claude Desktop, continúa usando el modo stdio (Modo estándar arriba) por ahora.

Solución de problemas

Error "No transport found for sessionId"

Síntoma: Error 400 con mensaje "Bad Request: No transport found for sessionId"

Solución:

  1. Verifica que la configuración incluya "type": "http"

    {
  "url": "http://localhost:8931/mcp",
  "type": "http"  // ← This is REQUIRED!
}

  2. Verifica que los registros del servidor muestren la conexión:

    # Should see these in order:
# 1. "Incoming request" - GET /mcp
# 2. "Transport registered" - with sessionId
# 3. "POST message received" - with same sessionId

  3. Reinicia tanto el servidor como el cliente

Problemas de conexión

  • El servidor no se inicia: Verifica si el puerto 8931 está disponible
  • Acceso externo bloqueado: Esto es por diseño (seguridad). El servidor se vincula solo a localhost
  • Para acceso remoto: Usa túnel SSH: 
    ssh -L 8931:localhost:8931 user@remote-server

Pruebas

Este proyecto usa Jest para las pruebas. Las pruebas se encuentran en el directorio src/__tests__.

Ejecutar pruebas

Puedes ejecutar las pruebas usando uno de los siguientes comandos:

# Run tests using the custom script (with coverage)
node run-tests.cjs

# Run tests using npm scripts
npm test           # Run tests without coverage
npm run test:coverage  # Run tests with coverage
npm run test:custom    # Run tests with custom script (same as node run-tests.cjs)

El informe de cobertura de pruebas se generará en el directorio coverage.

Ejecutar evaluaciones

El paquete de evaluaciones carga un cliente mcp que luego ejecuta el archivo index.ts, por lo que no es necesario reconstruir entre pruebas. Puedes cargar variables de entorno prefijando el comando npx. La documentación completa se puede encontrar aquí.

OPENAI_API_KEY=your-key  npx mcp-eval src/evals/evals.ts src/tools/codegen/index.ts

Contribuciones

Al agregar nuevas herramientas, ten en cuenta la longitud del nombre de la herramienta. Algunos clientes, como Cursor, tienen un límite de 60 caracteres para el nombre combinado del servidor y la herramienta (server_name:tool_name).

Nuestro nombre de servidor es playwright-mcp. Asegúrate de que los nombres de tus herramientas sean lo suficientemente cortos para no exceder este límite.

Historial de estrellas

Star History Chart