Servidor MCP de Playwright | Awesome MCP Servers

Configuración de Playwright MCP

Este repositorio contiene todo lo necesario para lanzar y conectarse a un servidor Playwright MCP (Model Context Protocol) en funcionamiento.

✅ Resumen

Esta configuración te permite automatizar e inspeccionar páginas web usando datos estructurados en lugar de capturas de pantalla — ideal para herramientas impulsadas por LLM como Claude, Cursor y agentes de IA de VS Code.

🛠️ Requisitos previos

Node.js v18 o más reciente
Uno de los siguientes clientes compatibles con MCP:
- VS Code o VS Code Insiders
- Cursor
- Claude Desktop

📁 Contenido del repositorio

.vscode/settings.json — Configuración de VS Code para lanzar Playwright MCP
package.json — Incluye las dependencias MCP requeridas
README.md — Este archivo
.gitignore — Reglas básicas de ignorado para proyectos Node

🚀 Cómo empezar

1. Clonar el repositorio

git clone https://github.com/faruklmu17/playwright_mcp.git 
cd playwright-mcp-config

2. Instalar dependencias

npm install

Esto instala todos los paquetes requeridos, incluyendo @playwright/mcp.

3. Iniciar el servidor MCP

npx playwright-mcp --port 3550

Deberías ver una salida como:

MCP Server started
Web server started

Puedes cambiar el puerto si es necesario, p. ej. --port=4000

4. Configuración del cliente MCP de VS Code

Añade esto a tu .vscode/settings.json:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--port=3550"
      ]
    }
  }
}

Esto le indica a VS Code (o Cursor) cómo lanzar y conectarse al servidor MCP.

5. Opcional: Usar sesiones persistentes o aisladas

Persistente (por defecto)

El estado del navegador se conserva entre sesiones.

Ejemplo aislado

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--isolated",
        "--storage-state=storage/state.json"
      ]
    }
  }
}

6. Banderas adicionales

Puedes mejorar tu servidor MCP usando banderas opcionales:

Bandera	Descripción
`--port <port>`	Puerto personalizado (por defecto es aleatorio/asignado por el SO)
`--headless`	Ejecutar sin interfaz de navegador
`--device`	Emular un dispositivo (p. ej., "iPhone 15")
`--vision`	Habilitar visión basada en capturas de pantalla (si es compatible)

Consulta las banderas disponibles con:

npx playwright-mcp --help

📅 Nota sobre los navegadores

No necesitas instalar playwright ni ejecutar npx playwright install por separado. El paquete MCP maneja todo lo necesario para la automatización del navegador.

📄 .gitignore

node_modules/
.DS_Store

🤝 Contribuciones

¡Las solicitudes de extracción y las sugerencias son bienvenidas!

📄 Licencia

MIT

Playwright MCP

Documentación