介绍 (Introduction)
There are tons of tools out there that help you make sure your app is functioning perfectly, but how do you catch bugs that are purely visual?
有大量工具可帮助您确保应用程序正常运行，但是如何捕获纯可视化的错误？
In the example above, the button still works, and the text is actually still there, but the link somehow changed to be the same color as the button.
在上面的示例中，按钮仍然有效，并且文本实际上仍然存在，但是链接以某种方式更改为与按钮相同的颜色。
You could write regression tests to ensure that the text is always white, and the button is always green, but across hundreds of pages and states, that becomes unruly very fast. So in lieu of (or in addition to) writing line after line of regression tests, you might manually check all those pages before deploying. But we all know how time-consuming and imperfect manual QA can be.
您可以编写回归测试以确保文本始终为白色，按钮始终为绿色，但是在数百个页面和状态中，这变得非常快。 因此，代替(或除了)编写逐行回归测试之外，您可以在部署之前手动检查所有这些页面。 但是我们都知道手动QA可能很耗时且不完善。
That’s where visual testing comes in.
这就是视觉测试的用武之地。
Visual testing is a new way to have confidence in your UI. Instead of manually checking your UI or testing the code underneath, visual testing detects pixel-by-pixel changes on every commit automatically. Visual testing can save you time reviewing code and ensuring no visual bugs make their way to production.
视觉测试是一种对UI充满信心的新方法。 视觉测试不是手动检查UI或测试下面的代码，而是自动检测每次提交的逐像素更改。 可视化测试可以节省您检查代码的时间，并确保没有可视化的错误进入生产环境。
In this tutorial, we’ll walk through integrating the Percy visual testing service with an example app, reviewing visual changes, and running visual reviews as part of your day-to-day workflow.
在本教程中，我们将逐步完成将Percy视觉测试服务与示例应用程序集成在一起，审查视觉更改，并在日常工作流程中运行视觉评论。
第1步-整合Percy (Step 1 — Integrating Percy)
If you haven’t already, sign up for a Percy account, name your organization, and create your first project.
如果尚未注册，请注册一个Percy帐户，命名您的组织，然后创建您的第一个项目。
Note: Signing up for a Percy account will kick off a 14-day trial, but once that expires, you’ll be transferred to a free plan that includes 5,000 free snapshots each month.
注意：注册一个Percy帐户将启动14 天的试用期，但是一旦到期，您将被转到一个免费计划，该计划每月包含5,000张免费快照。
Percy projects correspond with the apps, sites, or component libraries you want to test. The Percy SDKs can add visual testing to most anything that renders in a browser.
Percy项目与您要测试的应用程序，站点或组件库相对应。 Percy SDK可以对大多数在浏览器中呈现的内容添加视觉测试。
Some popular examples are:
一些受欢迎的例子是：
The SDKs work by importing and calling Percy snapshot commands wherever you’d like visual coverage.
这些SDK可以通过导入和调用Percy快照命令进行工作，只要您希望对其进行可视化覆盖。
For this tutorial, we’ll use PercyScript, which provides a quick and easy way to start doing visual testing in just a couple of lines of JavaScript. PercyScript can fully interact with elements by clicking, typing, and waiting, and can also be used to test live URLs. Read more in the official PercyScript documentation.
在本教程中，我们将使用PercyScript，它提供了快速简便的方法，仅用几行JavaScript就可以开始进行可视化测试。 PercyScript可以通过单击，键入和等待与元素进行完全交互，还可以用于测试实时URL。 在PercyScript官方文档中了解更多信息 。
For this tutorial, we’re going to use a TodoMVC example app. You can adapt the PercyScript below to work for your own application.
在本教程中，我们将使用TodoMVC示例应用程序。 您可以调整以下PercyScript使其适合您自己的应用程序。
First, let’s set up the example app. This will require Node.js and npm to be installed. For more information about installing Node, please see How To Install Node.js on Ubuntu 18.04:
首先，让我们设置示例应用程序。 这将需要安装Node.js和npm 。 有关安装Node的更多信息，请参见如何在Ubuntu 18.04上安装Node.js ：
- git clone https://github.com/percy/example-todomvc.git git clone https://github.com/percy/example-todomvc.git
- cd example-todomvc/ cd example-todomvc /
- npm install npm安装
- npm run start npm运行开始
You can now visit http://localhost:8000 and play around with the todos app yourself.
您现在可以访问http://localhost:8000并亲自使用todos应用程序。
Next, we’re going to install PercyScript and write our first visual tests for this application.
接下来，我们将安装PercyScript并为此应用程序编写第一个可视化测试。
Keep the server running, open a new terminal, and run:
保持服务器运行，打开新终端，然后运行：
- npm install -D @percy/script npm install -D @ percy /脚本
This will add @percy/script to your package.json file.
这会将@percy/script添加到package.json文件。
Next, create a file named snapshots.js and add your first PercyScript:
接下来，创建一个名为snapshots.js的文件并添加您的第一个PercyScript：
// snapshots.js
const PercyScript = require('@percy/script');
// A script to navigate our app and take snapshots with Percy.
PercyScript.run(async (page, percySnapshot) => {
await page.goto('http://localhost:8000');
await percySnapshot('TodoMVC home page');
// Enter a new to-do.
await page.type('.new-todo', 'A really important todo');
await page.keyboard.press('Enter');
await percySnapshot('TodoMVC with a new todo', { widths: [768, 992, 1200] });
});The next step is to start running this PercyScript and seeing visual changes.
下一步是开始运行此PercyScript并查看视觉变化。
第2步-运行视觉测试 (Step 2 — Running Visual Tests)
To run your PercyScript locally, copy PERCY_TOKEN from the new project screen, then run:
要在本地运行PERCY_TOKEN ，请从新项目屏幕复制PERCY_TOKEN ，然后运行：
export PERCY_TOKEN=your_token_here
出口PERCY_TOKEN = your_token_here
- npx percy exec -- node snapshots.js npx percy exec-节点快照
Note: Be sure to replace your_token_here with your project-specific PERCY_TOKEN.
注意：请确保将your_token_here替换为特定PERCY_TOKEN项目的PERCY_TOKEN 。
You should see output like:
您应该看到如下输出：
Output
[percy] created build #1: https://percy.io/test/example-todomvc/builds/1738842
[percy] percy has started.
[percy] snapshot taken: 'TodoMVC home page'
[percy] snapshot taken: 'TodoMVC with a new todo'
[percy] stopping percy...
[percy] waiting for 2 snapshots to complete...
[percy] done.
[percy] finalized build #1: https://percy.io/test/example-todomvc/builds/1738842
The PercyScript has run, sending snapshots up to Percy for rendering and processing:
PercyScript已运行，将快照发送到Percy进行渲染和处理：
You’ll see that since this is the first build, there isn’t anything to compare it to. It has also been “Auto-Approved” because the commit was on master and Percy assumes that master builds are production-ready.
您会看到，由于这是第一个构建，因此没有任何可与之进行比较的东西。 它也被“自动批准”，因为提交是在主服务器上的，而Percy认为主服务器构建已可以投入生产。
Percy works by capturing the DOM snapshot everywhere the Percy snapshot command is called. The page or component is then rendered in a custom rendering environment. New snapshots are compared against baseline snapshots to determine which pixels have changed.
Percy通过在调用Percy快照命令的任何地方捕获DOM快照来工作。 然后在自定义渲染环境中渲染页面或组件。 将新快照与基准快照进行比较，以确定哪些像素已更改。
Now that you’ve integrated your project and have pushed your first build to establish your baseline, let’s make a change and review the differences.
既然您已经集成了项目并推动了第一个构建来建立基准，那么让我们进行更改并检查差异。
第3步–查看外观更改 (Step 3 — Reviewing Visual Changes)
Let’s make a new feature branch and introduce a visual change.
让我们创建一个新的功能分支，并引入视觉上的变化。
Use your text editor to edit index.html and make the h1 text on line 11 purple:
使用文本编辑器编辑index.html并将第11行的h1文本设为紫色：
<h1 style="color:#9e66bf;">Now run the snapshots again:
现在再次运行快照：
- npx percy exec -- node snapshots.js npx percy exec-节点快照
Open up the resulting link, and you can now see the visual changes highlighted.
打开结果链接，您现在可以看到突出显示的视觉变化。
并排比较 (Side-by-side Comparison)
The red areas in the right panel represent pixels that have changed — those changed pixels are called visual diffs.
右侧面板中的红色区域表示已更改的像素-那些更改的像素称为视觉差异。
Clicking that area (or pressing d) will toggle between the underlying snapshot and the overlaid diff so you can see what exactly has changed.
单击该区域(或按d )将在基础快照和覆盖的差异之间切换，因此您可以看到实际更改了什么。
Note: Click the arrow expansion box for a full-screen view. Cycle through old, new, and diff with your left and right keys, and navigate between snapshots with up and down down keys.
注意：单击箭头扩展框以查看全屏视图。 使用左右键在旧的，新的和差异之间循环，并使用上下键在快照之间导航。
响应差异 (Responsive Diffs)
You’ll notice the widths at which your snapshots have been rendered show up here. In this example we rendered snapshots for mobile and desktop widths.
您会注意到在此处呈现快照的宽度。 在此示例中，我们呈现了移动和桌面宽度的快照。
Select the various widths to see what has changed across each width.
选择各种宽度以查看每个宽度上发生了什么变化。
跨浏览器视觉测试 (Cross-browser Visual Testing)
By default, Percy renders all snapshots with both Chrome and Firefox.
默认情况下，Percy使用Chrome和Firefox渲染所有快照。
Cross-browser snapshots help you detect subtle differences caused by browser rendering.
跨浏览器快照可帮助您检测由浏览器渲染引起的细微差别。
If you’re happy with your changes, hit Approve All. You’ve completed your first visual review.
如果您对更改感到满意，请点击批准全部 。 您已经完成了第一次视觉检查。
步骤4 —将可视化测试与代码工作流集成在一起 (Step 4 — Integrating Visual Testing with Code Workflows)
To get the most value out of automated visual testing, it may make sense to add visual reviews to you continuous integration and testing workflows.
为了从自动化的视觉测试中获得最大的价值，可能需要为持续的集成和测试工作流添加视觉评论。
To configure Percy with your CI service so that visual tests runs every time a CI build is kicked off, you need to add your PERCY_TOKEN to your CI environment variables. For more in-depth instructions and to see all of our supported CI services, check out the official Percy CI setup documentation.
要使用CI服务配置Percy，以便在每次启动CI构建时都运行可视化测试，您需要将PERCY_TOKEN添加到CI环境变量中。 有关更深入的说明并查看我们所有受支持的CI服务，请查看官方的Percy CI设置文档 。
You can also add Percy to your pull/merge requests to be notified when visual changes are detected, and when those changes are approved and ready to merge.
您还可以将Percy添加到您的合并/合并请求中 ，以便在检测到视觉更改以及批准这些更改并准备好进行合并时通知您 。
Head to your organization settings to give Percy access to GitHub or GitLab. Once you’ve given access, connect your project on Percy to your project’s source repository. Then the next time you commit, Percy will show up in your pull/merge request checks:
转到您的组织设置，以使Percy可以访问GitHub或GitLab 。 授予访问权限后，将Percy上的项目连接到项目的源存储库。 然后，下次提交时，Percy将显示在拉/合并请求检查中：
Clicking Details will take you right to the Percy UI where you can review visual changes. After snapshots are approved, your commit status will change to green and the PR can be merged:
单击详细信息将带您直接进入Percy UI，您可以在其中查看外观更改。 快照被批准后，您的提交状态将变为绿色，并且可以合并PR：
At this point you’re ready to merge.
此时，您已准备好合并。
结论 (Conclusion)
In this tutorial we have reviewed a visual testing workflow using Percy’s visual review platform. To continue learning about how Percy works, take a look at some more of the official documentation:
在本教程中，我们已经使用Percy的视觉检查平台审查了视觉测试工作流程。 要继续学习Percy的工作原理，请查看更多官方文档：
翻译自: https://www.digitalocean.com/community/tutorials/getting-started-with-visual-testing-in-5-minutes
1687
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
