博客

视觉测试新闻、教程和最佳实践

Storybook 已成为开发、记录与测试隔离 UI 组件的标准环境。对于维护设计系统的团队而言,每一个 story 都自然成为视觉测试的目标:在精确状态下渲染的组件,不依赖于应用上下文,完全可重现。这种细粒度允许在按钮或卡片层级就检测到视觉回归,远在它们扩散到组装后的页面之前。

本页文章从视觉测试的角度探讨 Storybook 生态:与 Chromatic(Storybook 团队的原生工具)的集成、Loki、Storyshots 或 Playwright component testing 等替代方案、装饰器与状态(hover、focus、dark mode)的处理、使 story 具备确定性的最佳实践。我们也讨论了一个反复出现的问题:是仅测试 story 中的组件,还是同时测试组装它们的真实页面?两种方案是互补的,这正是 Delta-QA 的定位所在——专注于真实条件下渲染的网页测试,与 Storybook 提供的组件覆盖形成补充。本页将帮助您在两个层级之间构建一致的策略。