Como configurar la monitorizacion visual automatizada de tu sitio web en menos de 5 minutos

Actualizaste un plugin, mergeaste un pull request o modificaste un archivo CSS. Todo se veia bien en tu navegador. Pero revisaste Safari? Revisaste movil? Revisaste las otras 15 paginas que podrian haberse visto afectadas?

La mayoria de los equipos no lo hacen — porque la revision manual lleva demasiado tiempo y es facil saltarsela cuando los plazos aprietan.

La monitorizacion visual automatizada resuelve esto capturando screenshots de tu sitio web en distintos navegadores y dispositivos de forma programada, comparandolos con baselines conocidos y alertandote cuando algo cambia. Y con la herramienta adecuada, configurarlo lleva menos de cinco minutos.

Que hace realmente la monitorizacion visual

La monitorizacion visual es un proceso continuo y automatizado que:

1. Captura screenshots de tus paginas seleccionadas en los navegadores y tamanos de dispositivo elegidos
2. Compara cada nuevo screenshot con un baseline guardado usando algoritmos de diff a nivel de pixel
3. Resalta las diferencias visuales para que veas exactamente que cambio
4. Te notifica por email o Slack cuando se detectan cambios
5. Se repite automaticamente segun la programacion que definas — diaria, semanal o personalizada

Esto detecta los cambios que se escapan de otras formas de testing: regresiones CSS, desplazamientos de layout por cambios de contenido, efectos secundarios de scripts de terceros y diferencias de renderizado entre navegadores.

Paso 1: Crea una cuenta y tu primer proyecto

Empieza registrandote en ScanU.eu. No se necesita tarjeta de credito para el plan gratuito, que incluye 500 screenshots al mes — suficiente para configurar la monitorizacion de tus paginas mas importantes.

Una vez dentro, crea un nuevo proyecto:

• Dale un nombre descriptivo (por ejemplo, "Web Corporativa" o "Cliente — Tienda Acme")
• Introduce la URL base del sitio que quieres monitorizar

Eso es todo para la configuracion del proyecto. Sin archivos de configuracion, sin instalaciones locales, sin herramientas CLI que instalar.

Paso 2: Selecciona tus paginas

Elige que paginas monitorizar. Puedes introducir URLs manualmente o usar el descubrimiento automatico de paginas de ScanU, que lee tu sitemap para encontrar las paginas disponibles.

Centrate en las paginas que mas importan:

• Homepage — tu punto de entrada con mayor trafico
• Landing pages clave — donde ocurre la conversion
• Paginas de producto o servicio — donde los clientes toman decisiones
• Paginas de contacto o registro — donde los formularios deben renderizarse correctamente
• Paginas con navegacion compleja — donde los menus y layouts son complejos

Empieza con 5 a 10 paginas. Siempre puedes anadir mas despues.

Paso 3: Elige navegadores y dispositivos

Selecciona en que navegadores y dispositivos quieres testear. ScanU soporta tres motores de navegador:

• Chrome (Chromium) — el navegador de escritorio y movil mas utilizado
• Firefox — importante para audiencias tecnicas y de desarrolladores
• Safari (WebKit) — critico para usuarios de iOS, donde todos los navegadores usan el motor WebKit

Para dispositivos, elige entre los presets integrados que coincidan con tu audiencia. Un conjunto inicial practico:

• Movil: iPhone 15, Samsung Galaxy S24 — cubre iOS y Android
• Tablet: iPad (10a generacion) — la tablet mas comun
• Escritorio: 1920x1080 — la resolucion estandar de portatil y monitor

Esta combinacion te da una solida cobertura cross-browser y cross-device sin consumir demasiados creditos. El plan gratuito incluye 10 presets de dispositivos; los planes de pago ofrecen mas de 100.

Paso 4: Ejecuta tu primer test y establece los baselines

Haz clic en "Run Test" para capturar tus screenshots iniciales. La infraestructura cloud de ScanU se encarga de todo — renderizado del navegador, carga de paginas, captura de screenshots — en segundo plano.

En cuestion de minutos, tu dashboard muestra los screenshots capturados para cada combinacion de pagina, navegador y dispositivo. Estos primeros screenshots se convierten en tus baselines — el punto de referencia para todas las comparaciones futuras.

Revisa los baselines para asegurarte de que se ven correctos. Si tu sitio estaba en un estado temporal (modo mantenimiento, variacion de A/B test), espera a que este en su estado normal antes de establecer los baselines.

Paso 5: Configura la monitorizacion programada

