用珀西测试视觉回归

这篇文章是基于个人经验的，并未赞助（尽管我们已经与珀西合作制作了一个赞助的视频，展示了其设置）。珀西是一个强大的视觉评论平台，我强烈建议探索它。

想象一下这种常见的情况：单元测试通过，您合并代码和质量标志UI问题 - 屏幕外浮动的按钮。您没有触摸该代码，但是您确实更改了一些CSS。突然，您正在质疑各种屏幕尺寸和浏览器中的每个UI元素。手动测试是一项艰巨的任务。

珀西是解决方案。这对于检测出意外的设计和布局更改是无价的。它在我的工作流程中变得至关重要，并且我分享了它如何加强代码并防止错误。它与其他工具无缝集成，易于设置。

什么是珀西？

珀西（Percy）是一个旨在检测视觉回归的综合视觉评论平台。许多代码更改，尤其是CSS修改，可以引入无法预料的设计中断。珀西在修改大型样式表或旧版代码时提供信心，以帮助识别所有受单个代码更改影响的UI元素。

设置样本网站

我们将创建一个简单的网站，用于使用Gatsby和NetLify进行珀西测试。虽然深入研究这些技术超出了此范围，但它们简化了设置过程，消除了复杂的服务器配置。

使用NetLify模板，然后单击“部署进行NetLify”。这将创建一个github存储库，并通过NetLify部署该应用程序。结果是一个现场站点，准备珀西集成。

CircleCi自动测试

珀西在CI环境中蓬勃发展。我们将使用CircleCi在每个提交上触发测试。

1. 克隆NetLify-Deployed Repo（例如， git clone https://github.com/PaulRyanStitcherAds/gatsby-starter-netlify-cms.git ）。
2. 使用您的GitHub帐户注册CircleCi。
3. 将您的项目添加到CircleCi中，选择Linux和Ruby（用于Percy-CLI）。
4. 使用此配置创建一个.circleci/config.yml文件：

版本：2
工作：
  建造：
    Docker：
       - 图像：CircleCi/Ruby：2.4.1节点浏览器
    working_directory：〜/repo
    步骤：
      - 查看
      - 跑步：
          名称：安装依赖项
          命令：|
            NPM安装
            宝石安装珀西-CLI
      - 跑步：
          名称：运行测试
          命令：|
            NPM运行构建
            珀西快照公众

这安装了percy-cli并在构建后运行Percy快照。 （注意：确保您不会错误地尝试将percy-cli作为NPM软件包安装。）

推到主分支以触发CircleCi构建。

将珀西连接到Circleci

1. 使用GitHub创建一个Percy帐户。
2. 在珀西创建一个新的组织和项目。
3. 从“项目设置”中获取您的珀西令牌。
4. 将令牌添加为Circleci的“构建设置”中的环境变量。
5. 通过再次推动掌握珀西来运行珀西。珀西将创建快照。初始构建将显示一个空比较列，因为没有以前的快照。
6. 最后，通过“项目设置” - >“安装集成”将存储库链接到珀西，为所有存储库选择您的组织并安装。

利用珀西的力量

现在，让我们在代码审查工作流程中演示珀西：

1. 创建一个分支（例如，“更换色”）。
2. 修改CSS文件（例如，更改颜色）。
3. 推动更改并在GitHub上创建拉动请求。
4. Circleci将运行Percy，突出显示视觉变化。
5. 审查珀西的变化并批准它们。这将标记拉动请求是可以合并的。

珀西允许进行有效的视觉变化审查，以防止意外UI回归。此设置简化了UI测试过程，节省了大量的时间和精力。

以上是用珀西测试视觉回归的详细内容。更多信息请关注PHP中文网其他相关文章！