# UI 审查 - Chromatic

{% hint style="info" %}
对应的[官方页面地址](https://contributing.bitwarden.com/contributing/pull-requests/chromatic)
{% endhint %}

我们使用一种名为 [Chromatic](https://www.chromatic.com/) 的工具，对所有 Storybook Story 进行自动快照测试。这使我们能够以自动化的方式快速捕捉设计回归。作为其中的一部分，我们还使用 Chromatic 来审查和批准可视化更改。Bitwarden GitHub 组织的成员可以使用他们的 GitHub 账户登录 Chromatic。

## 检查​ <a href="#checks" id="checks"></a>

Chromatic 将审核流程分为两个部分：用户界面测试 (UI Tests) 和用户界面审核 (UI Review)。这些在 PR 上表现为两种不同的检查，需要以不同的方式处理。下面详细介绍了处理每一项的期望。

### UI 测试​ <a href="#ui-tests" id="ui-tests"></a>

> UI 测试捕获云浏览器环境中每个 Story 的视觉快照。每当您推送代码时，Chromatic 都会生成一组新的快照并将它们与基线进行比较。如果有视觉变化，您需要验证它们是否是故意的。
>
> *<https://www.chromatic.com/docs/test>*

### UI 审查​ <a href="#ui-review" id="ui-review"></a>

> UI 测试可以保护您免受意外回归的影响。但是，在发布之前，您需要邀请开发人员、设计师和产品经理检查 UI 以确保其正确。
>
> UI 审查创建由 PR 引入的精确视觉更改的变更集。您指定审阅者，他们可以对不太正确的更改发表评论并请求调整。可以将其视为代码审查，但针对的是您的 UI。
>
> *<https://www.chromatic.com/docs/review>*

## 审查​ <a href="#reviewing" id="reviewing"></a>

如果存在视觉变化，Chromatic 会将拉取请求标记为待处理。每个拉取请求作者都有责任审查 Chromatic 中的 UI 测试结果，并批准更改是否是有意的。

通过单击拉取请求中的 **UI 测试**检查，可以轻松访问测试。

<figure><img src="https://raw.githubusercontent.com/bitwarden/contributing-docs/master/docs/contributing/pull-requests/ui-tests.png" alt=""><figcaption></figcaption></figure>

UI 审核所需的操作取决于失败的案例：

* 组件库应由设计部门审查，这是通过在 GitHub 中请求审查 `bitwarden/dept-design` 来完成的。
* 其他更改应由审查开发人员审查。

可以通过单击 **UI 审查**检查来访问审核。

<figure><img src="https://raw.githubusercontent.com/bitwarden/contributing-docs/master/docs/contributing/pull-requests/publish-review.png" alt=""><figcaption></figcaption></figure>

还可以通过单击 **Storybook Publish** 检查来浏览 Storybook 中的拉取请求。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dev.ppgg.in/contributing/pull-requests/chromatic.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.