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格式图片，突出显示差异区域）

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

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

Answer 3

使用不会产生工件的图像格式（如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。

Answer 4

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

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

它具有抓取整个网站和比较页面差异的功能。

与Selenium的模糊屏幕截图比较

4 个答案: