Pruebas Visuales: Optimiza Storybook y Gana

Rate this content
Bookmark

Una cosa en la que la mayoría de las personas están de acuerdo es que las interfaces de usuario tienen múltiples dimensiones de complejidad. Imagina que estás almorzando con algunos de tu equipo o familia, y recibes un mensaje de Slack que indica que una parte del sitio no funciona. El anuncio ya no se carga en tu sitio de noticias generador de dinero que tiene millones de usuarios mensuales. O tu formulario de inicio de sesión se carga infinitamente después de que un usuario intenta iniciar sesión, y nadie puede acceder a la aplicación. La lógica del backend funciona y todas las solicitudes de API devuelven respuestas 200. Resulta que nos perdimos un manejador de estado de carga para el componente, y la interfaz de usuario no se renderiza correctamente. ¿Cómo gestionamos todo eso? El enfoque convencional es construir el componente en la página de la aplicación donde se utiliza por primera vez y probar manualmente o utilizar pruebas de integración para verificar la interfaz de usuario. Este enfoque dificulta la verificación de todos los estados del componente. En lugar de todo este abrumamiento, quieres una simple comparación de tu interfaz de usuario y cómo se ve ahora después de hacer cambios. ¡Aquí es donde entran Storybook + una herramienta de pruebas de regresión visual!

This talk has been presented at TestJS Summit 2023, check out the latest edition of this JavaScript Conference.

FAQ

Storybook es una herramienta que permite a los desarrolladores construir interfaces de usuario (UI) de forma aislada. Facilita la creación y prueba de componentes individuales sin necesidad de preocuparse por la lógica del back-end, llamadas a API o bases de datos, simplificando así el proceso de desarrollo.

Chromatic es una herramienta que crea pruebas automatizadas de UI. Se integra con Storybook tomando un Storybook construido estáticamente, y compara visualmente la UI del proyecto con estados definidos previamente, detectando cambios y notificando al desarrollador de discrepancias.

Chromatic ayuda a prevenir problemas de UI en producción al comparar instantáneas de la UI con versiones anteriores y notificar sobre cambios. Esto elimina la necesidad de pruebas manuales extensivas y ayuda a asegurar que la UI se mantenga consistente a través de diferentes navegadores y dispositivos.

Storybook soluciona problemas como la dificultad de probar múltiples estados y variantes de UI, la gestión de datos inconsistentes y la integración con componentes de terceros. Permite a los desarrolladores construir y probar componentes de manera aislada, mejorando la eficiencia y precisión del desarrollo.

Chromatic utiliza tecnología de comparación visual para detectar incluso pequeños cambios de píxeles en la UI. Esto es crucial para capturar diferencias que podrían no ser notadas por una revisión humana, asegurando que cualquier cambio involuntario sea identificado y corregido antes de la producción.

Se recomienda cargar imágenes y otros recursos como activos estáticos dentro de Storybook, o simular solicitudes de red y datos entrantes para mantener la consistencia en las instantáneas de UI. Esto asegura que las pruebas sean confiables y no varíen debido a cambios externos no controlados.

Las pruebas de interacción en Storybook permiten simular y automatizar flujos de trabajo de usuarios dentro de la propia plataforma. Esto ayuda a asegurar que todos los aspectos de la UI funcionen correctamente en escenarios del mundo real, mejorando la fiabilidad del software.

Reuben Ellis
Reuben Ellis
9 min
07 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Las pruebas de interfaz de usuario son difíciles, pero Storybook y Chromatic simplifican el proceso al permitirte construir y probar tu interfaz de usuario de forma aislada. Chromatic compara los cambios de la interfaz de usuario, detecta incluso las diferencias visuales más pequeñas y elimina la necesidad de pruebas manuales. La carga de imágenes y la simulación de flujos de trabajo de usuario en Storybook aseguran pruebas consistentes. Las pruebas de interacción cubren los flujos de trabajo del usuario y se pueden utilizar para componentes complejos, resolviendo problemas y creando casos de prueba.

1. Introducción a Storybook y Chromatic

Short description:

Las pruebas de UI son difíciles. Hay dos problemas: la UI rota y las pruebas de integración inestables. Storybook te permite construir tu UI de forma aislada, simplificando el proceso. Chromatic crea pruebas automatizadas de tu UI. Asegura que tu UI no esté fallando en producción.

