browser-qa

Browser QA — Pruebas Visuales e Interacción Automatizadas

Cuándo Usarlo

• Después de desplegar una funcionalidad en staging/preview
• Cuando necesites verificar el comportamiento de la interfaz en diferentes páginas
• Antes de lanzar — confirma que layouts, formularios e interacciones realmente funcionan
• Al revisar PRs que toquen código frontend
• Auditorías de accesibilidad y pruebas responsive

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 ante todo — radio de acción (ejecutar solo lectura por defecto)

Browser QA maneja autenticación real y recorridos reales de usuario, así que trata el radio de acción de forma explícita. Por defecto: solo lectura: nunca ejecutes un recorrido mutante (compra, pago, eliminación, actualización masiva) contra una URL de producción — requiere un consentimiento explícito y una URL de staging/preview. Usa credenciales de prueba, nunca inicios de sesión reales de producción, y redacta credenciales/tokens/PII antes de guardar cualquier captura.

Fase 1: Smoke Test

1. Navegar a la URL objetivo
2. Verificar errores en la consola (filtrar ruido: analítica, terceros)
3. Verificar que no haya 4xx/5xx en las peticiones de red
4. Captura de pantalla de la zona visible en escritorio + viewport móvil
5. Verificar Core Web Vitals: LCP < 2,5s, CLS < 0,1, INP < 200ms
   (INP reemplazó 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: iniciar sesión → página protegida → cerrar sesión (solo credenciales de prueba, nunca producción)
5. Probar recorridos críticos de usuario (compra, incorporación, búsqueda)
   — solo lectura por defecto; solo ejecuta recorridos mutantes contra staging
     con consentimiento explícito (ver "Seguridad ante todo" arriba)

Fase 3: Regresión Visual

1. Capturar pantallas de páginas clave en 3 puntos de quiebre (375px, 768px, 1440px)
2. Comparar contra capturas base confirmadas
   — sin captura base ⇒ reportar INCONCLUSIVO, nunca un PASO silencioso
3. Marcar desplazamientos de diseño > 5px, elementos faltantes, desbordamiento
4. Verificar modo oscuro si corresponde

Fase 4: Accesibilidad

1. Ejecutar axe-core o equivalente en cada página
2. Marcar violaciones WCAG 2.2 AA (contraste, etiquetas, orden de enfoque)
3. Verificar que la navegación por teclado funcione de extremo a extremo
4. Revisar 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 pasada con lector de pantalla todavía necesitan una verificación manual. No reportes como "accesible" solo desde una pasada automatizada.

Formato de Salida

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

### Smoke Test
- Errores de consola: 0 críticos, 2 advertencias (ruido de analítica)
- 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 correo inválido
- [✓] Flujo de autenticación: inicio/cierre de sesión funcionando

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

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

### Veredicto: LANZAR CON CORRECCIONES (2 problemas, 0 bloqueantes)
# veredicto ∈ LANZAR / LANZAR CON CORRECCIONES / NO LANZAR; usar INCONCLUSIVO si no hay línea base 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 posterior al despliegue.