browser-qa

Browser QA — Pruebas Visuales Automatizadas e Interacción

Cuándo Usar

• Después de desplegar una funcionalidad en staging/previsualización
• Cuando necesitas verificar el comportamiento de la UI en distintas páginas
• Antes del lanzamiento — confirmar que diseños, formularios e interacciones realmente funcionan
• Al revisar PRs que afectan el frontend
• Auditorías de accesibilidad y pruebas responsivas

Cómo Funciona

Utiliza el MCP de automatización del navegador (claude-in-chrome, Playwright o Puppeteer) para interactuar con páginas en vivo como un usuario real.

Seguridad primero — radio de impacto (ejecutar solo lectura por defecto)

Browser QA maneja autenticación real y recorridos reales de usuario, por lo que el radio de impacto debe tratarse explícitamente. Por defecto usar solo lectura: nunca ejecutar un recorrido mutante (pago, eliminación, actualización masiva) contra una URL de producción — requerir una aceptación explícita y una URL de staging/previsualización. Usar credenciales de prueba sembradas, nunca inicios de sesión reales de producción, y redactar credenciales/tokens/PII antes de guardar cualquier captura de pantalla.

Fase 1: Prueba de Humo

1. Navegar a la URL objetivo
2. Verificar errores de consola (filtrar ruido: analytics, terceros)
3. Verificar que no haya 4xx/5xx en peticiones de red
4. Captura de pantalla de la parte visible en viewport desktop + móvil
5. Verificar Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms
   (INP reemplazó a FID en marzo de 2024; umbrales según web.dev)

Fase 2: Prueba de Interacción

1. Hacer clic en cada enlace de navegación — verificar que no haya enlaces rotos
2. Enviar formularios con datos válidos — verificar estado de éxito
3. Enviar formularios con datos inválidos — verificar estado de error
4. Probar flujo de autenticación: inicio de sesión → página protegida → cierre de sesión (solo credenciales de prueba, nunca producción)
5. Probar recorridos críticos del usuario (pago, incorporación, búsqueda)
   — solo lectura por defecto; solo ejecutar recorridos mutantes contra staging
     con aceptación explícita (ver "Seguridad primero" arriba)

Fase 3: Regresión Visual

1. Capturar pantalla de páginas clave en 3 puntos de interrupción (375px, 768px, 1440px)
2. Comparar contra capturas de referencia guardadas
   — sin referencia ⇒ reportar INCONCLUSIVO, nunca un PASAJE silencioso
3. Señalar desplazamientos de diseño > 5px, elementos faltantes, desbordamiento
4. Verificar modo oscuro si aplica

Fase 4: Accesibilidad

1. Ejecutar axe-core o equivalente en cada página
2. Señalar violaciones WCAG 2.2 AA (contraste, etiquetas, orden de enfoque)
3. Verificar que la navegación por teclado funcione de extremo a extremo
4. Verificar los puntos de referencia del lector de pantalla

Nota: axe-core cubre automáticamente aproximadamente el 30–40% de WCAG. Una ejecución limpia es necesaria, no suficiente — la navegación por teclado, el orden de enfoque y una verificación con lector de pantalla aún requieren una comprobación manual. No reportar "accesible" solo con una verificación automatizada.

Formato de Salida

## Informe de QA — [URL] — [marca de tiempo]

### Prueba de Humo
- Errores de consola: 0 críticos, 2 advertencias (ruido de analytics)
- Red: todo 200/304, sin fallos
- Core Web Vitals: LCP 1.2s ✓, CLS 0.02 ✓, INP 89ms ✓

### Interacciones
- [✓] Enlaces de navegación: 12/12 funcionando
- [✗] Formulario de contacto: falta estado de error para email inválido
- [✓] Flujo de autenticación: inicio/cierre de sesión funcionando

### Visual
- [✗] Sección Hero se desborda en viewport de 375px
- [✓] Modo oscuro: todas las páginas consistentes

### Accesibilidad
- 2 violaciones AA: falta texto alternativo en imagen Hero, bajo contraste en enlaces del pie de página

### Veredicto: LANZAR CON CORRECCIONES (2 problemas, 0 bloqueantes)
# veredicto ∈ LANZAR / LANZAR CON CORRECCIONES / NO LANZAR; usar INCONCLUSIVO si no hay referencia visual

Integración

Funciona con cualquier MCP de navegador:

• Herramientas mChild__claude-in-chrome__* (preferido — usa tu Chrome real)
• Playwright mediante mcp__browserbase__*
• Scripts directos de Puppeteer

Combínalo con /canary-watch para monitoreo post-despliegue.