Cómo mantenemos la calidad de su academia mediante pruebas de regresión visual

Recientemente hemos introducido nuestra nueva interfaz de academia. Durante el desarrollo, empezamos a utilizar algunas técnicas nuevas que nos ayudan a mejorar nuestro flujo de trabajo y a mantener un alto nivel de calidad en nuestro producto. Evitamos que se produzcan errores trabajando de forma basada en componentes y realizando pruebas a menudo para detectar cambios visuales no intencionados (regresiones visuales)..

Desarrollo basado en componentes

En los últimos años, una gran tendencia en el desarrollo de interfaces de usuario ha sido el desarrollo orientado a componentes (DDC). Los componentes son las piezas más pequeñas de funcionalidad autónoma que añaden valor por sí mismas. CDD se ancla en esto mediante la creación de un proceso de construcción que funciona de abajo hacia arriba. Primero se crean pequeños componentes que se unen a otros más grandes, que juntos forman una función o una página. Piense en ello como una bicicleta que se compone de piezas más pequeñas. Empiezas creando dos ruedas, luego un cuadro. Añade un volante, unos pedales y una cadena. Ahora empieza a parecerse a una bicicleta. Así es como desarrollamos también la interfaz de la academia.

Trabajar en función de los componentes nos reporta numerosas ventajas:

• Los componentes son reutilizables. Si construyes una rueda, puedes utilizarla para construir una bicicleta más grande o más pequeña, o tal vez incluso un triciclo.

• Los componentes pequeños son fáciles de entender.

• Los componentes son fácilmente comprobables. Puedes probar si la rueda funciona, no tienes que preocuparte de la bicicleta entera todavía.

• Trabajar con componentes a menudo acelera nuestro proceso de desarrollo al proporcionar soluciones plug and play.

• El desarrollo está enfocado. Es fácil hacer un seguimiento de las variaciones de los componentes.

• Hay herramientas disponibles para hacer un seguimiento fácilmente de todos los componentes disponibles que han sido creados por colegas.

• Trabajar con componentes a menudo acelera nuestro proceso de desarrollo al proporcionar soluciones plug and play.

Algunos ejemplos de componentes que hemos creado son: un botón, una ventana emergente, una respuesta de opción múltiple y también una página de inicio de sesión completa.

Storybook nos permite desarrollar componentes fuera de nuestra aplicación en un entorno aislado, sin preocuparnos de dependencias o de romper la aplicación.

La historia de nuestra interfaz en Storybook

Después de crear montones de componentes que son la columna vertebral de nuestra interfaz, los organizamos en Storybook. Storybook es un explorador de componentes, o biblioteca de componentes. Es una forma eficiente de realizar un seguimiento de todos nuestros componentes. Cada componente tiene su propia historia en Storybook, donde se pueden ver todas las variaciones posibles de un componente: 

Componente de botón en Storybook

Para un componente de botón, por ejemplo, es posible ver un botón predeterminado, un botón elevado, un botón no elevado y un botón desactivado. También es posible interactuar con el componente para ver cómo cambia su estado o comportamiento. Escriba algo en el formulario de acceso, por ejemplo, y los campos de entrada le dirán si la entrada es válida:

Componente de formulario de inicio de sesión en Storybook

Storybook nos permite desarrollar componentes fuera de nuestra aplicación en un entorno aislado, sin preocuparnos de dependencias o de romper la aplicación.

Utilizamos Storybook como herramienta de diseño, ya que adoptamos una estrategia de diseño basada en historias. Cuando diseñamos, estamos creando directamente algo que es valioso. En lugar de desperdiciar tiempo con Photoshop, como solíamos hacer antes. Cuando añadimos historias de componentes a Storybook, estamos contribuyendo automáticamente a una guía de estilo viva o a una biblioteca de interfaces de usuario. Esto significa que un desarrollador puede elegir fácilmente entre una amplia gama de componentes prefabricados para añadir a una función que está creando. Esto hace que nuestra interfaz sea coherente y relativamente barata de desarrollar:

Componente de página de inicio de sesión en Storybook

Mediante complementos, ampliamos Storybook para poder probar la accesibilidad de cada componente. Asegurándonos de que la interfaz sigue siendo accesible para usuarios con ciertas restricciones:

Comprobación de la accesibilidad en Storybook

Pruebas visuales de regresión con Percy

Antes hemos hablado de las regresiones visuales, que son cambios visuales involuntarios. Para darnos cuenta de estos cambios visuales, utilizamos una herramienta llamada Percy. Percy es una herramienta de pruebas de regresión visual que sólo se preocupa por la integridad visual.

Con Storybook puedo construir y estilizar componentes de forma aislada, y siempre tengo una visión general de los diferentes escenarios que he diseñado. Con la ayuda de Percy, siempre sé el impacto de los cambios que hago.
Anouk
Front-End Developer & UX Designer

Para cada componente que hemos desarrollado en nuestra biblioteca de componentes Storybook, se hace una captura de pantalla. Cuando cambiamos un componente, se hace una nueva captura de pantalla, y las dos se comparan entre sí. Las diferencias se marcan en rojo para mostrar claramente lo que ha cambiado:

Las regresiones se hacen visibles en Percy

Las diferencias entre la versión antigua y la nueva están marcadas en rojo

Percy se vincula directamente a nuestro proceso de integración continua (el flujo que va de la idea a la realidad), notificándonos las regresiones visuales antes de que los cambios entren en funcionamiento. Tras ser revisados por uno de los diseñadores, los cambios se aceptan o se rechazan. Percy también permite debatir sobre un determinado cambio:

Percy se integró en nuestra tubería diciéndonos que algo necesita revisión

Todo esto nos ayuda a evitar que los cambios visuales no deseados lleguen a ustedes, nuestros usuarios finales. ¿Se ha colado algún error visual? Siga leyendo para saber cómo lo solucionamos en este artículo.