视觉测试 是一个自动化的过程，从纯粹的视觉角度来审查软件。视觉测试不是测试底层的代码，而是关注最终用户实际看到和交互的内容。
与功能测试类似，视觉测试可以直接融入您的技术栈和工作流程。使用 Percy，可以轻松地为在浏览器中运行的任何内容添加快照并运行视觉审查。
让我们设置一个应用程序进行测试
在本教程中，我们将克隆一个 示例 Jekyll 网站，添加 Percy 快照，进行一些视觉更改，并在 Percy 中对其进行审查。
在添加 Percy 之前，让我们先设置示例应用程序
git clone https://github.com/percy/example-percy-jekyll.git导航到本地应用程序，安装依赖项，然后构建并运行站点
cd example-percy-jekyll/
bundle install
bundle exec jekyll build
bundle exec jekyll serve注意：需要 Ruby >= 2.3
在本地打开网站并点击周围，看看我们将对哪些内容进行 Percy 快照。
感谢 CloudCannon 提供了 Hydra 主题。
接下来，如果您还没有，请 注册一个免费的 Percy 帐户 并创建一个组织和一个新项目
Percy 项目对应于您正在测试的 Web 应用程序、组件库或静态网站。在本例中，我们将连接 Percy 项目到 Jekyll 网站。
生成 Percy 快照
要将本地环境与新的 Percy 项目进行身份验证，请从新项目屏幕或项目设置中复制 PERCY_TOKEN 环境变量，然后运行
$ export PERCY_TOKEN=aaabbbcccdddeee
$ npx percy snapshot _site/注意：请务必将令牌替换为您项目特定的令牌。
您将看到类似于以下内容的输出
$ npx percy snapshot _site/
Downloading Chromium r662092 - 88.3 Mb [====================] 100% 0.0s
[percy] created build #1: https://percy.io/jekyll-test-site/hydra-theme/builds/2048096
[percy] percy has started.
[percy] serving static site at http://localhost:5339/
[percy] snapshot taken: '/404.html'
[percy] snapshot taken: '/index.html'
[percy] snapshot taken: '/about/index.html'
[percy] snapshot taken: '/blog/index.html'
[percy] snapshot taken: '/contact/index.html'
[percy] snapshot taken: '/contact-success/index.html'
[percy] snapshot taken: '/pricing/index.html'
[percy] snapshot taken: '/category/marketing/index.html'
[percy] snapshot taken: '/category/sales/index.html'
[percy] snapshot taken: '/category/tips/index.html'
[percy] snapshot taken: '/sales/2016/07/20/the-process-for-direct-sales/index.html'
[percy] snapshot taken: '/marketing/2016/08/12/the-history-of-marketing/index.html'
[percy] snapshot taken: '/sales/2016/08/06/definition-of-sales/index.html'
[percy] snapshot taken: '/sales/tips/2016/07/28/effective-upselling-techniques/index.html'
[percy] snapshot taken: '/sales/tips/2016/08/02/sales-effectiveness/index.html'
[percy] shutting down static site at http://localhost:5339/
[percy] stopping percy...
[percy] waiting for 15 snapshots to complete...
[percy] done.
[percy] finalized build #1: https://percy.io/jekyll-test-site/hydra-theme/builds/2048096点击构建链接或前往 Percy 项目查看您的第一个构建。
幕后发生了什么？
一旦调用 npx percy snapshot _site/，Percy 就会捕获 Jekyll 网站每个页面的 DOM 快照。然后，Percy 重新创建快照以与 基线快照 进行比较，并确定哪些像素发生了变化。
由于这是第一个构建，因此没有可以与之比较的内容。它也被 自动批准，因为提交是在 master 上，并且我们假设 master 构建是生产就绪的。
进行和审查视觉更改
现在您已经推送了第一个构建并建立了一个基线来与您的下一个快照进行比较，让我们进行一个视觉更改来进行审查。
让我们做一个广泛的 CSS 更改。前往 cloudcannon.scss 文件并更改品牌颜色
$brand-color: #ff8a00;
$secondary-brand-color: #da1b60;由于我们将这些更改直接推送到 master，因此请务必从 Percy 项目设置中禁用对 master 分支的自动批准。
保存这些更改后，构建网站并再次运行 Percy
$ bundle exec jekyll build
$ npx percy snapshot _site/返回 Percy 或点击 Percy 构建链接查看视觉更改！
如果您没有一直跟着做，可以 查看构建。
Percy UI 中发生了什么？
右侧面板中的红色区域代表已更改的像素 - 视觉差异。点击该区域（或按下“d”）将在底层快照和叠加的差异之间切换，以便您可以轻松地查看确切的更改内容。您还会注意到，前几个差异已匹配并分组，以便更容易、更快速地进行审查。
每个快照都在 Chrome 和 Firefox 中，以及在移动和桌面宽度下进行了渲染。在这些变体中渲染您的网站可以帮助您检测由浏览器渲染或响应式错误引起的细微差异。
现在我们对新的外观感到满意，点击“批准所有”。✅
您完成了第一个视觉审查！视觉测试不仅可以很好地捕获视觉错误，还可以了解任何给定代码更改的确切影响。在代码审查期间看到 UI 的可视化效果非常宝贵，可以帮助您在视觉回归影响生产环境之前解决它们，或者以完全的信心进行部署。
配置您的快照
您可以在项目根目录中创建一个全局的 .percy.yml 文件，配置 Percy 在每次构建中运行的方式和位置。
您可以自定义渲染快照的响应式宽度。例如，如果您想在我们的移动和桌面宽度之外添加一个超宽的快照
version: 1
snapshot:
widths: [375, 1280, 1920]您还可以忽略某些页面。例如，如果您想忽略具有相同布局的多个页面，例如博客类别帖子
version: 1
static-snapshots:
ignore-files: "/blog/category/*"详细了解 Percy SDK 配置，请参阅 我们的文档）。
将 Percy 添加到您的工作流程中
到目前为止，我们所做的一切展示了 Percy 如何在本地生成快照并检测视觉更改，但为了从自动化视觉测试中获得最大的价值，我们建议将 Percy 与您的 CI 服务集成。
有关说明并查看我们支持的所有 CI 服务，请参阅 CI 设置文档。以下是我们一些最受欢迎的支持服务
与代码审查一起进行视觉测试是最好的。我们支持与 GitHub、GitLab 和 Bitbucket（即将推出）的集成！启用 集成 后，Percy 将出现在您的提交检查和拉取请求检查中，通知您是否检测到视觉更改
点击“详细信息”将直接带您到 Percy 构建，您可以在其中审查视觉更改。
批准快照后，您的提交状态将变为绿色，拉取请求可以合并。
通过在每个功能分支上进行持续的视觉审查，您可以轻松地对即将部署的视觉更改充满 100% 的信心。
我们希望本教程能帮助您熟悉 Percy 的视觉审查平台和工作流程。要了解有关 Percy 工作原理的更多信息，请随时查看以下文档
祝您测试愉快！💜