Ahora configura la monitorizacion automatizada para no tener que ejecutar tests manualmente:

1. Navega a la seccion de Monitores de tu proyecto
2. Crea un nuevo monitor
3. Define la programacion — las revisiones diarias son un buen valor por defecto para sitios activos; las semanales funcionan para sitios mas estables
4. Selecciona tu zona horaria
5. Activa el monitor

A partir de este momento, ScanU ejecuta automaticamente tests visuales segun tu programacion definida, compara los resultados contra tus baselines y senala cualquier cambio visual.

Opcional: Configura las notificaciones

Para recibir alertas cuando se detecten cambios visuales, configura las notificaciones:

• Notificaciones por email estan disponibles en todos los planes de pago y envian resumenes cuando las ejecuciones de tests detectan diferencias
• Integracion con Slack te permite dirigir las alertas a un canal especifico, para que tu equipo vea las alertas de regresion visual junto a su flujo de trabajo habitual

Para Slack, conecta tu workspace a traves de la configuracion de Integraciones, y selecciona que canal debe recibir las alertas de cada proyecto.

Que pasa cuando se detectan cambios

Cuando un test programado detecta diferencias visuales, las veras en tu dashboard como diffs resaltados. Para cada pagina con cambios, obtienes:

• El screenshot del baseline — como se veia la pagina antes
• El screenshot actual — como se ve ahora
• La superposicion del diff — un resaltado visual de exactamente lo que cambio, con los pixeles modificados marcados en rojo
• Un porcentaje de diff — cuanto de la pagina cambio, con precision de dos decimales

Desde aqui, decides:

• Aprobar el cambio si fue intencional (por ejemplo, actualizaste un banner). Esto crea un nuevo baseline.
• Investigar el cambio si fue inesperado. Revisa despliegues recientes, actualizaciones del CMS o cambios en scripts de terceros.
• Corregir la regresion si es un error, y luego ejecuta un nuevo test para confirmar la correccion.

Consejos practicos para una monitorizacion visual efectiva

Configura el umbral de diff adecuadamente. ScanU permite configurar el umbral de diff por proyecto, desde 0,1% hasta 10%. Para la mayoria de los sitios, el valor por defecto del 1% funciona bien. Umbrales mas bajos detectan cambios mas sutiles pero pueden senalar ruido de renderizado. Umbrales mas altos se centran solo en desplazamientos de layout significativos.

Empieza pequeno y expande. Comienza con tus cinco paginas mas criticas en dos o tres dispositivos. Una vez que te sientas comodo con el flujo de trabajo, anade mas paginas y dispositivos para aumentar la cobertura.

Revisa los diffs con prontitud. La monitorizacion programada solo ayuda si alguien revisa los resultados. Configura las notificaciones de Slack o email para asegurarte de que las alertas lleguen a alguien que pueda actuar.

Establece los baselines de forma intencional. Cuando hagas un cambio visual planificado (rediseno, nueva campana, branding actualizado), ejecuta un test y aprueba los nuevos baselines. Esto previene falsos positivos en las ejecuciones de monitorizacion posteriores.

Coordina con los despliegues. Ejecuta un test de comparacion antes y despues de los despliegues para detectar regresiones de inmediato. La monitorizacion programada es una red de seguridad, no un sustituto del testing pre-despliegue.

Cuanto cuesta esto

El plan gratuito de ScanU te da 500 screenshots al mes, 1 proyecto y 10 presets de dispositivos. Esto es suficiente para monitorizar un sitio pequeno en unas pocas configuraciones clave.

Para una monitorizacion mas completa, los planes de pago empiezan en 19 EUR/mes (Pro) con 3.000 screenshots, 5 proyectos y mas de 35 presets de dispositivos. Todos los planes incluyen testing en Chrome, Firefox y Safari sin recargos por navegador.

Todos los datos se alojan en Frankfurt, Alemania, lo que hace que el servicio sea compatible con el RGPD por defecto — una consideracion importante para equipos europeos y empresas que atienden a clientes de la UE.

Empieza a monitorizar ahora

Configurar la monitorizacion visual no requiere experiencia en DevOps, infraestructura local ni un equipo de QA dedicado. Con ScanU, puedes pasar de cero a monitorizacion cross-browser automatizada en menos de cinco minutos.

Crea tu cuenta, configura tu primer proyecto y ejecuta tu primer test. Tendras screenshots de baseline en distintos navegadores y dispositivos antes de que se te enfrie el cafe.

Configura la monitorizacion visual ahora →