Playwright MCP — Add-ons e integraciones

Playwright MCP

✓ Oficial★ 34.987

El servidor MCP oficial de Microsoft para automatización de navegadores — a través del árbol de accesibilidad, sin capturas de pantalla ni modelo de visión.

Playwright MCP controla un navegador real — pero a diferencia de los enfoques basados en capturas de pantalla, el servidor trabaja sobre el árbol de accesibilidad de Playwright, es decir, la descripción estructurada de una página (qué botones, enlaces y campos de formulario existen, con nombre y estado). El README resume las ventajas así: «Fast and lightweight», «LLM-friendly — no vision models needed, operates purely on structured data» y «deterministic tool application» — no hay ambigüedad sobre qué píxel se quería decir, porque el agente se dirige a los elementos directamente en lugar de hacer clic en coordenadas.

Para ello, el agente recibe un conjunto de herramientas de navegador: browser_navigate abre páginas, browser_snapshot entrega el snapshot de accesibilidad actual como texto, browser_click y herramientas relacionadas interactúan con elementos, browser_tabs gestiona varias pestañas. Las capacidades adicionales son opt-in: exportación a PDF (browser_pdf_save vía --caps=pdf) y acciones de ratón basadas en coordenadas para casos especiales (--caps=vision). También se pueden controlar el enrutamiento de red y las cookies/localStorage.

Son compatibles Chrome, Firefox, WebKit y Microsoft Edge; por defecto el navegador se ejecuta de forma visible (headed), y con --headless también de forma invisible. El único requisito es Node.js 18 o más reciente — el servidor se inicia directamente con npx @playwright/mcp@latest, sin instalación permanente. Así, un agente como Claude Code puede operar páginas web, rellenar formularios y recorrer de extremo a extremo su propio frontend, mientras cada paso queda registrado como una acción de herramienta trazable.

🔧 SETUP

Comprobar el requisito: Node.js 18 o más reciente
Registrar en Claude Code: `claude mcp add playwright npx @playwright/mcp@latest`
Para otros clientes MCP, añadir la configuración estándar: `{"mcpServers": {"playwright": {"command": "npx", "args": ["@playwright/mcp@latest"]}}}`
Opcionalmente activar capacidades: `--caps=pdf` (exportación a PDF) o `--caps=vision` (clics por coordenadas), navegador invisible con `--headless`
Probarlo: pedir al agente que abra una página y la describa — entonces usará browser_navigate y browser_snapshot

✅ ¿CUÁNDO USARLO?

Probar de extremo a extremo tu propio frontend

«Abre localhost:3000, intenta enviar el formulario con datos inválidos y comprueba si los mensajes de error aparecen correctamente» — el agente va haciendo clic mediante el árbol de accesibilidad.

Interacción web estructurada sin modelo de visión

Rellenar automáticamente un formulario de varios pasos: el agente ve los campos con nombres y roles como snapshot de texto y los completa de forma determinista — más rápido y económico que el análisis de capturas de pantalla.

⛔ ¿CUÁNDO MEJOR NO?

Comprobaciones visuales al píxel

El árbol de accesibilidad describe estructura y estado, pero no la apariencia — el modo estándar no detecta si un layout se ha desplazado o si los colores son correctos.

Mejor: Para comprobaciones visuales, activar el modo de visión opcional (`--caps=vision`) o usar pruebas clásicas basadas en capturas de pantalla.

Interactuar con tu propio navegador ya con sesión iniciada

Playwright MCP inicia sus propias instancias de navegador — los inicios de sesión y sesiones existentes de tu navegador habitual no están disponibles ahí automáticamente.

Mejor: Para tareas en tu propio navegador con sesión iniciada, usar mejor Claude in Chrome.