Hola, soy Ruben, y soy el ingeniero de soluciones líder en Chromatic, y somos los mantenedores de Storybook. Así que, voy a empezar con una historia. Este eres tú, y las pruebas de UI testing son difíciles. Hay tantos estados y variantes, responsividad, estados de carga, todo es un poco confuso y todo se quema hasta el suelo. Bueno, esperemos que no, pero eso es lo que termina sucediendo a veces.

Así que, realmente, hay dos problemas. Digamos que esta es tu tercera semana seguida que recibes una llamada y la UI está rota en el sitio web y necesitas ir a arreglarlo, o peor aún, el sitio está completamente caído. Ahora, eso no es divertido para nadie. Y luego, por otro lado, cuando no te llaman durante el fin de semana para solucionar problemas de UI, estás lidiando con pruebas de integración inestables, y eso tampoco es divertido. Entonces, ¿cuándo te diviertes en tu trabajo? No parece que te estés divirtiendo en absoluto.

Idealmente, nos alejamos de ese estado complicado y lo quemamos para realmente simplificarlo. Solo quieres saber cómo se ve tu UI y compararlo con cómo se ve ahora. Y storybook es la primera parte de la solución a ese problema. Storybook te permite construir tu UI de forma aislada, y lo simplifica porque no tienes que preocuparte por la lógica del back-end y las llamadas a la API, bases de datos, nada de eso. Solo estás construyendo tu UI. Y funciona. Así que, acelera el proceso. Y luego, chromatic es el otro lado de eso, donde crea pruebas automatizadas de tu UI. Ahora, ¿cómo se ve eso? Te voy a mostrar un ejemplo.

Así que, aquí tenemos una aplicación llamada Mealdrop, y es un clon de Uber Eats. Storybook te permite crear todo tipo de componentes. Tienes tus componentes atómicos, por ejemplo, este botón, y storybook tiene controles que son esencialmente las props de tu componente y te permite jugar y prototipar cosas todo dentro del entorno de storybook en tu navegador. Y también puedes crear componentes a nivel de página. Por ejemplo, como la página de inicio. O una página de detalles de restaurante. Y esto tiene todo en él, ¿verdad? Toda la estructura de tu página. Y la mejor parte de ello es que está aislado, y no tienes que preocuparte por datos inconsistentes o algo por el estilo. Ahora, eso resuelve el primer problema. Pero no resuelve el segundo problema de cómo diablos... ¿Qué haces para asegurarte de que tu UI no esté fallando en producción? Ahí es donde entra chromatic.

2. Comparación de UI con Chromatic

Short description:

Chromatic compara tu UI creando una línea de base y tomando instantáneas de cualquier cambio de código. Te notifica de cualquier diferencia, eliminando la necesidad de pruebas manuales en diferentes navegadores y dispositivos. Chromatic puede detectar incluso cambios visuales menores que pueden pasar desapercibidos para el ojo humano. Storybook y Chromatic trabajan juntos para resolver el desafío de tomar instantáneas estáticas de UI dinámica, asegurando pruebas consistentes sin ajustes frecuentes.

