Playwright MCP: Servicio MCP de Automatización de Navegadores de Microsoft

Introducción general

Dramaturgo MCP es una herramienta de código abierto desarrollada por Microsoft y alojada en GitHub. Permite a los modelos de IA controlar directamente los navegadores abriendo páginas web, haciendo clic en elementos, introduciendo texto, etc. a través del protocolo Model Context Protocol (MCP). La herramienta se basa en el marco Playwright y es compatible con navegadores como Chromium, Firefox y WebKit. Sus características principales son que es rápida, ligera y genera datos estructurados sin depender de capturas de pantalla o modelos visuales.Playwright MCP es especialmente adecuada para aplicaciones de IA que requieren interacción con páginas web, como pruebas automatizadas o extracción de datos. La documentación oficial se actualiza hasta marzo de 2025, y el proyecto es activo y popular entre los desarrolladores.

Proyecto del mismo nombre:MCP Playwright: un servicio MCP que proporciona operaciones de automatización del navegador

Lista de funciones

• Soporte de control del navegador: posibilidad de abrir páginas web, navegar por ellas, hacer clic en elementos, etc.
• Generación de datos estructurados: datos de salida a través de instantáneas de accesibilidad, sin necesidad de capturas de pantalla.
• Se ofrecen dos modos: el modo de instantánea por defecto y el modo de visión.
• Capturar pantalla y guardar: puedes hacer una captura de pantalla de una página o guardarla como archivo PDF.
• Entrada y funcionamiento: admite la entrada de texto, pulsaciones de teclas, arrastrar y soltar, y otras funciones.
• Compatible con el modo headless: puede ejecutar el navegador en segundo plano sin mostrar la interfaz.

Utilizar la ayuda

Playwright MCP es fácil de instalar y utilizar. A continuación se describe detalladamente cómo instalar y utilizar esta herramienta, incluidas las características específicas de los dos modos.

Proceso de instalación

1. Preparar el entorno
   Instale primero Node.js (se recomienda la última versión LTS, por ejemplo v22). Compruebe la versión con:

node -v

Si no lo tienes, visita el sitio web oficial de Node.js para descargarlo e instalarlo.

2. Instalación de Playwright MCP
   Ejecute el siguiente comando en el terminal:

npm install -g @playwright/mcp

O simplemente utiliza la última versión:

npx @playwright/mcp@latest

3. Iniciar el servidor
   Introduce el comando para empezar:

npx @playwright/mcp@latest

Por defecto es el modo header (mostrando la ventana del navegador). Si desea utilizar el modo sin encabezado, añada el parámetro:

npx @playwright/mcp@latest --headless

4. Configuración del cliente AI
   Si su herramienta de IA admite MCP (por ejemplo, algunos clientes de modelos grandes), deberá editar el archivo de configuración. Ejemplo:

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

Una vez guardado, la IA podrá llamar al navegador a través del MCP.

5. Configuración para entornos sin monitor
   En un entorno Linux sin monitor, puede utilizar el modo cliente-servidor. Empieza por ejecutarlo en una máquina con monitor:

npx playwright run-server

La salida mostrará una dirección WebSocket, como por ejemplo ws://localhost:port/. y luego se añade en la configuración de MCP:

{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"],
"env": {
"PLAYWRIGHT_WS_ENDPOINT": "ws://localhost:port/"
}
}
}
}

Cómo utilizar las principales funciones

Playwright MCP tiene dos modos: modo instantáneo y modo visual. A continuación se describen por separado.

Modo instantáneo (por defecto)

Este modo funciona con instantáneas accesibles, que son rápidas y estables. A continuación se enumeran las herramientas más utilizadas:

1. Abrir la página

• Instrucciones:browser_navigate "https://example.com"
• Acción: El navegador abre la URL especificada.
• Salida: Devuelve el estado de carga de la página.

2. pulsar sobre un elemento

• Instrucciones:browser_click "登录按钮" "ref123"
• Acción: Haga clic en la instantánea marcada ref123 del elemento (descripción del elemento y cita obligatorias).
• Nota: Las referencias proceden de datos instantáneos.

3. entrada

• Instrucciones:browser_type "用户名输入框" "ref456" "myuser" true
• Funcionamiento: En el ref456 en el cuadro de entrada y, a continuación, pulse Intro (true (indica presentación).

4. Guardar como PDF

• Instrucciones:browser_save_as_pdf
• Acción: Guarda la página actual como archivo PDF.

5. tiempo de espera

• Instrucciones:browser_wait 5
• Operación: Espere 5 segundos (máximo 10 segundos).

patrón visual

cebado con --vision Parámetros:

npx @playwright/mcp@latest --vision

Este modelo funciona con capturas de pantalla y coordenadas y es adecuado para modelos visuales. Herramientas de uso común:

1. Página de interceptación
   • Instrucciones:browser_screenshot
   • Acción: Generar una captura de pantalla de la página actual.
2. Haga clic en las coordenadas
   • Instrucciones:browser_click 100 200
   • Acción: Haga clic en las coordenadas (100, 200).
3. operación de arrastrar y soltar
   • Instrucciones:browser_drag 50 50 150 150
   • Acción: Arrastre de (50, 50) a (150, 150).
4. entrada
   • Instrucciones:browser_type "hello" true
   • Acción: escribe "hola" y pulsa Intro.

Ejemplo de flujo de operaciones

Supongamos que desea iniciar sesión en el sitio web:

1. Inicie el servidor:

npx @playwright/mcp@latest --headless

2. Abra la página de inicio de sesión:

• Instrucciones:browser_navigate "https://example.com/login"

3. Introduzca el nombre de usuario y la contraseña (modo instantáneo):

• Instrucciones:browser_type "用户名" "ref1" "myuser" false
• Instrucciones:browser_type "密码" "ref2" "mypassword" true

4. Haga clic en Iniciar sesión (modo visual):

• Cambiar de modo: reiniciar el servidor más --vision
• Instrucciones:browser_click 300 400

5. Resultados de la inspección:

• Instrucciones:browser_snapshot(modo instantáneo) o browser_screenshot(modo visual).

advertencia

• El modo instantáneo es más fiable que el modo visual, pero requiere referencias a elementos.
• El modelo visual es adecuado para modelos AI con coordenadas.
• El modo sin cabecera es adecuado para tareas por lotes, y el modo con cabecera facilita la depuración.

escenario de aplicación

1. Navegación web y cumplimentación de formularios
   La IA abre automáticamente las páginas web, rellena los formularios y los envía, por lo que resulta adecuada para el registro masivo o las pruebas de inicio de sesión.
2. extracción de datos
   Obtenga datos estructurados de páginas web dinámicas, como precios o reseñas.
3. prueba automatizada
   Compruebe que la página funciona correctamente, como los clics en los botones o los saltos de página.
4. Interacción con agentes inteligentes
   Deje que la IA maneje el navegador para completar tareas complejas, como las compras en línea.

CONTROL DE CALIDAD

1. ¿Cuál es la diferencia entre el modo instantáneo y el modo visual?
   El modo instantáneo funciona con datos estructurados y es rápido y estable; el modo visual utiliza capturas de pantalla y coordenadas y es adecuado para la IA visual.
2. ¿Qué navegadores son compatibles?
   Chromium, Firefox y WebKit son compatibles.
3. ¿Necesita escribir código?
   No es necesario. Sólo tienes que enviar un simple comando y la IA funcionará.