QA de Navegador — 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 UI en varias páginas
- Antes de enviar cambios — confirma que los diseños, formularios e interacciones funcionan realmente
- Al revisar PRs que modifican código de frontend
- Auditorías de accesibilidad y pruebas responsive
Cómo Funciona
Usa el MCP de automatización de navegador (claude-in-chrome, Playwright o Puppeteer) para interactuar con páginas en vivo como un usuario real.
Seguridad primero — radio de explosión (ejecutar solo lectura por defecto)
Browser QA maneja autenticación real y recorridos de usuario reales, por lo que trata el radio de explosión explícitamente. Por defecto, solo lectura: nunca ejecutes un recorrido mutante (checkout, pago, eliminación, actualización masiva) contra una URL de producción — requiere una aceptación explícita y una URL de staging/preview. Usa credenciales de prueba predefinidas, nunca inicios de sesión reales de producción, y enmascara 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: analíticas, terceros)
3. Confirmar que no hay 4xx/5xx en las peticiones de red
4. Capturar pantalla de la parte visible en escritorio + vista 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 (checkout, incorporación, búsqueda)
— solo lectura por defecto; solo ejercitar 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 quiebre (375px, 768px, 1440px)
2. Comparar contra las capturas de línea base guardadas
— sin línea base ⇒ reportar INCONCLUSIVO, nunca un PASS 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 foco)
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 foco y una pasada con lector de pantalla aún requieren una verificación manual. No reportes "accesible" solo con una pasada automatizada.
Formato de Salida
## Reporte QA — [URL] — [marca de tiempo]
### Prueba de Humo
- Errores de consola: 0 críticos, 2 advertencias (ruido de analíticas)
- 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 la vista de 375px
- [✓] Modo oscuro: todas las páginas consistentes
### Accesibilidad
- 2 violaciones AA: falta texto alternativo en imagen del héroe, bajo contraste en enlaces del pie de página
### Veredicto: ENVIAR CON CORRECCIONES (2 problemas, 0 bloqueantes)
# veredicto ∈ ENVIAR / ENVIAR CON CORRECCIONES / NO ENVIAR; 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.