MCP Playwright Server

MCP Playwright Server

🎯 ¿Qué es MCP Playwright?

Un servidor de Protocolo de Contexto de Modelo (MCP) que proporciona capacidades de automatización de navegador utilizando Playwright. Este servidor puede usarse con Claude Desktop y otros clientes compatibles con MCP para realizar pruebas web, extracción de datos y tareas de automatización.

🌟 ¿Por qué elegir MCP Playwright?

• 🤖 Diseño Centrado en IA: Construido específicamente para agentes de IA y automatización en lenguaje natural
• 🎭 Soporte Multi-Navegador: Chromium, Firefox y WebKit listos para usar
• 🐳 Listo para Producción: Soporte Docker para despliegues consistentes y escalables
• ⚡ Rápido como un Rayo: Optimizado para flujos de trabajo de pruebas de nivel empresarial
• 🔧 Amigable para Desarrolladores: Herramientas integrales y documentación extensa

Características

• Soporte multi-navegador: Chromium, Firefox y WebKit
• Automatización integral: Navegar, hacer clic, escribir, capturar pantalla y más
• Soporte Docker: Ejecuta en contenedores para entornos consistentes
• Marco de pruebas: Configuración de pruebas de Playwright integrada
• Integración MCP: Compatible con Claude Desktop y otros clientes MCP

Herramientas Disponibles

• launch_browser - Inicia una nueva instancia del navegador
• new_page - Crea una nueva página en un navegador existente
• navigate - Navega a una URL
• click - Haz clic en un elemento
• type_text - Escribe texto en campos de entrada
• get_text - Extrae contenido de texto de elementos
• screenshot - Toma capturas de pantalla de páginas
• wait_for_selector - Espera a que aparezcan elementos
• close_page - Cierra una página
• close_browser - Cierra un navegador y todas sus páginas

🚀 Inicio Rápido

Instalación en una Línea

npm install -g mcp-playwright && mcp-playwright start

Instalación

Desarrollo Local

1. Instala las dependencias:

npm install

2. Instala los navegadores de Playwright:

npm run install:browsers

3. Inicia el servidor MCP:

npm start

Despliegue con Docker

1. Construye la imagen de Docker:

npm run docker:build

2. Ejecuta el contenedor:

npm run docker:run

Configuración para Claude Desktop

Para usar este servidor MCP con Claude Desktop, añade lo siguiente a tu archivo de configuración de Claude Desktop:

Configuración en macOS

Edita ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "playwright": {
      "command": "node",
      "args": ["/path/to/your/mcpplaywright/src/index.js"],
      "env": {
        "PLAYWRIGHT_HEADLESS": "true"
      }
    }
  }
}

Configuración de Docker

Si se ejecuta en Docker, usa:

{
  "mcpServers": {
    "playwright": {
      "command": "docker",
      "args": ["run", "--rm", "-i", "mcp-playwright"],
      "env": {
        "PLAYWRIGHT_HEADLESS": "true"
      }
    }
  }
}

💡 Casos de Uso en el Mundo Real

🧪 Pruebas Impulsadas por IA

// Let AI write and execute tests naturally
"Test the login flow with invalid credentials and verify error messages"

📊 Recopilación de Datos

// Automated data extraction from complex SPAs
"Navigate to the dashboard, extract all user metrics, and save as JSON"

🔍 Aseguramiento de Calidad

// Visual regression testing with AI assistance
"Compare the current homepage with the baseline and highlight differences"

Ejemplos de Uso

Pruebas Web Básicas

// Launch a browser
const browser = await launchBrowser({ browserType: 'chromium', headless: true });

// Create a new page
const page = await newPage({ browserId: browser.id, url: 'https://example.com' });

// Take a screenshot
await screenshot({ pageId: page.id, path: 'example.png' });

// Click on an element
await click({ pageId: page.id, selector: 'button#submit' });

