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. 点击坐标
   • Instrucciones:browser_click 100 200
   • 操作：在坐标 (100, 200) 点击。
3. 拖拽操作
   • Instrucciones:browser_drag 50 50 150 150
   • 操作：从 (50, 50) 拖到 (150, 150)。
4. entrada
   • Instrucciones:browser_type "hello" true
   • 操作：输入 "hello" 并按 Enter。

Ejemplo de flujo de operaciones

假设你要登录网站：

1. 启动服务器：

npx @playwright/mcp@latest --headless

2. 打开登录页面：

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

3. 输入用户名和密码（快照模式）：

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

4. 点击登录（视觉模式）：

• 切换模式：重启服务器加 --vision
• Instrucciones:browser_click 300 400

5. 检查结果：

• Instrucciones:browser_snapshot（快照模式）或 browser_screenshot（视觉模式）。

advertencia

• 快照模式比视觉模式更可靠，但需要元素引用。
• 视觉模式适合带坐标的 AI 模型。
• 无头模式适合批量任务，有头模式便于调试。

escenario de aplicación

1. 网页导航与表单填写
   AI 能自动打开网页，填表并提交，适合批量注册或登录测试。
2. 数据提取
   从动态网页抓取结构化数据，比如价格或评论。
3. 自动化测试
   检查网页功能是否正常，比如按钮点击或页面跳转。
4. 智能代理交互
   让 AI 操作浏览器完成复杂任务，如在线购物。

CONTROL DE CALIDAD

1. 快照模式和视觉模式有什么区别？
   快照模式用结构化数据操作，速度快且稳定；视觉模式用截图和坐标，适合视觉 AI。
2. 支持哪些浏览器？
   支持 Chromium、Firefox 和 WebKit。
3. 需要写代码吗？
   不需要。只要发送简单指令，AI 就能操作。