返回教程列表

视觉测试手册

视觉测试是一种实用而精确的方法,用于验证 UI 组件的外观。Slack、Lonely Planet 和 Walmart 等公司都在实践它。本手册概述了 Storybook 中的视觉测试。
语言英语西班牙语韩语
33+
贡献者
6
章节
Visual Testing Handbook

概览

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

目录
  1. 1
    引言
    测试用户界面的实用方法
  2. 2
    组件探索器
    UI 开发和视觉测试工具
  3. 3
    工作流程
    构建组件的测试驱动工作流程
  4. 4
    视觉 TDD
    编写你的第一个视觉测试
  5. 5
    自动化
    自动化视觉测试以捕获回归问题
  6. 6
    结论
    告别视觉错误

你将构建什么

React

CommentList

CommentList 是你可能在任何聊天工具中找到的列表组件。跟着我们学习如何使用 Storybook 构建不同的 UI 变体。然后,我们将逐步介绍手动和自动视觉测试的过程。

作者
loading
Dominic Nguyen
Storybook 设计
loading
Tom Coleman
Storybook 核心
加入社区
6,975名开发者及更多
原因为何选择 Storybook组件驱动 UI
开源软件
Storybook - Storybook 中文

特别鸣谢 Netlify CircleCI