Web Apps视觉测试简介

Visual testing (sometimes called visual regression testing or UI testing) is the process of reviewing software for purely visual integrity. Unlike the tools you use to make sure your app is behaving as intended, visual testing is all about what your users actually see and interact with.

视觉测试 (有时称为视觉回归测试或UI测试)是审查软件的纯粹视觉完整性的过程。 与用于确保应用程序按预期运行的工具不同，视觉测试是关于用户实际看到并与之交互的所有内容。

It works by comparing snapshots of your UI against baselines to see if pixels have changed. By looking at the pixels rather than the code underneath, visual testing makes it easy to see exactly what your UI looks like before deploying and to catch visual regressions.

它通过将用户界面的快照与基准进行比较以查看像素是否已更改来工作。 通过查看像素而不是其下面的代码，可视化测试可以轻松地在部署之前准确地查看UI的外观并捕获可视化回归。

Visual testing is more than snapshot testing—having a visual review workflow to get continuous visual coverage is crucial. With Percy, it’s easy to integrate visual testing into your stack to in tandem with your CI/CD pipeline on every pull request.

视觉测试不仅仅是快照测试-拥有视觉审查工作流程来获得连续的视觉覆盖至关重要。 使用Percy，可以很容易地将可视化测试集成到堆栈中，以在每次拉取请求时与CI / CD管道串联。

Now that you have an overview of how visual testing works, we’re going to walk through a 5-minute tutorial.

现在，您已经对视觉测试的工作原理有了一个概述，我们将逐步完成一个5分钟的教程。

This is what we’ll cover:

这是我们要介绍的内容：

1. Integrating Percy with an example web application (or your own)

   将Percy与示例Web应用程序(或您自己的)集成

2. Running your first visual tests

   运行首次视觉测试

3. Making and reviewing visual changes

   进行和审查外观更改

4. Adding visual reviews to your day-to-day workflow

   将视觉评论添加到您的日常工作流程中

Let’s get started!

让我们开始吧！

步骤1：整合Percy (Step 1: Integrate Percy)

If you haven’t already, sign up for a free Percy account, name your organization, and create your first project.

如果尚未注册 ，请注册一个免费的Percy帐户 ，为您的组织命名，并创建您的第一个项目。

Signing up for a Percy account is free and includes 5,000 snapshots each month with upgrades starting at $29 available.

免费注册Percy帐户，每月包含5,000张快照，升级价格为29美元起。

Percy projects correspond with the apps, sites, or component libraries you want to test. With our SDKs you can add visual testing to virtually anything that renders in a browser.

Percy项目与您要测试的应用程序，站点或组件库相对应。 使用我们的SDK，您几乎可以将视觉测试添加到浏览器中呈现的任何内容。

These are some of our popular SDKs:

这些是我们一些受欢迎的SDK：

• Cypress

  柏

• Puppeteer

  木偶戏

• Ember web apps

  Ember Web应用程序

• Capybara for Ruby apps

  Capybara for Ruby应用

• Storybook for React

  React的故事书

For this tutorial, we’ll use PercyScript—the easiest and fastest way to get started with visual testing for any web app. We’re going to use this TodoMVC example app, although you can easily adapt the PercyScript below to work for your own application.

在本教程中，我们将使用PercyScript-开始对任何Web应用程序进行视觉测试的最简单，最快的方法。 我们将使用此TodoMVC示例应用程序 ，尽管您可以轻松地调整以下PercyScript使其适用于自己的应用程序。

First, let’s setup the example app:

首先，让我们设置示例应用程序：

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并为此应用程序编写第一个可视化测试。

It’s important to keep the server running and open a new terminal to run:

保持服务器运行并打开一个新的终端来运行很重要：

This will add to your file.

这会将添加到文件。

Next, create a file named and add your first PercyScript:

接下来，创建一个名为的文件并添加您的第一个PercyScript：

That’s it! The next step is to start running this PercyScript.

而已！ 下一步是开始运行此PercyScript。

步骤2：运行视觉测试 (Step 2: Run Visual Tests)

To run your PercyScript locally, copy the environment variable from the new project screen or your project settings, then run:

要在本地运行PercyScript，请从新项目屏幕或项目设置中复制环境变量，然后运行：

Replace the token with your project’s `PERCY_TOKEN`.

将令牌替换为您项目的“ PERCY_TOKEN”。

You should see output like:

您应该看到如下输出：

What’s happening behind the scenesPercy works by capturing the DOM snapshot everywhere the Percy snapshot command is called. We then recreate the page or component in our custom rendering environment. New snapshots are compared against baseline snapshots to determine which pixels have changed.

幕后发生了什么Percy通过在调用Percy快照命令的任何地方捕获DOM快照来工作。 然后，我们在自定义渲染环境中重新创建页面或组件。 将新快照与基准快照进行比较，以确定哪些像素已更改。

If you’re following along, 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 we assume that master builds are production-ready.

