结论

告别视觉 bug

开发人员花费21%的时间修复 bug。UI 外观的调试尤其令人沮丧。要重现 bug，您需要启动不同的浏览器，让您的应用程序进入正确的状态，并逐步检查 DOM。风险也更高；在生产环境中修复未捕获的 bug 所花费的时间是在 QA 中修复的5-10 倍。

因此，数千个前端团队使用 Storybook 进行视觉测试也就不足为奇了。Storybook 帮助您构建组件并编写视觉测试。在组件级别运行测试可以帮助您精确定位 bug 的根本原因。拍摄屏幕截图有助于您自动捕获回归。这意味着开发人员可以发布 UI，而不必担心隐藏的 bug。

本指南向您介绍了视觉测试的基础知识。Tom 和我希望您能在自己的项目中将这些知识应用到实践中。加入 Storybook 邮件列表，以便及时收到更多类似的文章和指南的通知。

本教程的示例代码

如果您一直关注，您的存储库和已部署的 Storybook 应该如下所示：