Pruebas de regresión visual y monitores – QA Proof Centro de Ayuda Skip to main content

Pruebas de regresión visual y monitores

La Regresión Visual compara tu página activa con una captura de pantalla aprobada previamente (la baseline) e informa cualquier diferencia. Puntuación 100 = nada cambió. Puntuaciones más bajas = diferencias reales detectadas.

Puedes ejecutar pruebas de regresión bajo demanda, o configurar un monitor que las ejecute automáticamente de forma programada y te envíe un correo cuando algo cambie.

Prueba de regresión puntual

  1. Admin de WP → QAProof → Tests → pestaña Visual Regression.
  2. Introduce la URL de la página.
  3. Haz clic en Run Test. En la primera ejecución para esta URL, el sistema captura una baseline. En cada ejecución posterior, compara con esa baseline.

Para un monitoreo automatizado a largo plazo, usa un Monitor — hace lo mismo de forma programada.

Configurar un monitor

  1. Admin de WP → QAProof → MonitorsAdd Monitor.
  2. Introduce la URL de la página, la programación (diaria / semanal / mensual), el correo de notificación y un umbral de alerta opcional (predeterminado: notificar si la puntuación baja de 90).
  3. Haz clic en Create. La primera ejecución captura la baseline. Las ejecuciones programadas posteriores son pruebas de regresión contra ella.

Puedes ejecutar un monitor bajo demanda en cualquier momento con el botón Run sin esperar a la programación.

Qué significa la puntuación

  • 100 — ninguna diferencia detectable. La página es idéntica a la baseline.
  • 90–99 — ruido trivial (renderizado sub-píxel, anti-aliasing). Normalmente nada accionable.
  • 75–89 — cambios menores confirmados (una palabra añadida, el color de un botón ajustado).
  • 50–74 — múltiples cambios o una regresión significativa de disposición/estilo.
  • 25–49 — regresión importante que afecta a secciones clave.
  • <25 — página fundamentalmente rota o en blanco.

Cómo funciona la comparación

Tres señales independientes determinan si la página cambió:

  1. Comparación de texto del DOM — cada cadena visible en la baseline frente a la actual. Detecta ediciones solo de texto que la comparación de captura de pantalla podría pasar por alto.
  2. Comparación de colores CSS — tokens de color extraídos (--primary, --accent, fondo de botón, color de enlace, etc.) comparados numéricamente. Detecta cambios de paleta.
  3. Comparación de colores de píxeles — comparación RGB basada en mosaicos de las capturas de pantalla. Detecta todo lo demás.

Si las tres señales no informan ningún cambio, el sistema devuelve la puntuación 100 sin invocar a la IA — rápido y sin riesgo de falsos positivos. Si cualquier señal se dispara, se ejecuta el análisis por IA para interpretar el cambio y producir un resumen legible para humanos.

Aprobar un cambio real

Cuando rediseñas una página intencionalmente, la próxima ejecución del monitor informará una regresión. Eso es lo esperado — el sistema no tiene forma de saber qué cambios pretendías. Abre el resultado, verifica que los cambios sean correctos y haz clic en Approve. Esto captura una nueva baseline para que las ejecuciones futuras usen el nuevo estado como referencia.

Resultados "Capture appears unstable"

A veces verás un resultado de regresión con puntuación 100 y un resumen como "Capture appears unstable — page height differs by 60% between baseline and current" o "… 4 image(s) failed to load during the current capture".

Esto es una salvaguarda deliberada. El sistema detectó que la captura actual es en sí misma poco fiable (un carrusel en JS explotó, el CDN de imágenes nos limitó la tasa, etc.) y se negó a comparar. Informar una regresión en ese estado sería engañoso — el sitio subyacente no cambió. Vuelve a ejecutar la prueba en 1 a 2 minutos; casi siempre tiene éxito al reintentar.

Alertas por correo

Cuando el resultado de un monitor baja de tu umbral de alerta, el plugin envía un correo a la dirección que configuraste. El correo incluye:

  • Puntuación y etiqueta (Bueno / Necesita Trabajo / Deficiente).
  • Desglose de la puntuación (4 categorías).
  • El problema principal encontrado.
  • Botón Download Full Report — un solo clic descarga un PDF con todos los problemas, recomendaciones y capturas de pantalla.

Puedes desactivar las alertas de monitor globalmente en Profile → Email Notifications, o por monitor en el cuadro de diálogo de edición del Monitor.

Historial de resultados

Cada monitor conserva los últimos 50 resultados. Los resultados más antiguos se purgan automáticamente. Abre un monitor en QAProof → Monitors para ver la línea de tiempo — los puntos verdes son ejecuciones aprobadas, ámbar/rojo son fallos, y puedes profundizar en cualquier resultado pasado.

Consejos para monitores estables

  • Elige páginas estables. Las páginas con contenido que rota con frecuencia (precios de acciones en vivo, feeds de redes sociales) informarán "regresiones" constantes porque el contenido realmente cambia. Usa el enmascaramiento de contenido dinámico (activado por defecto) para ocultar temporizadores y rotadores, o elige páginas menos volátiles.
  • Usa la programación semanal para sitios de bajo tráfico. La activación de WP-Cron en instalaciones de WordPress de bajo tráfico puede ser poco fiable. Configura un cron job a nivel de servidor que acceda a wp-cron.php, o usa una programación semanal, que es más tolerante.
  • Recaptura las baselines después de los despliegues. Si publicas cambios visuales, haz clic en Approve en el siguiente resultado de regresión para actualizar la baseline. De lo contrario, cada ejecución futura seguirá señalando el mismo cambio intencional.