如果您继续进行下去，您会发现由于这是第一个构建，因此没有任何可与之比较的东西。 它也被“自动批准”了，因为提交是在master上的，并且我们认为master版本已经可以投入生产了。

步骤3：查看外观更改 (Step 3: Review Visual Changes)

Now that you’re integrated and have pushed your first build establishing your baseline, let’s make a new feature branch and introduce a visual change to review in Percy.

现在，您已经集成并推动了第一个构建建立基线，让我们建立一个新的功能分支，并引入可视化更改以在Percy中进行审查。

Use your text editor to edit and make the h1 text on line 11 purple:

Now run the snapshots again:

现在再次运行快照：

Head back to Percy or click the Percy build link to see the visual changes! On the right, you’ll see the new snapshot, overlaid with red pixels highlighting the areas that have changed.

返回Percy或单击Percy构建链接以查看视觉变化！ 在右侧，您将看到新的快照，上面覆盖着红色像素，突出显示了已更改的区域。

Clicking that area (or pressing “d”) will toggle between the underlying snapshot and the overlaid diff so you can easily see what exactly has changed.

单击该区域(或按“ d”)将在基础快照和覆盖的差异之间进行切换，因此您可以轻松查看到底发生了什么变化。

响应差异 (Responsive diffs)

You can also use Percy to get coverage across all the most important viewport sizes. By default, we render snapshots for mobile and desktop widths. Toggle between widths to see what has changed across each.

您还可以使用Percy覆盖所有最重要的视口尺寸。 默认情况下，我们渲染移动和桌面宽度的快照。 在宽度之间切换，以查看各宽度之间的变化。

跨浏览器视觉测试 (Cross-browser visual testing)

Cross-browser snapshots help you detect subtle differences caused by browser rendering.

跨浏览器快照可帮助您检测由浏览器渲染引起的细微差别。

If you’re happy with your changes, hit “Approve All” — knowing with 100% confidence what visual changes you’ll be deploying. By default, Percy renders all snapshots across both Chrome and Firefox.

如果您对更改感到满意，请单击“全部批准”-100％确信将要部署的视觉更改。 默认情况下，Percy呈现Chrome和Firefox上的所有快照。

Since you wanted to make these changes, hit “Approve All.”

由于您要进行这些更改，因此请点击“批准全部”。

You’ve done your first visual review!

您已经完成了第一次视觉检查！

步骤4：CI和源代码集成 (Step 4: CI and Source Code Integrations)

To get the most value out of automated visual testing, we recommend integrating with your existing dev tools and processes.

为了从自动化的视觉测试中获得最大的价值，我们建议与您现有的开发工具和流程集成。

Percy is designed to run alongside your CI builds as part of your code review process. For more in-depth instructions and to see all of our supported CI services, check out our CI setup documentation. Here are a few of our most popular supported services:

Percy旨在与您的CI版本一起运行，作为代码检查过程的一部分。 有关更深入的说明并查看我们所有受支持的CI服务，请查看我们的CI设置文档 。 以下是我们最受欢迎的一些支持服务：

• CircleCI

  CircleCI

• Buildkite

  建筑风筝

• Codeship

  代

With a source code integration enabled, you will be notified right in your pull or merge request when visual changes are detected, and when those changes are approved and ready to merge.

启用源代码集成后 ，将在检测到视觉更改以及批准这些更改并准备好进行合并时，在提取或合并请求中立即通知您。

Clicking “Details” will take you right to the Percy build where you can review visual changes.

单击“详细信息”将带您进入Percy版本，您可以在其中查看外观更改。

After snapshots are approved, your commit status will change to green and the PR can be merged.

快照被批准后，您的提交状态将变为绿色，并且可以合并PR。

That’s it! You’re ready to merge with confidence that every part of your app looks exactly like it should.

而已！ 您已经准备好充满信心地合并应用程序的每个部分，使其看起来完全一样。

We hope this tutorial has helped you get acquainted with Percy’s visual review platform and workflow. To continue learning about how Percy works, feel free to check out these additional resources:

我们希望本教程可以帮助您熟悉Percy的视觉检查平台和工作流程。 要继续了解Percy的工作原理，请随时查看以下其他资源：

• Getting started with Percy

  Percy入门

• Visual testing basics

  视觉测试基础

• Percy SDKs

  Percy SDK

And if you haven’t already, sign up for a free Percy account. You get 5,000 free monthly snapshots and access to our visual testing platform and integrations.

如果您还没有注册 ，请注册一个免费的Percy帐户 。 您每月可获得5,000张免费快照，并可以使用我们的视觉测试平台和集成。

Happy testing!

试愉快！

翻译自: https://www.digitalocean.com/community/tutorials/js-visual-testing-percy

文章知识点与官方知识档案匹配，可进一步学习相关知识Java技能树首页概览91438 人正在系统学习中 相关资源：丝柏人像美肤处理软件CPAC Imaging Pro 3绿化汉化破解版