自动化可视化测试
在自然开发过程中，Bug 是不可避免的。可视化测试自动化使用机器来检测 UI 外观的变化，以供人工审查。
简而言之，每个组件变体都会拍摄图像快照。这作为可视化测试的“基线”。每次提交时，都会捕获新的快照，然后逐像素与基线进行比较。如果 UI 发生变化，您将收到通知，以审查它们是 Bug 还是有意的更新。
在 GitHub 上设置仓库
在开始之前，我们的本地 CommentList 代码需要与远程版本控制服务同步。
前往 GitHub 并在此处 创建一个新的仓库 用于该项目。将仓库命名为 "commentlist"，与我们的本地项目相同。
然后按照说明设置仓库。将 your-username 替换为您的 GitHub 账户名。
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/your-username/commentlist.git
git push -u origin main
设置 Chromatic
我们将使用 Storybook 维护者提供的 Chromatic 来演示图像快照过程。前往 chromatic.com 并使用您的 GitHub 账户注册。
从那里，选择您刚刚创建的仓库。
UI 测试在云浏览器环境中捕获每个 Story 的图像快照。每当您推送代码时，Chromatic 都会生成一组新的快照，并将其与基线进行比较。如果存在视觉变化，您需要验证它们是否是故意的。
建立基线
将 Chromatic 作为开发包添加到您的项目中
yarn add --dev chromatic
安装完成后，我们就拥有了所需的一切。现在是将更改提交并推送到远程仓库的绝佳时机。
git add .
git commit -m "Added Chromatic"
git push
使用 chromatic 命令构建和发布我们的 Storybook。不要忘记将 project-token 替换为 Chromatic 在网站上提供的令牌。
npx chromatic --project-token=<project-token>
通过这一个命令，您发布了您的 Storybook，触发 Chromatic 捕获每个 Story 的图像快照（在标准化的云浏览器中），并将该快照设置为基线。
后续构建将生成新的快照，这些快照将与现有基线进行比较，以检测 UI 变化。
运行测试
每次拉取请求包含 UI 更改时，无论大小，运行可视化测试都很有帮助。Chromatic 将新的快照与先前构建中的现有基线进行比较。
让我们做一个小的 UI 更改来演示这个概念。
git checkout -b change-commentlist-outline
调整 CommentList 组件
import styled, { createGlobalStyle } from "styled-components";
interface Author {
name: string;
avatar: string;
}
interface Comment {
text: string;
author: Author;
}
export interface CommentListProps {
/**
* Is the component in the loading state
*/
loading?: boolean;
/**
* Total number of comments
*/
totalCount?: number;
/**
* List of comments
*/
comments?: Comment[];
}
const CommentListWrapper = styled.div`
font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
display: inline-block;
vertical-align: top;
width: 265px;
`;
const CommentItem = styled.div`
font-size: 12px;
line-height: 14px;
clear: both;
height: 48px;
margin-bottom: 10px;
box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px 0;
background: linear-gradient(
120deg,
rgba(248, 248, 254, 0.95),
rgba(250, 250, 250, 0.95)
);
border-radius: 48px;
+ border: 4px solid red;
+ font-weight: bold;
`;
const Avatar = styled.div`
float: left;
position: relative;
overflow: hidden;
height: 48px;
width: 48px;
margin-right: 14px;
background: #dfecf2;
border-radius: 48px;
`;
const AvatarImg = styled.img`
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: 1;
background: #999;
`;
const Message = styled.div`
overflow: hidden;
padding-top: 10px;
padding-right: 20px;
`;
const Author = styled.span`
font-weight: bold;
`;
const CommentText = styled.span``;
const GlobalStyle = createGlobalStyle`
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,400i,800');
`;
/**
* The Commentlist component should display the comments from the user.
*/
export default function CommentList({
loading = false,
comments = [],
totalCount = 10,
}: CommentListProps) {
if (loading) {
return <div>loading</div>;
}
if (comments.length === 0) {
return <div>empty</div>;
}
return (
<>
<GlobalStyle />
<CommentListWrapper>
{comments.map(({ text, author: { name, avatar } }) => (
<CommentItem key={`comment_${name}`}>
<Avatar>
<AvatarImg src={avatar} />
</Avatar>
<Message>
<Author>{name}</Author> <CommentText>{text}</CommentText>
</Message>
</CommentItem>
))}
</CommentListWrapper>
</>
);
}
提交更改，将其推送到仓库并运行 Chromatic
git commit -am "make CommentList sparkle"
git push -u origin change-commentlist-outline
npx chromatic --project-token=<project-token>
在您的 GitHub 仓库中为新分支打开一个拉取请求。
Chromatic 检测到 UI 更改，供您审核！转到 PR 检查并单击 “🟡 UI Test” 以查看更改列表。构建将被标记为“未审核”，更改列在“Tests”表格中。
审核更改
自动化可视化测试确保组件不会意外更改。但这仍然取决于开发人员来确定更改是否是故意的。
如果更改是故意的，我们接受快照以更新基线。这意味着将来的测试将与带有红色边框的 CommentList 进行比较。
如果更改是无意的，则需要修复。我们的设计师认为 ✨majestic✨ 红色边框非常糟糕，所以让我们撤消它。
合并更改
一旦 Bug 被修复并且基线是最新的，您就可以将代码合并回目标分支。Chromatic 将在分支之间转移任何已接受的基线，以便您只需接受一次基线。
持续集成
每次我们进行更改时都在本地运行此命令很繁琐。生产团队会在代码推送到其 CI/CD 管道中时触发可视化测试运行。虽然我们不会在本教程中进行设置，但您可以在 Chromatic 的 CI 文档 中了解更多信息。
您的旅程开始
《可视化测试手册》展示了领先的前端团队如何测试 UI 外观。这是一种实用的方法来验证 UI 是否与预期设计相符，并在一段时间内保持无 Bug 状态。
我们希望本指南能启发您自己的可视化测试策略。最后一章总结了完整的示例代码和有用的资源。