Chromatic toma tu storybook construido estáticamente, y compara tu UI. Y cómo lo hace es que primero creas un estado definido o una línea de base de cómo se ve tu UI o cómo esperas que se vea. Y luego, cada vez que cambias tu código después de eso, tomará una nueva imagen o una instantánea y la comparará con la instantánea antigua. Y cada vez que hay un cambio, recibes una notificación dentro de chromatic, y luego ya no tienes que preocuparte por testing manualmente, comprobando diferentes navegadores, diferentes vistas, pidiendo a tu compañero de trabajo su teléfono Android y comprobando si funciona en eso. Sí, he hecho todo eso. No es divertido. Así que lo realmente interesante aquí es que chromatic puede ser tan específico o tan laxo como quieras que sea. Por defecto, es realmente estricto. Así que aparentemente, a simple vista, aquí no cambió nada. Se ve exactamente igual, ¿verdad? Si te enfocas, antes de que incluso vaya a la sección que está resaltada, chromatic sabe que hay una ligera diferencia en la imagen de la hamburguesa. Y si te enfocas en esa hamburguesa, hay ligeros cambios de píxeles. Y así detectará ese cambio visual menor que no notarías con tus ojos. Quiero decir, podrías. Mis ojos no son tan buenos. Así que me lo perdería. Ahora esto me lleva a mi segundo punto. ¿Cómo resolvemos eso en un... ¿Cómo tomas una UI dinámica y tomas una instantánea estática y haces que funcione de manera consistente para que no tengas que arreglar todas estas pruebas cada vez? Y ahí es donde Storybook entra con chromatic. Así que tienes estas páginas. Si carga. Ahí vamos. Así que la razón por la que esa imagen cambia es porque tienes... Así que estamos cargando esta imagen desde Unsplash, que es un recurso de red. Y Unsplash puede cambiar esa imagen en cualquier momento por cualquier razón. La URL es exactamente la misma. Así que por lo que sabemos, nada cambió con esta imagen. Pero realmente sí lo hizo. Y podría ser más drástico que esto. Pero afortunadamente en este caso no lo es. Son solo algunos píxeles menores.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Solicitudes de Red con Cypress
TestJS Summit 2021TestJS Summit 2021
33 min
Solicitudes de Red con Cypress
Top Content
Cecilia Martinez, a technical account manager at Cypress, discusses network requests in Cypress and demonstrates commands like cydot request and SCI.INTERCEPT. She also explains dynamic matching and aliasing, network stubbing, and the pros and cons of using real server responses versus stubbing. The talk covers logging request responses, testing front-end and backend API, handling list length and DOM traversal, lazy loading, and provides resources for beginners to learn Cypress.
Pruebas de ciclo completo con Cypress
TestJS Summit 2022TestJS Summit 2022
27 min
Pruebas de ciclo completo con Cypress
Top Content
Cypress is a powerful tool for end-to-end testing and API testing. It provides instant feedback on test errors and allows tests to be run inside the browser. Cypress enables testing at both the application and network layers, making it easier to reach different edge cases. With features like AppActions and component testing, Cypress allows for comprehensive testing of individual components and the entire application. Join the workshops to learn more about full circle testing with Cypress.
Desarrollo Efectivo de Pruebas
TestJS Summit 2021TestJS Summit 2021
31 min
Desarrollo Efectivo de Pruebas
Top Content
This Talk introduces Test Effective Development, a new approach to testing that aims to make companies more cost-effective. The speaker shares their personal journey of improving code quality and reducing bugs through smarter testing strategies. They discuss the importance of finding a balance between testing confidence and efficiency and introduce the concepts of isolated and integrated testing. The speaker also suggests different testing strategies based on the size of the application and emphasizes the need to choose cost-effective testing approaches based on the specific project requirements.
Playwright Test Runner
TestJS Summit 2021TestJS Summit 2021
25 min
Playwright Test Runner
Top Content
The Playwright Test Runner is a cross-browser web testing framework that allows you to write tests using just a few lines of code. It supports features like parallel test execution, device emulation, and different reporters for customized output. Code-Gen is a new feature that generates code to interact with web pages. Playwright Tracing provides a powerful tool for debugging and analyzing test actions, with the ability to explore trace files using TraceViewer. Overall, Playwright Test offers installation, test authoring, debugging, and post-mortem debugging capabilities.
Todos pueden escribir pruebas fácilmente
TestJS Summit 2023TestJS Summit 2023
21 min
Todos pueden escribir pruebas fácilmente
Playwright is a reliable end-to-end testing tool for modern web apps that provides one API, full isolation, fast execution, and supports multiple languages. It offers features like auto-weighting, retrying assertions, seamless testing of iframes and shadow DOM, test isolation, parallelism, and scalability. Playwright provides tools like VS Code extension, UiMode, and Trace Viewer for writing, debugging, and running tests. Effective tests prioritize user-facing attributes, use playwright locators and assertions, and avoid testing third-party dependencies. Playwright simplifies testing by generating tests, providing code generation and UI mode, and allows for easy running and debugging of tests. It helps in fixing failed tests and analyzing DOM changes, fixing locator mismatches, and scaling tests. Playwright is open source, free, and continuously growing.

