Visual Regression Bajo el Capó

nos da confianza sobre cómo cambia nuestra interfaz de usuario para los usuarios reales. Pero en mi experiencia, la regresión visual también es una categoría de prueba extremadamente inestable. Probablemente conozcan esta razón cuando cada literalmente cada segundo captura de pantalla, cada segundo commit, tiene algún ruido de regresión visual y como todos somos humanos y nos estamos acostumbrando a esto, comenzamos a ignorarlo, aprobarlo automáticamente y así sucesivamente. Y esto es un problema porque una vez que se vuelve inestable, pierde el valor. Así que hoy, me gustaría abordar este problema adentrándome en la regresión visual, los problemas ocultos y tratar de obtener este conocimiento y utilizarlo para construir una regresión visual más confiable. Así que bajo la superficie de la regresión visual siempre hay cuatro pasos simples. En primer lugar, debes cargar una página, luego debes tomar una captura de pantalla, compararla con la versión aprobada anterior y ver la diferencia. Parece bastante fácil, pero cada uno de estos pasos tiene sus propios problemas ocultos y me gustaría discutirlos. Así que primero, debes cargar la página, pero no es suficiente cargar la página usando tu ejecutor de pruebas basado en navegador favorito como Cypress, ¿verdad? Necesitas hacer que esta página sea predecible, y esto es un problema especialmente cuando no estás utilizando servicios de regresión visual, porque cuando tu página no está en un estado estable puedes obtener fácilmente mucho ruido, como por ejemplo, aquí. La mayoría de las capturas de pantalla tienen secciones que cambian de vez en cuando, como los videos incrustados o el carrusel que cambia por tiempo, y todo esto puede romper fácilmente el proceso de regresión visual. Además, las animaciones, los tiempos, los valores aleatorios pueden romper esto fácilmente, así que debemos tener cuidado con esto, pero eso no es todo de lo que debemos preocuparnos. También es posible que haya diferentes interfaces de usuario incluso cuando estás ejecutando el mismo código, pero en diferentes sistemas operativos o navegadores. Simplemente porque los diferentes sistemas de diseño o el propio sistema operativo pueden producir cambios en el diseño o una vista predeterminada diferente, por lo que esto romperá nuestro código. Y este es un problema real, que se resuelve perfectamente con los servicios de regresión visual, pero presenta muchos problemas para las personas que intentan hacer la regresión visual por sí mismas. Los servicios de regresión visual resuelven esto cargando tu HTML, y no la captura de pantalla, sino el HTML, ejecutando este HTML con todos los estilos en el navegador especificado, y solo allí tomando una captura de pantalla y comparándola. Pero puedes obtener el mismo nivel de predecibilidad ejecutando todas tus tareas y solo ejecutando tus tareas de regresión visual en Docker. Incluso puede ser razonable hacer una cantidad específica de tareas separadas solo para la regresión visual y ejecutarlas solo en Docker, incluso aprobarlas en Docker. Y esto te dará confianza de que tus tareas se están ejecutando en el mismo entorno y no generan mucho ruido y cambios en el diseño entre las máquinas locales de los desarrolladores. Pero también hay un enfoque interesante entre estas dos opciones. Existe un proyecto llamado Visual Regression Tracker que te permite ejecutar estas tareas dentro de Docker en un servicio autohospedado, te brinda una interfaz que te permite aprobar la captura de pantalla y te brinda el mismo nivel de predecibilidad que los servicios de regresión visual, pero autohospedado. Estoy seguro de que este proyecto será el futuro de la regresión visual. Pero luego necesitas tomar una captura de pantalla, ¿verdad? Pero ¿cuál? Y aquí está el problema, porque constantemente veo, especialmente en la comunidad de Cypress, que la gente está usando la resolución predeterminada de Cypress, o alguna resolución pequeña que honestamente no usa nadie en el mundo, ¿verdad? Necesitamos asegurarnos de que estamos probando nuestra interfaz de usuario en las resoluciones que utilizan nuestros usuarios. Puedes obtener fácilmente esta información de cualquier herramienta de análisis. Por ejemplo, aquí están las estadísticas de mi sitio web personal, y puedes ver que la mayoría de mis usuarios están utilizando esta extraña resolución de algunas tabletas, y honestamente, no estoy probando mi sitio web en esta resolución, y probablemente sabes lo fácil que es perder algunos efectos visuales cuando esta resolución no es ampliamente popular o es demasiado grande, por ejemplo, y necesitas asegurarte de que estás probando en esta resolución que utilizan tus usuarios, y en realidad es extraño que por defecto, las herramientas y servicios de aplicaciones visuales no utilicen las resoluciones más populares, como por ejemplo, Full HD. Y la razón de esto es que la comparación de capturas de pantalla es realmente lenta. Para comparar dos imágenes con una resolución Full HD, necesitas iterar sobre 2 millones de píxeles, calcular la diferencia entre cada uno utilizando una fórmula especializada y luego guardar la diferencia. Es una tarea bastante difícil y que no es amigable con el rendimiento para las computadoras, especialmente cuando intentas hacer esto en JavaScript. Y por eso creé y actualmente estoy trabajando en la biblioteca llamada Odiff que te permite hacer la comparación de imágenes no en JavaScript, sino en un lenguaje nativo más eficiente en términos de rendimiento y te ahorra mucho tiempo y te permite probar las capturas de pantalla que deseas y hacerlo rápidamente. Así que probablemente se nos acabe el tiempo. Así que discutamos una conclusión y la clave para una regresión visual sin problemas. Necesitas asegurarte de que tus tareas se ejecuten en el mismo entorno y debes asegurarte de que no haya contenido inestable en tu página, incluso si estás utilizando servicios de regresión visual. Y también debes probar tu interfaz de usuario en la resolución que utilizan tus usuarios y no solo en una resolución rápida o amigable para algún servicio. Y eso es todo. Estoy feliz de estar aquí. ¡Gracias y adiós!