Playwright MCP — Casos de uso, Instalar & Demo en vivo

Name: Playwright MCP Server
Author: microsoft

Por qué usarlo

Características clave

Oficial de Microsoft — publicado y mantenido por el equipo de Microsoft Playwright
Basado en árbol de accesibilidad — mucho más confiable que los agentes basados en píxeles
Compatible con Chromium, Firefox, WebKit, en modo gráfico o headless
Multi-pestaña, carga/descarga de archivos, intercepción de red, grabación de vídeo

Demo en vivo

Cómo se ve en la práctica

playwright.replay ▶ listo

0/0

Instalar

Elige tu cliente

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

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

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

~/.cursor/mcp.json · .cursor/mcp.json

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

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit

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

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

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

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json

{
  "context_servers": {
    "playwright": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@playwright/mcp@latest"
        ]
      }
    }
  }
}

Añádelo a context_servers. Zed recarga en caliente al guardar.

claude mcp add playwright -- npx -y @playwright/mcp@latest

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: Playwright

Realiza un test de humo en un despliegue de producción en 60 segundos

👤 Ingenieros DevOps, gerentes de lanzamiento ⏱ ~5 min intermediate

Cuándo usarlo: Acabas de desplegar y quieres una verificación rápida de que los flujos de usuario críticos sigan funcionando antes de declarar éxito.

Requisitos previos

Credenciales de cuenta de prueba (usa una cuenta QA dedicada, no una de usuario real) — Guárdalas en variables de entorno o en el prompt mismo

Flujo

Abre la página de inicio y verifica que cargue

Abre https://app.example.com. Verifica que la página devuelva 200, el H1 diga 'Bienvenido', y el botón de inicio de sesión sea visible.✓ Copiado

→ Pasa o falla con captura de pantalla si falla
Ejecuta el flujo inicio de sesión → acción principal → cierre de sesión

Inicia sesión como [email protected] / [contraseña]. Luego crea un nuevo proyecto llamado 'smoke-test-<timestamp>'. Luego elimínalo. Luego cierra sesión.✓ Copiado

→ Cada paso tiene éxito; si alguno falla, captura de pantalla + volcado de DOM
Diagnostica cualquier fallo

Si algún paso falló, captura la instantánea de la página y dime qué es diferente de una línea de base funcional.✓ Copiado

→ Elemento específico o solicitud de red que falló

Resultado: Confianza (o pánico rápido) sobre tu despliegue en menos de un minuto, sin necesidad de un conjunto E2E completo.

Errores comunes

Los datos de prueba codificados se acumulan y contaminan prod — Siempre usa marcas de tiempo únicas en los datos de prueba y limpia al final del flujo
La sesión del navegador persiste entre ejecuciones, ocultando errores que necesitan un estado limpio — Ejecuta con --browser-context: incognito o limpia cookies entre ejecuciones

Combinar con: sentry

Audita tu sitio en 5 anchos de ventana gráfica e informa de roturas

👤 Ingenieros frontend, diseñadores ⏱ ~15 min intermediate

Cuándo usarlo: Antes de lanzar un sitio de marketing o página de producto, quieres verificar que no se rompa en anchos comunes.

Flujo

Abre la página en 5 anchos de ventana gráfica (320, 375, 768, 1024, 1440)

Abre https://example.com en ventanas gráficas de 320×568, 375×812, 768×1024, 1024×768, 1440×900. Toma una captura de pantalla de página completa de cada una.✓ Copiado

→ 5 capturas de pantalla guardadas
Detecta desbordamiento horizontal en cada ancho

Para cada ventana gráfica, lista cualquier elemento donde scrollWidth > viewportWidth. Estos están causando scroll horizontal y se sienten rotos.✓ Copiado

→ Lista de selectores CSS infractores por ventana gráfica
Sugiere correcciones

Para cada elemento desbordado, obtén su CSS calculado y sugiere la corrección más pequeña (probablemente max-width, overflow-wrap, o ajuste de punto de ruptura).✓ Copiado

→ Diff procesable por elemento

Resultado: Una lista de correcciones priorizada con selectores específicos, apta para presentar como un PR único.

Errores comunes

Los usuarios reales tienen barras de desplazamiento (15px en Windows), que el navegador sin interfaz no simula por defecto — Prueba con --browser=chromium y --browser=webkit; los anchos importan más de lo que crees

Combinar con: chrome-devtools · filesystem

Rastrea tu sitio y encuentra cada enlace interno roto

👤 Mantenedores de documentación, gestores de SEO ⏱ ~30 min intermediate

Cuándo usarlo: Antes de un impulso de marketing o una vez al trimestre — los 404 silenciosos en enlaces internos dañan el SEO y la confianza del usuario.

Flujo

Rastrea el sitio recopilando todos los enlaces internos

Comenzando desde https://docs.example.com, rastrea todas las páginas en el mismo dominio (profundidad máx. 3). Recopila cada href encontrado.✓ Copiado

→ Inventario de enlaces completo
Prueba cada enlace

Para cada URL única, envía una solicitud HEAD y captura el código de estado. Marca cualquier cosa >= 400.✓ Copiado

→ Lista de enlaces rotos con códigos de estado
Agrupa enlaces rotos por remitente

Para cada enlace roto, lista qué página(s) lo enlazan, para saber dónde repararlo.✓ Copiado

→ Lista de remitentes por enlace roto, ordenada por cantidad de remitentes

Resultado: Un informe markdown que puedes entregar al equipo de documentación listando cada enlace roto agrupado por qué página necesita reparación.

Errores comunes

