幻影的视觉回归测试-css教程-PHP中文网

首页

web前端

css教程

幻影的视觉回归测试

Lisa Kudrow

Feb 21, 2025 am 08:24 AM

幻影的视觉回归测试

钥匙要点

>。 Phantomcss建立在多个组件上，包括用于与Phantomcss或Slimerjs浏览器，Phantomjs 2或Slimerjs相互作用的Casperjs，作为无头浏览器，并相似于比较图像的js。
如果在测试中检测到视觉变化，则幻影突出显示了已更改的区域。要接受这些更改，可以使用其他–rebase参数运行测试命令。这用新的基线图像替换为新的基线图像。
视觉回归测试

。 >视觉回归测试采用另一种方法来测试网页。该测试不仅要确保DOM中存在某些元素或文本值，还可以打开页面，并检查此特定块是否看起来完全像您希望它到

>。只是为了确保您获得了差异，让我给您一个例子。想象一下，您希望您的网站向访问者打招呼：

<span><span><span><div>>Hello, %username%!<span><span></span></span>
</div></span>></span></span>

为了确保它有效，您可以（并且应该）单位测试产生消息的代码，以检查其插入正确的名称。您还可以使用硒或量角器编写功能测试，以查看该元素是否实际上在页面上使用正确的文本存在。但这还不够。我们不仅要测试文本是正确生成的或出现在DOM中的文本，还要确保整个元素

>正确，即确保元素不会被显示：无或有人并没有意外地覆盖文本的颜色。有许多工具可以做到这一点，但是今天我们将特别研究一个选项 - 幻影。

什么是phantomcss？

Phantomcss是一种进行视觉回归测试的node.js工具。它是开源的，由赫德尔的家伙开发。 Phantomcss允许您运行一个无头浏览器，打开页面并在页面上进行整个页面或特定元素的屏幕截图。此屏幕截图将作为基线图像存储，以供将来参考。每当您更改网站上的任何内容时，都可以再次运行Phantomcss。它将采用另一个屏幕截图并将其与原始图像进行比较。如果找不到差异，则测试将通过。但是，如果屏幕截图不匹配，测试将失败，并且将创建差异的新图像供您查看。这种方法使该工具非常适合测试CSS的更改。

Phantomcss构建在几个关键组件的顶部：>

casperjs - 一种与Phantomcss或Slimerjs浏览器进行交互的工具。它允许您打开页面并执行用户交互，例如单击按钮或输入值。此外，Casperjs提供了自己的测试框架和捕获页面屏幕截图的能力。

Phantomjs 2或Slimerjs - 两个不同的无头浏览器，两种无头浏览器都可以与Phantomcs一起使用。无头浏览器就像没有用户界面的普通浏览器一样。

phantomcss可以与phantomjs和slimerjs一起使用，但是在本文中，我们将使用phantomjs。

设置测试项目

>创建一个带有一些示例内容的index.html文件：

>要安装Web服务器，初始化NPM项目并安装HTTP-Server软件包。

运行服务器，让我们定义一个简单的NPM脚本。只需将以下脚本部分添加到package.json

<span><span><span><div>>Hello, %username%!<span><span></span></span>
</div></span>></span></span>

>现在您可以从项目文件夹中运行NPM启动，并且索引页将在默认地址http://127.0.0.1:8080上访问。启动服务器，现在让它运行。我们将在一段时间内需要它。

>安装Phantomcss

>安装Phantomcss很容易，您需要做的就是在项目中添加一些依赖项：>

