Los primeros días después de empezar a vigilar una web, todo va bien. Entonces llega la primera falsa alarma: un reloj. Un minuto después, un contador de stock. Luego un bloque de "artículos relacionados".
Tras tres alarmas dejas de confiar en el sistema. Este artículo explica de dónde salen esas tres alarmas y cómo mantener la vigilancia útil sin apagarla.
Por qué el contenido dinámico rompe la comparación visual
La comparación visual encuentra toda diferencia entre dos momentos. No solo cambios de texto: también de posición, de tono, todo.
Eso es un comportamiento correcto. Solo es un problema si lo que comparas es una página que nunca fue estática.
Una página con reloj cambia cada segundo. El sistema lo informa como cambio, porque técnicamente lo es.
El problema, entonces, no es que el sistema se comporte mal. Es que has elegido comparar consigo misma una página que nunca pretendías que fuera estática.
Las zonas dinámicas habituales
Hora y fecha. Relojes, cuentas atrás, "publicado el". La más común, y la primera que conviene resolver.
Contadores. Visitas, comentarios, unidades en stock.
Personalización. "Hola de nuevo, [nombre]", o contenido que varía según la ubicación. Son difíciles de detectar porque tú no has iniciado sesión y ves siempre la misma página.
Anuncios y contenido de terceros. Banners rotativos, widgets de contenido "aleatorio", incrustaciones sociales.
Últimas publicaciones / contenido relacionado. Cambian cada vez que publicas.
Todo lo que dependa de la sesión. Banner de cookies, estado de suscripción, el menú de usuario conectado.
La solución: enmascarar
Enmascarar significa "no incluyas esta región en la comparación". Marcas el rectángulo alrededor del elemento que cambia y le dices al sistema que no mire ahí.
En la práctica hay tres enfoques:
1. Enmascarado por región fija. Marcar el recuadro y excluirlo. Sencillo, evidente y suficiente en la mayoría de los casos.
La contrapartida: si el elemento se desplaza con el tiempo, la máscara se desalinea. Si añades un elemento nuevo, hay que actualizar la máscara.
2. Enmascarado de texto variable. Enmascarar una palabra o un patrón en cualquier punto de la página, por ejemplo cualquier cadena con forma de fecha.
La contrapartida: un patrón mal elegido oculta un cambio real junto con el ruido.
3. Enmascarado por identidad del elemento. Cuando el elemento tiene un identificador, seguirlo y enmascarar por identidad en lugar de por posición. Normalmente posible con widgets de terceros.
La contrapartida: es el que más configuración requiere.
Cómo elegir
| Situación | Enfoque |
|---|---|
| Un solo reloj | Región fija |
| Unos pocos contadores | Región fija + texto variable |
| Widget de terceros | Por identidad, si es posible |
| Contenido personalizado | Por identificador |
Si una página necesita más de unas cinco máscaras, esa es una señal: elegiste la página equivocada. Vigilar un listado de producto moderno con una máscara por cada elemento dinámico es peor que vigilar una página estática, y te dice menos.
Este es un error frecuente. "Vigilaré esta página y enmascararé las partes dinámicas" significa vigilar la página más dinámica del sitio; el sistema genera ruido y acaba sin usarse.
El riesgo de enmascarar
Aquí conviene ser honesto. Enmascarar también impide ver los cambios que no querías ocultar.
Una página tiene un reloj y un precio. Enmascaras el reloj; la máscara se desplaza y cubre el precio; ahora te pierdes los cambios de precio.
Es un riesgo real y se gestiona de dos formas:
- Revisa las máscaras cada vez que cambia el contenido de la página. Cuando se actualiza el contenido, se actualiza con él el mapa de máscaras.
- Haz un análisis sin máscaras de vez en cuando. De vez en cuando, quita las máscaras y compara todo. Mira qué hay, y vuelve a ponerlas.
El segundo paso se salta con facilidad, y es exactamente donde una rotura real se queda en silencio.
Esperar a que la página se estabilice
Enmascarar no captura el momento en que la página se asienta. También importa el momento del análisis.
No compares antes de que la página termine de cargar. Una captura hecha a medio cargar difiere de la misma página un segundo después, sin que haya cambiado nada.
Espera lo suficiente, pero no de más. Poco tiempo captura imágenes sin cargar; mucho tiempo ralentiza cada análisis y carga el sitio sin necesidad.
No compares la misma hora dos veces. Dos capturas con doce horas de diferencia no son comparables. Un banner que apareció de noche produce una falsa alarma contra una captura de mediodía.
Por qué ocurre en todas partes
Porque las webs modernas no son estáticas. Hace diez años el aspecto de una página era casi fijo; hoy cada página se alimenta de una fuente de datos.
Eso no invalida las pruebas visuales. Significa que la decisión de vigilar una página es editorial, no técnica. "¿Merece la pena vigilar esta página?" va antes que "¿es importante este cambio?", y la respuesta suele ser no.
La regla práctica: en una página tiene que haber algo cuyo cambio te importe a ti. Una página sin nada que valga la pena vigilar produce máscaras, no información.
Es la misma regla de qué páginas vigilar en el seguimiento de clientes, aplicada al lado de pruebas. Para el mecanismo de la comparación, ver qué es la regresión visual.