Workshops on related topic

Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
React Summit 2023React Summit 2023
151 min
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
Top Content
Featured Workshop
Josh Justice
Josh Justice
La Biblioteca de Pruebas de React es un gran marco para las pruebas de componentes de React porque responde muchas preguntas por ti, por lo que no necesitas preocuparte por esas preguntas. Pero eso no significa que las pruebas sean fáciles. Todavía hay muchas preguntas que tienes que resolver por ti mismo: ¿Cuántas pruebas de componentes debes escribir vs pruebas de extremo a extremo o pruebas de unidad de nivel inferior? ¿Cómo puedes probar una cierta línea de código que es difícil de probar? ¿Y qué se supone que debes hacer con esa persistente advertencia de act()?
En esta masterclass de tres horas, presentaremos la Biblioteca de Pruebas de React junto con un modelo mental de cómo pensar en el diseño de tus pruebas de componentes. Este modelo mental te ayudará a ver cómo probar cada bit de lógica, si debes o no simular dependencias, y ayudará a mejorar el diseño de tus componentes. Te irás con las herramientas, técnicas y principios que necesitas para implementar pruebas de componentes de bajo costo y alto valor.
Tabla de contenidos- Los diferentes tipos de pruebas de aplicaciones de React, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos DOM para verificar e interactuar con ellos- El valor de los mocks y por qué no deben evitarse- Los desafíos con la asincronía en las pruebas de RTL y cómo manejarlos
Requisitos previos- Familiaridad con la construcción de aplicaciones con React- Experiencia básica escribiendo pruebas automatizadas con Jest u otro marco de pruebas unitarias- No necesitas ninguna experiencia con la Biblioteca de Pruebas de React- Configuración de la máquina: Node LTS, Yarn
Cómo empezar con Cypress
TestJS Summit 2022TestJS Summit 2022
146 min
Cómo empezar con Cypress
Featured WorkshopFree
Filip Hric
Filip Hric
La web ha evolucionado. Finalmente, también lo ha hecho el testing. Cypress es una herramienta de testing moderna que responde a las necesidades de testing de las aplicaciones web modernas. Ha ganado mucha popularidad en los últimos años, obteniendo reconocimiento a nivel mundial. Si has estado esperando aprender Cypress, ¡no esperes más! Filip Hric te guiará a través de los primeros pasos sobre cómo empezar a usar Cypress y configurar tu propio proyecto. La buena noticia es que aprender Cypress es increíblemente fácil. Escribirás tu primer test en poco tiempo y luego descubrirás cómo escribir un test de extremo a extremo completo para una aplicación web moderna. Aprenderás conceptos fundamentales como la capacidad de reintentar. Descubre cómo trabajar e interactuar con tu aplicación y aprende cómo combinar pruebas de API y de UI. A lo largo de todo este masterclass, escribiremos código y realizaremos ejercicios prácticos. Saldrás con una experiencia práctica que podrás aplicar a tu propio proyecto.
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
React Summit 2022React Summit 2022
117 min
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
Top Content
WorkshopFree
Yevheniia Hlovatska
Yevheniia Hlovatska
A diferencia de las pruebas unitarias, las pruebas de extremo a extremo buscan interactuar con su aplicación tal como lo haría un usuario real. Y como todos sabemos, puede ser bastante desafiante. Especialmente cuando hablamos de aplicaciones móviles.
Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador.
Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí como su herramienta de pruebas E2E.
Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes.
Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- Instalar antes de la masterclass
Masterclass de Pruebas de API con Postman
TestJS Summit 2023TestJS Summit 2023
48 min
Masterclass de Pruebas de API con Postman
Top Content
WorkshopFree
Pooja Mistry
Pooja Mistry
En el panorama siempre en evolución del desarrollo de software, garantizar la fiabilidad y funcionalidad de las API se ha vuelto primordial. "Pruebas de API con Postman" es una masterclass completa diseñada para equipar a los participantes con los conocimientos y habilidades necesarios para sobresalir en las pruebas de API utilizando Postman, una herramienta poderosa ampliamente adoptada por profesionales en el campo. Esta masterclass profundiza en los fundamentos de las pruebas de API, avanza a técnicas de prueba avanzadas y explora la automatización, las pruebas de rendimiento y el soporte multiprotocolo, proporcionando a los asistentes una comprensión holística de las pruebas de API con Postman.
Únete a nosotros para esta masterclass para desbloquear todo el potencial de Postman para las pruebas de API, agilizar tus procesos de prueba y mejorar la calidad y fiabilidad de tu software. Ya seas un principiante o un probador experimentado, esta masterclass te equipará con las habilidades necesarias para sobresalir en las pruebas de API con Postman.
Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Pruebas de Aplicaciones Web utilizando Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Pruebas de Aplicaciones Web utilizando Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
Este masterclass te enseñará los conceptos básicos de cómo escribir pruebas de extremo a extremo utilizando Cypress Test Runner.
Cubriremos la escritura de pruebas, abarcando todas las características de la aplicación, estructurando las pruebas, interceptando solicitudes de red y configurando los datos del backend.
Cualquier persona que conozca el lenguaje de programación JavaScript y tenga NPM instalado podrá seguir el masterclass.