Visual Testing Handbook
  • Introduction
  • Component explorers
  • Workflow
  • Visual TDD
  • Automate
  • Conclusion
Framework:
React

Conclusion

Say bye to visual bugs

Developers spend 21% of their time fixing bugs. Debugging UI appearance can be especially frustrating. Reproductions require you to spin up different browsers, get your app into the right state, and trudge through DOM. The stakes are higher too; uncaught bugs cost 5-10x more time to fix in production than in QA.

It's common sense then that thousands of frontend teams visual test using Storybook. Storybook helps you build components and write visual tests. Running tests at the component level allows you to pinpoint the root cause of a bug. Taking image snapshots helps you catch regressions automatically. That means folks can ship UIs without worrying about stowaway bugs.

This guide introduced you to the basics of visual testing. Tom and I hope you can build upon these learnings in your own projects. Join the Storybook mailing list to get notified of more helpful articles and guides like this.

Sample code for this tutorial

If you've been following along, your repository and deployed Storybook should look like this:

More resources

Want to dive deeper? Here are some additional helpful resources:

  • Official Storybook docs has API documentation, examples, and the addon gallery.
  • How to actually test UIs is a summary of practical UI testing strategies from Shopify, Adobe, Twilio, and more.
  • Discord chat puts you in contact with the Storybook community and maintainers.
  • Blog showcases the latest releases and features to streamline your UI development workflow.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
✍️ Edit on GitHub – PRs welcome!
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookDocsTutorialsReleasesAddonsBlogGet involvedUse casesSupportTeam
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify