New
Code coverage with Storybook test runnerAutomate with Chromatic
Star74,802
Back to Visual Testing Handbook
React
Chapters
  • Introducción
  • Exploradores de componentes
  • Flujo de trabajo
  • TDD Visual
  • Automatizar
  • Conclusión

Conclusión

Di adiós a los errores visuales

Los desarrolladores dedican el 21% de su tiempo a corregir errores. Depurar la apariencia de la interfaz de usuario puede resultar especialmente frustrante. Las reproducciones requieren que inicie diferentes navegadores, coloque su aplicación en el estado correcto y avance penosamente por el DOM. Lo que está en juego también es mayor; los errores no detectados cuestan 5-10x más tiempo para corregirlos en producción que en QA.

Es de sentido común que miles de equipos de frontend realicen pruebas visuales con Storybook. Storybook te ayuda a construir componentes y escribir pruebas visuales. La ejecución de pruebas a nivel de componente te permite identificar la causa raíz de un error. Tomar instantáneas te ayuda a detectar regresiones automáticamente. Eso significa que la gente puede enviar interfaces de usuario sin preocuparse por los errores polizones.

Esta guía te presentó los conceptos básicos de las pruebas visuales. Tom y yo esperamos que puedan aprovechar estos aprendizajes en sus propios proyectos. Únase a la lista de correo de Storybook para recibir notificaciones sobre más artículos y guías útiles como este.

Código de muestra para este tutorial

Si lo ha estado siguiendo, su repositorio y Storybook implementado deberían verse así:

Más recursos

¿Quieres sumergirte más profundo? A continuación, se incluyen algunos recursos útiles adicionales:

Is this free guide helping you? Tweet to give kudos and help other devs find it.
✍️ Edit on GitHub – PRs welcome!
Join the community
5,870 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI