Automatice las pruebas de regresión visual con IA para prevenir errores de UI

Pruebas de regresión visual impulsadas por IA

Comprobar manualmente los sitios web en busca de cambios visuales inesperados es tedioso y propenso a errores. Este flujo de trabajo n8n aprovecha el poder de los modelos de visión AI para automatizar las pruebas de regresión visual, asegurando que la UI y UX de su sitio web permanezcan consistentes y sin fallos en todos los despliegues.

Características clave

• Comparación visual impulsada por IA: Utiliza las avanzadas capacidades de visión de Google Gemini para identificar con precisión regresiones sutiles en UI, texto, imagen, color y diseño entre las capturas actuales y las base.
• Generación automatizada de capturas: Captura sin interrupciones las capturas de pantalla actuales del sitio web utilizando Apify, un servicio confiable de scraping web de terceros.
• Gestión centralizada de URLs: Administre fácilmente su lista de páginas web monitoreadas y sus correspondientes referencias de imágenes base dentro de un Google Sheet.
• Reporte proactivo de problemas: Crea automáticamente reportes detallados y problemas en Linear.app (o su herramienta preferida de gestión de proyectos) cuando se detectan cambios visuales.
• Automatización programada: Configure el flujo de trabajo para ejecutar pruebas de regresión visual de forma programada, asegurando un monitoreo continuo sin intervención manual.

Cómo funciona

Este flujo de trabajo está dividido ingeniosamente en dos partes principales. La Parte A se dedica a establecer su línea base generando y almacenando capturas "golden" iniciales de sus páginas web. La Parte B toma el relevo, ejecutando pruebas automatizadas contra estas bases, comparando nuevas capturas con el modelo de visión AI y reportando cualquier discrepancia.

Parte A: Generar imágenes base

Antes de realizar cualquier prueba de regresión visual, necesitamos un conjunto de capturas base con las que comparar. Esta parte inicial del flujo de trabajo utiliza un servicio externo de captura de pantalla de sitios web, Apify.com, para lograr esto. Normalmente ejecutará esta sección solo cuando necesite actualizar sus imágenes base.

1. Obtener lista de páginas web para generar imágenes base

El flujo de trabajo comienza recuperando una lista de páginas web desde un Google Sheet designado. Esta hoja sirve como su repositorio central, manteniendo todas las URLs que desea monitorear y sus referencias asociadas a capturas base.

2. Generar captura de pantalla de la página web vía Apify

Para cada página web en la lista, el flujo de trabajo interactúa con Apify.com, un potente SaaS de scraping web, para generar una captura de alta calidad. El actor dedicado de captura de pantalla de Apify garantiza una captura precisa y consistente.

3. Subir la captura a Google Drive

Una vez que Apify genera una captura, esta se descarga y sube de forma segura a su Google Drive. Lo importante es que el flujo de trabajo actualiza entonces su Google Sheet con el nuevo ID de Google Drive para cada imagen, lo que facilita su referencia en futuras pruebas de regresión.

Parte B: Ejecutar prueba de regresión visual

Con sus imágenes base establecidas, la Parte B del flujo de trabajo comienza a monitorear activamente las regresiones visuales. Esta sección está diseñada para ejecutarse automáticamente en un horario, realizando controles continuos para detectar cambios inesperados.

4. Activar ejecución de la prueba de regresión visual

La prueba de regresión visual puede activarse manualmente o, de manera más eficiente, programarse recurrentemente utilizando el nodo Schedule Trigger de n8n. Comienza recuperando la lista más reciente de páginas web a probar desde su Google Sheet.

5. Descargar la base y generar una nueva captura de pantalla de la página web

Para cada página web, el flujo realiza dos acciones simultáneas: descarga la captura base existente desde Google Drive y genera una captura actual fresca de la página utilizando Apify.com.

6. Comparar capturas usando el modelo de visión

El corazón de la prueba de regresión visual está aquí. Ambas capturas, la base y la nueva, se envían a un modelo de visión AI (Google Gemini en este caso) para su comparación. Un parser de salida estructurada asegura que el análisis del AI sobre cualquier diferencia visual se devuelva en un formato JSON limpio para procesamiento posterior.

7. Crear reporte en Linear

Finalmente, cualquier cambio detectado se agrega, formatea en un fragmento markdown claro y se utiliza para crear automáticamente un nuevo problema o reporte en Linear.app. Esto provee a su equipo de insights inmediatos y accionables sobre cualquier regresión de UI, permitiendo una resolución rápida.