Playwright MCP

Genera pruebas de Playwright con asistentes de IA proporcionando acceso en tiempo real al DOM del navegador, interacciones y capturas de pantalla.

GitHub

Prueba este MCPPatrocinado

Documentación

¿Cómo usar playwright-mcp?

Introducción

¿Alguna vez has intentado usar Cursor o Claude para escribir pruebas de Playwright? Sí, es un desastre.

¿Por qué? Porque tu asistente de IA no tiene ni idea de lo que hay en tu página web. Es como intentar describir un cuadro a alguien que tiene los ojos vendados. ¿El resultado?

Pruebas inestables → La IA está adivinando selectores y los falla.
Scripts rotos → Pasas más tiempo arreglando pruebas que escribiéndolas.
Pesadillas de depuración → La IA no puede "ver" lo que está pasando, así que terminas haciendo todo el trabajo pesado.

¿No sería genial que tu IA pudiera entender realmente tu página web en lugar de solo hacer conjeturas fundamentadas?

¡Presentamos playwright-mcp!

playwright-mcp le da a tu asistente de IA superpoderes al hacer que el navegador sea completamente visible para él. En lugar de trabajar a ciegas, tu asistente de IA ahora tiene acceso en tiempo real al DOM de la página, los elementos y las interacciones.

Cómo funciona playwright-mcp (también conocido como Cómo Arreglamos Este Lío)

Una vez instalado, playwright-mcp inicia un navegador controlado por Playwright y le da a tu asistente de IA acceso completo al mismo. Esto desbloquea:

Grabación de interacciones → Haz clic, escribe, desplázate: deja que playwright-mcp convierta tus acciones en casos de prueba de Playwright totalmente funcionales.
Captura de pantallas → Captura elementos o páginas completas para que tu IA obtenga contexto visual real (se acabaron las conjeturas).
Extracción del DOM → Obtén toda la estructura HTML para que la IA pueda generar selectores sólidos como una roca.
Ejecución de JavaScript → Ejecuta JS personalizado dentro del navegador para depurar, automatizar o simplemente por diversión.

Por qué te encantará playwright-mcp

🚀 Pruebas generadas por IA que realmente funcionan → Se acabaron los selectores inestables, las pruebas rotas o las conjeturas.

⏳ Ahorro masivo de tiempo → Escribe y depura pruebas de Playwright 5 veces más rápido.

🛠️ Menos dolores de cabeza → Tu asistente de IA obtiene contexto de página en vivo, así que puede generar casos de prueba reales.

🔌 Funciona de inmediato → Conéctalo a Cursor, Claude, WindSurf o lo que uses: simplemente funciona.

Dale a tu IA el Contexto que se Merece

¿Cansado de arreglar pruebas generadas por IA? Deja de depurar las malas conjeturas de la IA: empieza a escribir pruebas de Playwright impecables. Usa la guía a continuación para instalar playwright-mcp y deja que tu asistente de IA realmente te ayude por una vez.

Instalación: Ponte en Marcha en un Abrir y Cerrar de Ojos

Requisitos previos (también conocidos como Lo Que Necesitas Antes de Empezar)

Antes de instalar playwright-mcp, asegúrate de tener:

✅ Node.js instalado en tu sistema (porque, bueno… es un paquete npm)

✅ Playwright y su navegador Chromium instalados

✅ Un IDE que soporte MCP, como Cursor

✅ Un cerebro listo para automatizar pruebas de Playwright como un profesional

Configurando playwright-mcp (Es Fácil, te lo Prometo)

Conéctalo a tu IDE (Configuración de Cursor)

Si usas Cursor, sigue estos pasos para conectar playwright-mcp como un jefe:

Abre el IDE de Cursor
Navega a Configuración (⚙️)
Selecciona Configuración de Cursor → Ve a la pestaña MCP
Haz clic en "Añadir nuevo servidor MCP"
Completa los siguientes detalles:
- Nombre → playwright-mcp
- Comando → npx -y playwright-mcp
Haz clic en "Añadir", y ¡listo, estás conectado! 🚀

Nota: Si al hacer clic en "Añadir nuevo servidor MCP" se abre un archivo (.cursor/mcp.json), pega el siguiente código y guarda:

{
  "mcpServers": {
    "playwright-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "playwright-mcp"
      ]
    }
  }
}

Ahora Cursor realmente entiende tus páginas web. ¡Se acabaron las sugerencias de pruebas aleatorias basadas en cero contexto! Dirígete al tutorial de Claude o al tutorial de Cursor para entenderlo en detalle.

Conéctalo a Claude desktop

Espera… ¿Funciona con otros asistentes de IA? ¡Sí! Aunque playwright-mcp es una combinación perfecta para IDEs, también puedes usarlo con Claude desktop para escribir pruebas.

Instala playwright-mcp (La Parte Fácil)
1. Primero lo primero, abre tu terminal y ejecuta:
2. npm install -g playwright-mcp
Conéctalo a Claude Desktop
1. Encuentra el Archivo de Configuración
2. En Windows
  1. %APPDATA%\Claude\claude_desktop_config.json
3. En macOS:
  1. ~/Library/Application Support/Claude/claude_desktop_config.json
4. Actualiza el archivo de configuración
```
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "playwright-mcp"]
    }
  }
}
```
Reinicia Claude Desktop (Porque Es un Nuevo Día)
1. Cierra y vuelve a abrir Claude Desktop para aplicar los cambios.
Verifica que Funciona
1. Una vez que todo esté configurado, probemos si Claude puede hablar realmente con Playwright ahora.
2. Abre Claude y pregunta: "Lista todas las herramientas MCP disponibles."
3. Si playwright-mcp está instalado correctamente, debería listar herramientas como:
  1. get-context
  2. get-full-dom
  3. get-screenshot
  4. execute-code
  5. init-browser
  6. validate-selectors
4. Pídele a Claude que inicie el navegador y ¡un navegador debería abrirse después de tu aprobación!

Ahora que Claude tiene acceso a las páginas web, puedes pedirle que escriba pruebas altamente contextuales. Dirígete al tutorial de Claude o al tutorial de Cursor para entenderlo en detalle.

📖 Ver Documentación