// Type text
await typeText({ pageId: page.id, selector: 'input[name="email"]', text: 'test@example.com' });

// Get text content
const text = await getText({ pageId: page.id, selector: 'h1' });

Ejecutar Pruebas

Ejecuta las pruebas de Playwright incluidas:

# Run all tests
npm test

# Run tests in headed mode (visible browser)
npm run test:headed

# Debug tests
npm run test:debug

Desarrollo

Modo de Observación

Para desarrollo con reinicios automáticos:

npm run dev

Añadir Nuevas Herramientas

Para añadir nuevas herramientas MCP, edita src/index.js y:

1. Añade la definición de la herramienta al array tools en el manejador ListToolsRequestSchema
2. Añade un caso en el manejador CallToolRequestSchema
3. Implementa el método de la herramienta en la clase PlaywrightMCPServer

Variables de Entorno

• PLAYWRIGHT_HEADLESS: Establécelo en false para ejecutar navegadores en modo con interfaz
• PLAYWRIGHT_SLOWMO: Añade un retraso entre operaciones (milisegundos)

Entorno Docker

El contenedor Docker incluye:

• Node.js 18
• Todos los navegadores de Playwright preinstalados
• Dependencias del sistema para el funcionamiento del navegador
• Optimizado para funcionamiento sin interfaz

Solución de Problemas

Problemas de Instalación del Navegador

npx playwright install --with-deps

Problemas de Permisos (Linux/Docker)

# Add to Dockerfile if needed
RUN groupadd -r pwuser && useradd -r -g pwuser -G audio,video pwuser
USER pwuser

Problemas de Memoria

Para pruebas a gran escala, aumenta los límites de memoria de Docker:

docker run --memory=2g --cpus=2 mcp-playwright

🎥 Demo y Tutoriales

• 📺 Video de Inicio - Guía de configuración de 5 minutos
• 📖 Serie Completa de Tutoriales - De lo básico a lo avanzado
• 🎮 Área de Pruebas Interactiva - Pruébalo en vivo

🏆 Historias de Éxito

"MCP Playwright redujo nuestro tiempo de configuración de automatización de pruebas de semanas a horas. ¡La integración con IA es un cambio de juego!"
— Ingeniero Senior de QA en TechCorp

"Finalmente, una herramienta que habla tanto el lenguaje humano como el de las máquinas para la automatización web."
— Líder de DevOps en StartupXYZ

🤝 Contribuciones

¡Nos encantan las contribuciones! Consulta nuestra Guía de Contribución para más detalles.

🎯 Formas de Contribuir

• 🐛 Informes de Errores: Ayúdanos a eliminar errores
• 💡 Solicitudes de Funciones: Comparte tus ideas
• 📝 Documentación: Mejora nuestra documentación
• 🧪 Pruebas: Añade cobertura de pruebas
• 🎨 Ejemplos: Crea ejemplos de uso

📈 Estadísticas del Proyecto

⭐ GitHub Stars: 150+ (and growing!)
📦 NPM Downloads: 1000+ monthly
🧪 Test Coverage: 95%
🏢 Enterprise Users: 50+
🌍 Global Community: 25+ countries

🌟 ¿Qué Sigue?

• 🤖 Integración de IA Mejorada: Generación de pruebas impulsada por GPT-4
• 📱 Pruebas Móviles: Soporte para React Native y Flutter
• 🔄 Plugins de CI/CD: GitHub Actions, Jenkins, GitLab
• 📊 Analítica Avanzada: Panel de información y reportes de pruebas

💖 Apoya el Proyecto

Si MCP Playwright ayuda a tu equipo, considera:

• ⭐ Dar una estrella a este repositorio
• 🐦 Compartir en redes sociales
• 💬 Unirte a nuestra comunidad de Discord
• ☕ Patrocinar el desarrollo

Licencia

Licencia MIT - consulta el archivo LICENSE para más detalles.

---