我正在使用 Selenium 来自动化网页功能测试。当我们推出新代码时，进行逐个像素的比较对我们来说很重要，因此我们使用 Selenium 截取屏幕截图并比较 base64 编码的字符串以查看是否有任何变化。
我们发现，在实践中，很难获得完全的像素一致性，尤其是图像。我希望轻微的模糊/渲染伪影算作“通过”而不是“失败”，所以我想知道是否有一种方法可以进行模糊比较以使我们的测试不那么脆弱。
我正在考虑将 base64 字符串之间的 Levenshtein 距离作为起点，但我真的不知道这是否是一个好方法，或者区分“页面上移动的东西”的容差应该是多少来自“渲染神器”。有什么想法/方法吗？
【问题讨论】：
标签： testing selenium comparison levenshtein-distance
所以我最终选择了 ImageMagick 命令行工具（因为为什么要重新发明图像比较）。 “比较”工具的“峰值绝对误差”指标告诉您在两个图像相同之前您必须模糊多少像素。这似乎工作得很好......对于具有轻微图形失真的图像，可能有很多不匹配的像素，但轻微的模糊足以使它们匹配；但是对于实际上不同的两张图像，即使大多数像素可能匹配，那些往往不会有很大不同的图像。现在，我正在检查小于 15% 的 PAE，以查看图像是否应计为相同。我正在使用的命令行是：
compare -metric PAE original.png new.png comparison.png
ImageMagick 比较工具的文档在这里：http://www.imagemagick.org/script/compare.php
【讨论】：
我一直在使用perceptualdiff，它使用人类视觉系统模型来尽量避免报告不明显的变化（作者用于渲染器回归测试）。用法很简单：
perceptualdiff -output diff.ppm baseline.png test.png
（其中diff.ppm 是PPM 格式图像，突出显示差异区域）
needle 回归测试框架支持使用 pdiff 比较屏幕截图：
【讨论】：
使用不会产生伪影的图像格式（如 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。
【讨论】：
如果其他人正在寻找类似的东西，那就是 Depicted-dpxdt。它旨在用作 CI/CD 流程的一部分。
它将感知差异与服务器、命令行工具、phantom js 的包装器相结合。
它具有爬取整个网站和比较页面差异等功能。
【讨论】：