Playwright MCP Server 🎭

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

✨ Novedades en v1.0.10

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

Prueba tus aplicaciones web en perfiles reales de dispositivos 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:

• "Prueba en iPhone 13"

• "Cambia a la vista de iPad"

• "Rotar a horizontal"

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

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

Related MCP server: Cloudflare Playwright MCP

Captura de pantalla

Documentación | Referencia de la 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 mediante 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:

Alternativamente, también puedes instalarlo 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 Playwright MCP de ExecuteAutomation estará disponible para usarlo con tu agente de GitHub Copilot en VS Code.

Instalación de los navegadores

Instalación automática (recomendada)

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

1. Descargará e instalará automáticamente el navegador necesario (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. Solo empieza a usar el servidor y él se encarga de instalar el navegador por ti.

Instalación manual (opcional)

Si prefieres instalar los navegadores manualmente o tienes 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 de los navegadores

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 el 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 ejecutas navegadores con interfaz gráfica en sistemas sin pantalla o desde procesos de trabajo de los IDE, puedes ejecutar el servidor MCP como un servidor HTTP independiente:

Nota para usuarios de Claude Desktop: Claude Desktop actualmente requiere el modo stdio (la configuración de command/args). 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 OBLIGATORIO 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 (consulta el Modo estándar más arriba).

Casos de uso del modo HTTP

• Ejecutar navegadores con interfaz gráfica en sistemas sin pantalla (p. ej., servidores remotos)

• Integrar con VS Code GitHub Copilot

• Ejecutar el servidor como servicio en segundo plano

• Acceder al servidor desde varios clientes

• Depurar con el endpoint /health

• Integraciones con clientes MCP personalizados

Supervisión: El servidor incluye un sistema de supervisión que se inicia en un puerto de asignación dinámica (evitando conflictos). Revisa la salida de la consola para ver el puerto real.

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

Solución de problemas

Error «No transport found for sessionId»

Síntoma: error 400 con el mensaje «Bad Request: No transport found for sessionId».

Solución:

1. Comprueba que la configuración incluye "type": "http"

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

2. Verifica que los registros del servidor muestran 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: comprueba si el puerto 8931 está disponible

• El acceso externo está bloqueado: es una medida de seguridad (por diseño). El servidor solo se enlaza a localhost

• Para el acceso remoto: usa un túnel SSH:

  ssh -L 8931:localhost:8931 user@remote-server

Pruebas

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

Ejecutar las pruebas

Puedes ejecutar las pruebas con 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 las pruebas se generará en el directorio coverage.

Ejecutar evals

El paquete de evals 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 prefijándolas al comando de npx. Puedes consultar la documentación completa aquí.

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

Cómo contribuir

Al añadir herramientas nuevas, presta atención a la longitud del nombre de la herramienta. Algunos clientes, como Cursor, tienen un límite de 60 caracteres para el nombre combinado de servidor y herramienta (server_name:tool_name).

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

Historial de estrellas