Saltar al contenido principal

Playwright MCP — Testing Visual con Claude Code

El MCP de Playwright permite a Claude Code controlar un navegador real para inspeccionar y probar sitios web visualmente, sin necesidad de scripts manuales.

Para qué sirve​

  • Auditoría de diseño — capturar screenshots y comparar con el diseño de referencia
  • Extracción de tokens — leer colores, fuentes y métricas directamente del DOM
  • Testing visual — verificar que cambios de CSS se reflejan correctamente en producción o en el dev server
  • Inspección de sitios — explorar sitios externos como referencia (p.ej. extraer la paleta corporativa de wiedii.co)
  • Debugging de UI — leer mensajes de consola, requests de red y snapshots de accesibilidad

Cómo se usa desde Claude Code​

El MCP de Playwright está disponible globalmente en Claude Code. No requiere instalación por proyecto. Claude puede:

  • Navegar a cualquier URL: mcp__playwright__browser_navigate
  • Tomar screenshots: mcp__playwright__browser_take_screenshot
  • Evaluar JavaScript en la página: mcp__playwright__browser_evaluate
  • Capturar snapshots de accesibilidad: mcp__playwright__browser_snapshot
  • Leer la consola: mcp__playwright__browser_console_messages
  • Inspeccionar requests de red: mcp__playwright__browser_network_requests

Artefactos generados — .playwright-mcp/​

Cada operación del MCP puede escribir archivos en .playwright-mcp/ dentro del directorio de trabajo:

ArchivoContenido
page-<timestamp>.pngScreenshot de la página
page-<timestamp>.ymlSnapshot de accesibilidad (árbol DOM simplificado)
console-<timestamp>.logMensajes de consola del navegador

⚠️ Estos archivos son artefactos temporales — no commitear. Son regenerables en cualquier momento y no aportan valor al historial de Git.

Política de .gitignore — obligatorio en todos los proyectos​

Todo repositorio Wiedii debe ignorar .playwright-mcp/ en su .gitignore.

Agregar en la sección ### Claude Code MCP tools ###:

### Claude Code MCP tools ###
# Playwright MCP — screenshots, snapshots and console logs generated
# when Claude uses the browser for visual inspection or testing.
.playwright-mcp/

Esta sección va junto a .claude/ y graphify-out/ en el bloque de artefactos de herramientas de IA. Ver repo-setup para el patrón de referencia.

Ejemplo de flujo — auditoría de identidad corporativa​

1. Claude navega a wiedii.co con browser_navigate
2. Toma screenshot con browser_take_screenshot → .playwright-mcp/page-xxx.png
3. Evalúa JS para extraer colores y fuentes → browser_evaluate
4. Claude actualiza custom.css con los tokens extraídos
5. Inicia el dev server del proyecto
6. Navega a localhost:3001 y verifica visualmente con otro screenshot
7. Los .playwright-mcp/ quedan en el directorio pero no se commitean

Referencias​

  • graphify — otro artefacto de IA que sigue el mismo patrón de ignorar en git
  • repo-setup — checklist donde se documenta .playwright-mcp/ como entrada obligatoria del .gitignore