Playwright

MCP Server Playwright

Un servidor de Model Context Protocol que proporciona capacidades de automatización de navegador usando Playwright
_{Permite a los LLM interactuar con páginas web, tomar capturas de pantalla y ejecutar JavaScript en un entorno de navegador real}

Tabla de contenido

• Características
• Instalación
• Configuración
• Componentes
  • Herramientas
  • Recursos
• Licencia

Características

• 🌐 Capacidades completas de automatización de navegador
• 📸 Captura de pantallas de páginas completas o elementos específicos
• 🖱️ Interacción web integral (navegación, clics, relleno de formularios)
• 📊 Monitoreo de registros de consola
• 🔧 Ejecución de JavaScript en el contexto del navegador

Instalación

Instalación mediante Smithery

Para instalar MCP Server Playwright para Claude Desktop automáticamente mediante Smithery:

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

Puedes instalar el paquete usando npx o mcp-get:

Usando npx:

npx @automatalabs/mcp-server-playwright install

Este comando:

1. Comprueba la compatibilidad de tu sistema operativo (Windows/macOS)
2. Crea o actualiza el archivo de configuración de Claude
3. Configura la integración del servidor de Playwright

El archivo de configuración se creará/actualizará automáticamente en:

• Windows: %APPDATA%\Claude\claude_desktop_config.json
• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Usando mcp-get:

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

Configuración

El proceso de instalación añadirá automáticamente la siguiente configuración a tu archivo de configuración de Claude:

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

Uso con Cursor

También puedes usar MCP Server Playwright con Cursor, un editor de código impulsado por IA. Para habilitar la automatización del navegador en Cursor mediante MCP:

1. Instala los navegadores de Playwright (si aún no lo has hecho):

   npx playwright install
   

2. Instala MCP Server Playwright para Cursor usando Smithery:

   npx -y @smithery/cli install @automatalabs/mcp-server-playwright --client cursor
   

3. Configuración del archivo de configuración:
   Si no usas Claude, el archivo de configuración (claude_desktop_config.json) puede no crearse automáticamente.

   • En Windows, crea una carpeta llamada Claude en %APPDATA% (normalmente C:\Users\<YourName>\AppData\Roaming\Claude).
   • Dentro de esa carpeta, crea un archivo llamado claude_desktop_config.json con el siguiente contenido:

   {
     "serverPort": 3456
   }
   

4. Sigue los pasos restantes de la sección Instalación anterior para completar la configuración.

Ahora puedes usar todas las herramientas de automatización del navegador proporcionadas por MCP Server Playwright directamente desde las funciones de IA de Cursor, como navegación web, captura de pantallas y ejecución de JavaScript.

Nota: Asegúrate de tener Node.js instalado y npx disponible en el PATH de tu sistema.

Componentes

Herramientas

browser_navigate

Navega a cualquier URL en el navegador

{
  "url": "https://stealthbrowser.cloud"
}

browser_screenshot

Captura pantallas de la página completa o de elementos específicos

{
  "name": "screenshot-name",     // required
  "selector": "#element-id",     // optional
  "fullPage": true              // optional, default: false
}

browser_click

Haz clic en elementos de la página usando un selector CSS

{
  "selector": "#button-id"
}

browser_click_text

Haz clic en elementos de la página por su contenido de texto

{
  "text": "Click me"
}

browser_hover

Pasa el cursor sobre elementos de la página usando un selector CSS

{
  "selector": "#menu-item"
}

browser_hover_text

Pasa el cursor sobre elementos de la página por su contenido de texto

{
  "text": "Hover me"
}

browser_fill

Rellena campos de entrada

{
  "selector": "#input-field",
  "value": "Hello World"
}

browser_select

Selecciona una opción en un elemento SELECT usando un selector CSS

{
  "selector": "#dropdown",
  "value": "option-value"
}

browser_select_text

Selecciona una opción en un elemento SELECT por su contenido de texto

{
  "text": "Choose me",
  "value": "option-value"
}

browser_evaluate

Ejecuta JavaScript en la consola del navegador

{
  "script": "document.title"
}

Recursos

1. Registros de consola (console://logs)

   • Accede a la salida de la consola del navegador en formato de texto
   • Incluye todos los mensajes de consola del navegador

2. Capturas de pantalla (screenshot://<n>)

   • Accede a imágenes PNG de las capturas de pantalla
   • Referenciadas por el nombre especificado durante la captura

Licencia

Este proyecto está licenciado bajo la Licencia MIT: consulta el archivo LICENSE para obtener más detalles.