使用 Percy 进行视觉回归测试

虽然这篇文章并非赞助（它基于 Paul 的个人经验），但我们之前曾在 一篇赞助视频 中与 Percy 合作过，该视频也介绍了在网站上设置 Percy 的过程。它令人着迷、功能强大、非常实用，我强烈建议您查看一下。

---

让我来设定场景

1. 您已推送了一些代码，并且您编写的所有精心设计的单元测试都通过了。太棒了！让我们将此分支合并到 QA。
2. 您收到来自您的 QA 团队的 Slack 消息，询问为什么一个按钮现在漂浮在屏幕外了？



3. “但是……我没有触碰应用程序中该部分的任何代码，”您心想。
4. 然后您记起您确实修改了一些 CSS。
5. 恐慌！UI 中还有什么变化？这会影响 iPad 吗？Firefox 的行为是否会与 Chrome 不同？移动端呢？

当构建处理不同屏幕尺寸和浏览器的规模较大的应用程序时，这是我们许多人面临的非常常见的情况。对于代码的每一次更改，测试 UI 都是一项艰巨的任务。

现在怎么办，放弃并搬到山里去？谢天谢地，不用。我们有 Percy 来帮助我们解决问题！它确实是我们在测试影响设计和布局的意外结果方面最好的朋友。Percy 已经成为我开发工具包中不可或缺的一部分，我让 CSS-Tricks 允许我分享一些关于它的内容，这些内容使我的代码更强大，并帮助防止错误发布。

此外，它与其他工具集成良好，并且设置起来相对容易。所以，请继续关注，我们将一起了解 Percy 是什么以及如何将其用于您的项目。

那么，Percy 究竟是什么？

根据 Percy 的网站，它是一个“一体化视觉审查平台”。

我发现这是真的。归根结底，Percy 提供了一种测试视觉回归的方法。如果您仔细想想，这真是太棒了。代码库中的许多更改——尤其是在使用 CSS 时——可能会引入对网站设计的破坏性更改。如果您曾经继承过一个大型的遗留样式表，修改了一个类，然后点击了 保存，那么您可能对这有多么令人心烦意乱有了很好的了解。Percy 的目标是在此类情况下提供信心，在这些情况下很难知道所有依赖于同一行代码的 UI。

兴奋了吗？让我们开始吧。

设置示例站点

让我们设置一个小型站点，Percy 可以连接到该站点并测试我们将一起创建的一些 UI。如今，这非常简单，这要归功于 Gatsby 和 Netlify。深入探讨这些技术超出了本文的范围，但请放心，它们也很棒，可以让我们上线而无需进行大量服务器设置。

前往 Netlify 模板 并点击“部署到 Netlify”按钮，这将在您的 GitHub 帐户上设置一个 git 仓库，并使用 Netlify 部署应用程序。

完成设置步骤后，我们应该获得如下所示的内容（站点部署后）

神奇的是，我们的站点现在已上线！我们将使用它来掌握 Percy 的使用方法。

使用 CircleCI 进行自动化测试

Percy 在基于操作触发测试的持续集成 (CI) 环境中效果最佳。我们将使用 CircleCI 通过与示例站点的 GitHub 仓库集成并运行构建来实现这一点，从而使我们能够测试每次提交。

我们需要做的第一件事是从 GitHub 克隆我们的新仓库，我如下克隆我的仓库

git clone https://github.com/PaulRyanStitcherAds/gatsby-starter-netlify-cms.git

现在我们的仓库已克隆，我们可以前往 CircleCI 并使用 GitHub 帐户注册。

现在我们需要添加我们的项目，因此请点击侧边导航栏中的“添加项目”，您应该会看到如下所示的屏幕。找到我们刚刚克隆的项目并点击“设置项目”。

在设置项目区域，我们要选择 Linux 作为我们的操作系统，并选择 Ruby 作为我们的语言（pery-cli 使用 Ruby）。以下是此部分的其余步骤

CircleCI 告诉我们，我们需要一个 .circleci 目录，并且我们需要在其中创建一个 config.yml 文件。在您的项目中创建以下结构。

