Regresión visual vs. deriva de estructura: monitorización comparada

Dos capas de la misma página

Toda página web existe como dos cosas a la vez: un DOM —el árbol estructurado de elementos que el navegador construye a partir de tu HTML— y una imagen renderizada, los píxeles que el navegador pinta a partir de ese DOM más el CSS. Un cambio puede aparecer en una capa, en la otra o en ambas.

La monitorización de regresión visual vigila los píxeles. La monitorización de deriva de estructura vigila el DOM. Como un fallo puede esconderse en cualquiera de las dos capas, las dos comprobaciones detectan problemas distintos, y justo en el hueco entre ambas vive la rotura silenciosa.

Cómo funciona la monitorización de regresión visual

Las pruebas de regresión visual capturan una captura de pantalla de cada página clave —Relvato lo hace tanto en el viewport de escritorio como en el de móvil— y la comparan, píxel a píxel, con una imagen de referencia (baseline) aprobada. La comparación es determinista (un diff de píxeles estilo pixelmatch con tolerancia al antialiasing), así que una página sin cambios se renderiza idéntica dos veces y solo se marca un cambio real.

Detecta todo lo visible: una regresión de CSS que desplaza el diseño, una fuente web que no cargó, un cambio de color o de espaciado, una imagen de cabecera demasiado grande, un elemento que se desborda en móvil. Si una persona lo notaría, un diff de píxeles también.

El precio de esa sensibilidad es el ruido. Las regiones genuinamente dinámicas —un banner rotativo, una marca de tiempo, un test A/B, un espacio publicitario— cambian en cada ejecución y se marcarían como falsos positivos. Relvato lo resuelve con máscaras: excluyes esas regiones para comparar solo los píxeles significativos. Y como «distinto» no siempre es «erróneo», cada cambio se retiene para revisión frente a la baseline: aceptas el nuevo aspecto como baseline o ignoras esa región.

Cómo funciona la monitorización de deriva de estructura

La deriva de estructura trabaja una capa más abajo, en el propio DOM. En lugar de una captura, Relvato construye una huella de la estructura de la página —los elementos, secciones y scripts que la componen— y compara cada ejecución con la huella aprobada. Lo que informa es presencia y ausencia: una sección que desapareció, un campo de formulario que se esfumó, un script añadido, un botón «Añadir al carrito» eliminado.

Esto es semántico en vez de basado en píxeles, lo que lo hace robusto frente al ruido cosmético. Un retoque de color, un cambio de fuente o un desplazamiento de un píxel no lo activan: solo un cambio en aquello de lo que la página está hecha. Por eso es bueno detectando regresiones funcionales: un botón de checkout que dejó de renderizarse, un script de analítica o de consentimiento que una actualización de plugin eliminó, un widget de reseñas que dejó de montarse en silencio.

Tiene el punto ciego opuesto al visual: como no mira los píxeles, no verá una rotura puramente visual —una hoja de estilos que cargó mal el diseño manteniendo todos los elementos presentes—. Y como el visual, trabaja frente a una baseline con una revisión de aceptar/ignorar, así que un cambio de marcado intencionado es una aprobación con un clic, no una alarma permanente.

Qué se le escapa a cada una

Las dos comprobaciones fallan en direcciones opuestas. La regresión visual puede pasar por alto un cambio invisible pero funcional: un elemento sigue ocupando su espacio pero su enlace o su handler ya no está, o un script desapareció sin rastro visual. La deriva de estructura puede pasar por alto un cambio visible pero estructuralmente idéntico: los mismos elementos, reestilizados en un diseño roto.

Un ejemplo: una actualización del tema trae un cambio de CSS que empuja tu botón «Comprar» fuera de pantalla en móvil. La regresión visual lo marca de inmediato: los píxeles se movieron. La deriva de estructura sigue en verde: el elemento del botón sigue en el DOM. Ahora al revés: una actualización de plugin deja de renderizar el script de tu banner de consentimiento. La deriva de estructura marca el nodo ausente; la regresión visual quizá no, si el banner estaba bajo el pliegue o era visualmente menor. Ninguna comprobación por sí sola es completa.

Dónde se solapan y por qué importan las baselines

Ambas comprobaciones comparten la misma idea central: capturar una referencia aprobada y luego marcar cualquier desviación respecto a ella. Esa referencia —la baseline— es lo que convierte «esto cambió» en «esto cambió respecto a lo que aprobaste». Un cambio nunca se da por fallido para siempre: lo aceptas como nueva baseline, ignoras una región o sección concreta, o deshaces una decisión más tarde.

El efecto práctico es que ambas comprobaciones se vuelven más silenciosas con el tiempo. Al principio apruebas los cambios intencionados; después, una marca significa algo que no esperabas. (La revisión de baselines de Relvato —aceptar, ignorar solo secciones concretas, deshacer y reiniciar— se explica en su propia guía práctica en Docs.)

Cómo ejecuta Relvato ambas

Relvato ofrece la regresión visual y la deriva de estructura como dos journeys separados y continuos, y es habitual ejecutar ambos en la misma página. En cada cambio —un despliegue, una actualización de plugin o tema, o según programación— vuelve a capturar la captura de pantalla y la huella de estructura, compara cada una con su baseline y avisa solo ante una desviación real.

Usa la regresión visual donde la apariencia es el producto: landing pages, páginas de producto, el checkout. Usa la deriva de estructura donde un elemento ausente es el verdadero riesgo: formularios, botones, embudos, scripts de terceros. Juntas cubren ambas capas de la página, así que un despliegue roto no tiene dónde esconderse, ya aparezca en los píxeles, en el DOM o en ambos.