<span><span>
</span><span><span><span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><style>></style></span><span>
</span></span><span><span>      <span><span>.tag</span> {
</span></span></span><span><span>        <span>color: #fff;
</span></span></span><span><span>        <span>font-size: 30px;
</span></span></span><span><span>        <span>border-radius: 10px;
</span></span></span><span><span>        <span>padding: 10px;
</span></span></span><span><span>        <span>margin: 10px;
</span></span></span><span><span>        <span>width: 500px;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>
</span></span><span><span>      <span><span>.tag-first</span> {
</span></span></span><span><span>        <span>background: lightcoral;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>
</span></span><span><span>      <span><span>.tag-second</span> {
</span></span></span><span><span>        <span>background: lightskyblue;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>    </span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span>></span>
</span>    <span><span><span><div> class<span>="tag tag-first"</span>>The moving finger writes, and having written moves on.<span><span></span></span>
</div></span>></span>
</span>    <span><span><span><div> class<span>="tag tag-second"</span>>Nor all thy piety nor all thy wit, can cancel half a line of it.<span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span>

创建一个测试套件

>现在，我们拥有建立第一个测试套件所需的一切。 Phantomcss测试套件是以Node.js脚本的形式创建的，您可以在其中打开网站所需的页面，进行屏幕截图并将其与上一步中的图像进行比较。我们从基于Phantomcss本身的演示的简单测试案例开始。

<span>npm init
</span><span>npm install http-server --save-dev</span>

测试将打开http://127.0.0.1：8080/，请屏幕截图，并将其保存在屏幕截图/body.png。

>一旦我们将测试本身就位，剩下的就是定义脚本以运行测试。让我们将以下脚本添加到package。

>您现在可以通过执行以下命令来运行它：

<span>"scripts": {
</span>  <span>"start": "http-server"
</span><span>},</span>

您将看到的输出应该看起来像这样：

<span>npm install phantomcss casperjs phantomjs-prebuilt --save-dev</span>

>由于您是第一次进行测试，因此它将创建一个新的基线屏幕截图，并且不会进行任何比较。继续前进，窥视屏幕截图文件夹。您应该看到这样的图像：

<span>var phantomcss = require('phantomcss');
</span>
<span>// start a casper test
</span>casper<span>.test.begin('Tags', function(test) {
</span>
  phantomcss<span>.init({
</span>    <span>rebase: casper.cli.get('rebase')
</span>  <span>});
</span>
  <span>// open page
</span>  casper<span>.start('http://127.0.0.1:8080/');
</span>
  <span>// set your preferred view port size
</span>  casper<span>.viewport(1024, 768);
</span>
  casper<span>.then(function() {
</span>      <span>// take the screenshot of the whole body element and save it under "body.png". The first parameter is actually a CSS selector
</span>      phantomcss<span>.screenshot('body', 'body');
</span>  <span>});
</span>
  casper<span>.then(function now_check_the_screenshots() {
</span>    <span>// compare screenshots
</span>    phantomcss<span>.compareAll();
</span>  <span>});
</span>
  <span>// run tests
</span>  casper<span>.run(function() {
</span>    <span>console.log('\nTHE END.');
</span>    casper<span>.test.done();
</span>  <span>});
</span><span>});</span>

>这是您的网站应该如何外观的黄金标准，并且测试的未来执行将将其结果与此图像进行比较。

引入回归

如果您再次运行相同的测试命令，它将报告所有测试已成功传递：>

>这是可以预期的，因为我们没有在网站上更改任何内容。让我们打破一些东西，再次重新进行测试。例如，尝试在index.html中更改一些样式，将块的大小降低到400px。现在让我们再次进行测试，看看会发生什么：

<span>"test": "casperjs test test.js"</span>

在这里发生了一些重要的事情。首先，Phantomcss报告说，由于屏幕截图Body_0.png的不匹配，测试失败了。不匹配为11.41％。其次，当前版本和上一个版本之间的差异保存在“故障文件夹”中。如果打开它，您会看到这样的屏幕截图：

<span>npm test</span>

屏幕截图方便地突出了已更改的区域，因此很容易发现差异。

接受更改

>现在已经强调了差异，我们该怎么做才能接受更改？我们应该以某种方式能够告诉该工具我们要坚持使用块的宽度减小，并接受当前视图作为新标准。为此，您可以使用附加的 - rebase参数运行test命令：

<span><span><span><div>>Hello, %username%!<span><span></span></span>
</div></span>></span></span>

请注意两个双重破折号。这是NPM将参数传递到基础命令的方式。因此，以下命令将导致casperjs test.js -rebase。既然我们已经接受了更改，则将以新的基线图像替换为新的图像。

进一步

>现在您已经掌握了基础知识，您可以开始考虑将此工具集成到自己的工作流程中。我不会详细介绍它，因为它特定于项目，但是这里有一些问题要思考：>

>您是否要针对真实网站或某种样式指南进行测试，其中只有单独的UI元素？

您的网站有动态内容吗？如果是，那么内容的更改将导致测试破裂。为了避免这种情况，您需要设置一个具有静态上下文的网站的单独版本，以对其进行测试。
您是否要将屏幕截图添加到版本控件中？是的，你应该。
您要拍摄整个页面的屏幕截图还是单独的元素？

经常询问的问题（常见问题解答）有关使用幻影测试的视觉回归测试

什么是phantomcss，它如何工作？

>如何使用幻象来进行视觉回归测试？>使用phantomcss进行视觉回归测试，您首先需要创建一个测试脚本，该测试脚本告诉Phantomcss可以捕获什么屏幕截图。该脚本可以用JavaScript或CoffeeScript编写。脚本准备就绪后，您可以使用phantomjs运行它。然后，Phantomcss将捕获指定元素的屏幕截图，将它们与基线图像进行比较，并生成一个报告显示差异的报告。

>我可以将phantomcss与其他测试框架一起使用吗？与其他测试框架（如摩卡咖啡，茉莉花和Qunit）一起使用。它也可以与詹金斯（Jenkins）和特拉维斯（Travis）CI等连续集成系统进行集成。

将使用phantomcss进行视觉回归测试的优点是什么？