CircleCI 提供了一个配置代码段，用于复制和粘贴到我们的配置中，但它过于冗长；我们只需要一个简单的 config.yml 文件。

继续使用以下代码段。您会看到，我们在测试中安装了 percy-cli gem 和 Percy

version: 2
jobs:
  build:
    docker:
      - image: circleci/ruby:2.4.1-node-browsers
    working_directory: ~/repo
    steps:
      - checkout
      - run:
          name: install dependencies
          command: |
            npm install
            gem install percy-cli
      
      - run: 
          name: run our tests
          command: |
            npm run build
            percy snapshot public

此配置是我们所需要的全部。

起初，我花了一段时间才弄清楚为什么我的构建失败了，结果发现我试图将 percy-cli 作为 npm 模块安装。哎呀！

现在我们已经设置了 CircleCI 配置，因此我们终于可以开始使用 Percy 了！

作为健全性检查，请注释掉上面 运行我们的测试 步骤，然后将您的代码推送到 master 分支。

现在点击“开始构建”按钮，它将使用您刚刚推送的配置来创建构建。以下是您在工作流程部分中应该看到的内容

从现在开始，每当我们进行推送时，CircleCI 都会为我们创建一个构建。

将 Percy 连接到 CircleCI

需要一个 Percy 帐户才能使用该服务。前往 Percy 网站 并使用您的 GitHub 帐户注册。

注册后，您可以创建一个新的组织（如果您还没有），并为其命名。

接下来要做的就是向组织添加一个项目。最好为项目命名与仓库名称匹配的内容，以便以后识别。

现在我们需要将 Percy 令牌添加到 CircleCI。Percy 令牌位于“项目设置”下。

好的，让我们在 CircleCI 中的“构建设置”下的环境变量中添加令牌。您可以通过点击工作流程部分中项目旁边的齿轮图标来找到构建设置。

是时候运行 Percy 了！如果您之前在配置文件中注释掉了 运行我们的测试 行，则取消注释，因为该命令将运行 Percy。再次推送到 master，然后前往 Percy 应用程序——我们将看到 Percy 已开始构建以创建快照。如果一切顺利，我们将得到以下结果

如果您点击此构建，则可以看到 Percy 为应用程序拍摄的所有屏幕截图。

您可能想知道左侧空列是什么。那是原始屏幕通常所在的位置，但由于这是第一次测试，Percy 告知我们没有以前的快照可以比较。

我们需要做的最后一件事是将我们的仓库链接到 Percy。因此，在 Percy 中，点击“项目设置”，然后点击“安装集成”链接。

选择组织并为所有仓库点击安装

终于！我们可以链接到我们的仓库了。

释放 Percy 的真正力量

由于我们现在已经设置好了一切，因此我们可以看到 Percy 如何在代码审查工作流程中使用！我们将要做的第一件事是从 master 创建一个分支。我将我的分支命名为“changing-color”。

转到 /src/components/all.sass 文件，将第 5 行更改为使用颜色 pink，然后将更改推送到仓库。这是我们将在视觉测试中评估的内容。

在 GitHub 中为更改创建拉取请求。

CircleCI 正在为我们执行检查，但我们关注的是 Percy 步骤。Percy 可能需要一两分钟才能弹出

Percy 正在通知我们，我们需要审查我们所做的更改，在本例中，是从红色更改为粉红色。我们可以看到该更改的影响

虽然右侧的更改为红色，但这突出了已更改为粉红色的区域。换句话说，红色表示更改，而不是实际外观。

我们可以快速浏览一下，然后点击“批准”按钮，这将在 GitHub 上给我们一个绿色勾号，表明我们可以合并拉取请求了。

这就是 Percy 的真正力量：让我们能够看到微小更改的影响，并让我们可以选择批准这些更改。

太棒了！我们现在已经了解了如何在项目中设置 Percy 以及如何集成 CircleCI。我真的希望这能帮助您在将来管理 UI 时避免很多麻烦。