Algunos sitios limitan la velocidad de rastreadores agresivos — Añade un retardo entre solicitudes; si ejecutas en producción, hazlo durante horas de menor actividad

Combinar con: filesystem · github

Raspa datos que requieren autenticación

👤 Analistas de datos, investigadores ⏱ ~20 min advanced

Cuándo usarlo: Los datos que necesitas están detrás de un inicio de sesión (tu panel de administración, informes internos, etc.) y los raspadores básicos no pueden acceder.

Requisitos previos

Credenciales válidas para el objetivo — Usa una cuenta de servicio, nunca la personal

Flujo

Inicia sesión

Abre https://target.example.com/login. Rellena el campo de correo electrónico con [correo] y contraseña con [contraseña]. Envía.✓ Copiado

→ Sesión confirmada — aterrizó en la URL del panel
Navega a la página de datos

Haz clic en la sección Informes. Espera a que se represente la tabla de datos.✓ Copiado

→ Tabla visible en DOM
Extrae los datos

Lee cada fila de la tabla de informe. Devuelve como JSON con cada columna como clave.✓ Copiado

→ Conjunto de datos completo como JSON

Resultado: Datos estructurados que no podrías haber obtenido con un raspador HTTP simple, listos para insertar en una hoja de cálculo o BD.

Errores comunes

MFA está habilitada y rompe el flujo — Configura una contraseña específica de aplicación si el servicio la admite, o usa un token API de larga duración en su lugar
Los Captchas aparecen después de varios inicios de sesión — Usa un contexto de navegador persistente (--user-data-dir) para que las cookies se reutilicen y no actives puertas de captcha

Combinar con: postgres · filesystem

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

playwright + filesystem

Raspa un sitio, guarda el contenido de cada página en disco para RAG sin conexión

Rastrea docs.stripe.com comenzando desde /api, guarda cada página como archivo Markdown bajo ./knowledge/stripe/{path}.md.✓ Copiado

playwright + chrome-devtools

Pruebas de rendimiento + funcionales en un flujo — verifica que la página cargue correctamente Y rápido

Abre mi página de destino. Verifica el H1, luego captura un rastreo de Lighthouse y dime si LCP está por debajo de 2 segundos.✓ Copiado

playwright + sentry

Reproduce un error de producción reportado en Sentry reproduciendo migajas de usuario

El problema de Sentry WEB-3a91 dice que el usuario hizo clic en X luego en Y luego se bloqueó. Reproduce esa secuencia exacta en Playwright y confirma.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar	Coste
browser_navigate	url: str	Navega a una URL — primera acción de cualquier flujo	1 carga de página
browser_snapshot		Obtén una vista estructurada de todos los elementos interactivos (enlaces, botones, entradas)	gratuito
browser_click	ref: str (from snapshot) \| selector: str	Haz clic en un elemento identificado por referencia de instantánea o selector CSS	gratuito
browser_type	ref, text, submit?: bool	Rellena un campo de entrada; con submit:true también presiona Intro	gratuito
browser_screenshot	fullPage?: bool, path?: str	Captura evidencia visual — depuración o auditoría	espacio en disco
browser_evaluate	script: str	Ejecuta JS arbitrario en el contexto de la página — usa con moderación, prefiere herramientas específicas	gratuito
browser_network_requests		Inspecciona qué está cargando la página; útil para encontrar puntos finales de API ocultos	gratuito

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: Gratuito — se ejecuta localmente, solo recursos de tu máquina
Tokens por llamada: Las instantáneas son 500-3000 tokens dependiendo de la complejidad de la página
Monetario: Gratuito. Binarios de navegador descargados una vez (~300MB Chromium).
Consejo: Usa browser_snapshot en lugar de capturas de pantalla — es 100× más barato en tokens y más confiable para que Claude actúe.

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: Pasa a través de variables de entorno; nunca pongas credenciales de producción reales en prompts

Salida de datos: Los navegadores se conectan a cualquier URL a la que navegues. Sin telemetría a Microsoft.

Las sesiones del navegador persisten — limpia cookies entre ejecuciones si estás probando autenticación.
El modo gráfico abre una ventana real en tu máquina; usa modo sin interfaz para CI.

Resolución de problemas

Errores comunes y soluciones

Elemento no encontrado / TimeoutError

La página no ha terminado de representarse. Añade una espera explícita: browser_wait_for(selector) o browser_wait_for(text='...') antes de la acción.

Verificar: Toma una instantánea primero para ver qué hay realmente en la página

El navegador no se inicia en Linux

Instala dependencias del SO: npx playwright install-deps. Común en Docker — usa la imagen oficial de Playwright como base.

Verificar: playwright --version

Todas las navegaciones fallan con net::ERR_*

Problema de aislamiento de red. Ejecuta con --no-sandbox si está en Docker, o revisa tu firewall / proxy.

El sitio detecta automatización y muestra captcha

Usa --browser-type=firefox (menos detectado que Chromium sin interfaz), o ejecuta en modo gráfico si es apropiado. Algunos sitios son intencionalmente resistentes a bots — respeta eso.

Alternativas

Playwright vs otros

Alternativa	Cuándo usarla	Contrapartida
puppeteer MCP	Solo necesitas Chromium y quieres una API un poco más simple	Solo Chromium; sin Firefox/WebKit; comunidad más pequeña ahora
Firecrawl MCP	Solo necesitas extraer contenido, no interactuar con la página	Alojado (cuesta créditos) pero cero infra; no se puede hacer clic en flujos
Browserbase MCP	Necesitas ejecutar automatizaciones de navegador desde un contexto sin servidor (sin navegador local)	Servicio alojado con precios por minuto; excelente para agentes de producción

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills