返回教程

视觉测试手册

视觉测试是一种务实而精确的方式来验证 UI 组件的外观。Slack、Lonely Planet 和 Walmart 等公司都在实践它。本手册将为您概述 Storybook 中的视觉测试。
语言EnglishEspañol한국어
33+
贡献者
6
章节
Visual Testing Handbook

概述

什么是视觉测试?视觉测试通过在一致的浏览器环境中捕获渲染 UI 的图像来验证其外观。然后将该图像与之前的图像(基线)进行比较,以检测视觉变化。如今的用户界面比以往任何时候都更复杂、具有更多状态且更加个性化。视觉测试可帮助您确保您的应用在每次发布时外观都正确。

目录
  1. 1
    简介
    测试用户界面的务实方法
  2. 2
    组件浏览器
    用于 UI 开发和视觉测试的工具
  3. 3
    工作流
    用于构建组件的测试驱动工作流程
  4. 4
    视觉 TDD
    编写您的第一个视觉测试
  5. 5
    自动化
    自动化视觉测试以捕获回归
  6. 6
    结论
    告别视觉 bug

您将构建什么

React

CommentList

CommentList 是一个列表组件,您可以在任何聊天工具中找到它。请跟随我们演示如何使用 Storybook 构建离散的 UI 变体。然后,我们将逐步介绍手动和自动进行视觉测试的过程。

作者
loading
Dominic Nguyen
Storybook 设计
loading
Tom Coleman
Storybook 核心
加入社区
7,424开发者及更多
原因为什么选择 Storybook组件驱动的 UI
文档指南教程更新日志遥测
社区插件参与进来博客
展示探索关于
开源软件
Storybook - Storybook 中文

特别感谢 Netlify CircleCI