Comprobaciones visuales
Compara una pantalla en vivo con un frame de Figma o una captura de pantalla subida como parte de una ejecución.
Un paso de Visual Compare comprueba cómo se ve el producto, no solo qué hace. Autonomy captura la pantalla en ese punto del recorrido y la compara con una referencia que adjuntaste al paso.
Úsalo donde una aserción funcional no puede detectar el error: un layout colapsado, una navegación ausente, un componente que renderiza pero con la escala tipográfica incorrecta, una superficie de modo oscuro que nunca cambió.
Referencias
Cada paso puede tener una o más referencias. Se admiten dos fuentes:
- Un frame de Figma. Pega la URL del frame y Autonomy lo renderiza en el servidor. Esto mantiene el diseño como fuente de verdad — cuando el frame cambie, resuelve de nuevo y la línea base se actualiza. Requiere una clave de API de Figma; consulta Figma.
- Una captura de pantalla subida. PNG, JPG o WebP, hasta 25 MB. Úsala cuando la referencia es un build aprobado en lugar de un diseño, o cuando el diseño no está en Figma.
Adjunta referencias desde Test Cases → tu caso → Visual References. Selecciona el paso, luego Add Figma frame o Upload screenshot. Cada referencia muestra su estado de resolución; una referencia fallida tiene un control de reintento que la resuelve de nuevo.
Cómo funciona la comparación
Autonomy ejecuta dos pasadas y las combina:
- Una comparación determinista de píxeles entre la pantalla capturada y la referencia.
- Una revisión de modelo de visión de ambas imágenes, fundamentada en datos de diseño extraídos de la referencia — geometría del frame, rellenos como colores hex, estilos de texto, radios de esquina, y padding y gaps de auto-layout cuando la referencia es un frame de Figma.
La segunda pasada es lo que evita que la comprobación falle por una diferencia de antialiasing de un píxel mientras sigue detectando una navegación que desapareció. La comparación visual se enruta a un modelo de visión rápido en lugar del modelo usado para los pasos regulares.
Tolerancia
| Tolerancia | Umbral de color | Límite de discrepancia | Usar para |
|---|---|---|---|
strict | 0.03 | 0.5% | Fidelidad a nivel de píxel en un componente estable. |
moderate (por defecto) | 0.10 | 2% | Layout y estructura. El valor por defecto adecuado para una página. |
loose | 0.20 | 5% | Apariencia general donde el contenido es dinámico. |
Por separado, el modo de bloqueo decide qué hace una discrepancia con la ejecución:
major— falla el paso en discrepancias mayores o críticas, como una navegación ausente o un cambio de layout.any— falla en cualquier discrepancia.report— registra los hallazgos y deja que la ejecución continúe. Úsalo cuando estés añadiendo cobertura visual a una suite existente y aún no quieras que bloquee la fusión.
Viewport
La comparación solo tiene sentido con el viewport para el que se dibujó la referencia. Cuando grabas un flujo, el viewport que elegiste en la pantalla de configuración se usa tanto para el navegador alojado como para cualquier paso de Visual Compare capturado en esa sesión. Configúralo para que coincida con el diseño.
Evidencia
Un paso visual adjunta la pantalla capturada, la referencia, la diferencia y los hallazgos del modelo a la evidencia de la ejecución, junto con el resto de la cronología. Los revisores pueden ver qué renderizó el producto, qué debería haber renderizado y qué diferencias específicas se juzgaron significativas.
Solución de problemas
El paso reporta una discrepancia que no es real
Amplía la tolerancia un nivel, o cambia la referencia de una página completa al componente que realmente te importa. Las referencias de página completa en una página con contenido dinámico — timestamps, contadores, elementos de feed — producen ruido con cualquier tolerancia.
La referencia no se resuelve
Una referencia de Figma necesita una clave de API válida y una URL que contenga un node-id. Abre el frame en Figma, copia su enlace y pega la URL completa. Consulta Figma para la configuración de la clave y los estados de error.
Todo discrepa
Comprueba el viewport. Una referencia dibujada con ancho de escritorio comparada contra una captura móvil es una discrepancia total por definición, y el modelo la reportará como tal.