与Selenium的模糊屏幕截图比较

Question

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

我们发现在实践中，很难获得完整的像素一致性，特别是对于图像。 我希望将较小的模糊/渲染工件视为“通过”而不是“失败”，所以我想知道是否有一种方法可以进行模糊比较，使我们的测试不那么脆弱。

我在考虑将base64字符串之间的Levenshtein距离作为一个起点，但我真的不知道这是一个好的方法，还是应该区分“在页面上移动的东西”和“渲染”的公差神器”。 任何想法/方法？

Answer 1

所以我最终使用ImageMagick命令行工具（因为为什么重新发明图像比较）。 “比较”工具的“峰值绝对误差”度量标准可以告诉您在两个图像相同之前，您需要多少模糊像素。 这似乎运作良好...对于具有轻微图形失真的图像，可能存在许多不匹配的像素，但是轻微的模糊化足以使它们匹配; 但是对于实际上不同的两个图像，即使大多数像素可能匹配，也不会有很大差异。 现在我正在检查小于15％的PAE，看看图像是否应该被计为相同。 我正在使用的命令行是：

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

有关ImageMagick比较工具的文档，请访问： http ： //www.imagemagick.org/script/compare.php

Answer 2

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

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

（其中diff.ppm是PPM格式图像，突出显示差异区域）

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

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

Answer 3

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

// 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 。

Answer 4

如果其他人正在寻找类似的东西，那就有描述 - dpxdt 。 它旨在用作CI / CD过程的一部分。

它结合了感知差异与服务器，命令行工具，幻影js的包装器。

它具有爬行整个站点和比较页面差异的功能。