12

我正在使用 Selenium 来自动化网页功能测试。当我们推出新代码时，进行逐个像素的比较对我们来说很重要，因此我们使用 Selenium 截取屏幕截图并比较 base64 编码的字符串以查看是否有任何变化。

我们发现在实践中，很难获得完整的像素一致性，尤其是图像。我希望轻微的模糊/渲染伪影算作“通过”而不是“失败”，所以我想知道是否有一种方法可以进行模糊比较以使我们的测试不那么脆弱。

我在想也许可以将 base64 字符串之间的 Levenshtein 距离作为起点，但我真的不知道这是否是一个好方法，或者区分“页面上移动的东西”和“渲染”的容差应该是多少神器”。有什么想法/方法吗？

4

4 回答 4

10

所以我最终选择了 ImageMagick 命令行工具（因为为什么要重新发明图像比较）。“比较”工具的“峰值绝对误差”指标告诉您在两个图像相同之前您必须模糊多少像素。这似乎工作得很好......对于具有轻微图形失真的图像，可能有很多不匹配的像素，但轻微的模糊足以使它们匹配；但是对于实际上不同的两张图像，即使大多数像素可能匹配，那些往往不会有很大不同的图像。现在，我正在检查小于 15% 的 PAE，以查看图像是否应计为相同。我正在使用的命令行是：

 compare -metric PAE  original.png new.png comparison.png

ImageMagick 比较工具的文档在这里：http ://www.imagemagick.org/script/compare.php

于 2013-03-28T12:59:01.017 回答
4

我一直在使用perceptualdiff，它使用人类视觉系统的模型来尽量避免报告不明显的变化（作者用于渲染器回归测试）。用法很简单：

perceptualdiff -output diff.ppm baseline.png test.png

（突出差异区域的 PPM 格式图像diff.ppm在哪里）

针回归测试框架支持使用 pdiff 比较屏幕截图：

http://needle.readthedocs.org/en/latest/#engines

于 2013-05-08T19:36:08.057 回答
2

使用不会产生伪影的图像格式（如 BMP 或PNG），然后您可以进行逐像素比较。我认为您可以使用共同的Euclidean Distance检查每个像素。为了稍微提高性能，不要计算平方根，而是检查距离的平方

// Maximum color distance allowed to define pixel consistency.
const float maxDistanceAllowed = 5.0;

// Square of the distance, used in calculations.
float maxD = maxDistanceAllowed * maxDistanceAllowed;

public bool isPixelConsistent(Color pixel1, Color pixel2)
{
    // Euclidean distance in 3-dimensions.
    float distanceSquared = (pixel1.R - pixel2.R)*(pixel1.R - pixel2.R) + (pixel1.G - pixel2.G)*(pixel1.G - pixel2.G) + (pixel1.B - pixel2.B)*(pixel1.B - pixel2.B);

    // If the actual distance is less than the max allowed, the pixel is
    // consistent and the method returns TRUE
    return distanceSquared <= maxD;
}

没有测试 C# 代码，但它应该给你的想法。尝试一下并maxDistanceAllowed根据您的需要进行调整。

于 2013-01-14T09:39:15.020 回答
1

如果其他人正在寻找类似的东西，可以使用 Depicted-dpxdt。它旨在用作 CI/CD 流程的一部分。

它将感知差异与服务器、命令行工具、phantom js 的包装器相结合。

它具有展示的功能，例如爬取整个站点并比较页面的差异。

于 2015-09-14T13:48:57.683 回答