与Selenium的模糊截图比较 [英] Fuzzy screenshot comparison with Selenium

问题描述

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

I'm using Selenium to automate webpage functional testing. It's important for us to do a pixel-by-pixel comparison when we roll out new code, so we're using Selenium to take screenshots and comparing the base64 encoded strings to see if anything has changed.

我们发现在实践中，很难获得完整的像素一致性，特别是图像。我想让轻微的模糊/渲染工件算作通过而不是失败，所以我想知道是否有一种方法做一个模糊比较，使我们的测试不那么脆弱。

We're finding that in practice, it's hard to get complete pixel consistency, especially with images. I would like minor blurriness / rendering artifacts to count as a "pass" instead of a "fail", so I'm wondering if there's a way of doing a fuzzy comparison to make our tests a bit less fragile.

我想到的可能是看看base64字符串之间的Levenshtein距离作为起点，但我不知道这是一个好的方法，或者公差应该区分在页面上移动的东西从呈现工件。任何想法/方法？

I was thinking of maybe looking at the Levenshtein distance between the base64 strings as a starting point, but I don't really know if that's a good approach, or what the tolerances should be that distinguish "something moved on the page" from "rendering artifact". Any ideas / approaches?

推荐答案

所以我最终使用ImageMagick命令行工具）。 比较工具的峰值平均误差指标告诉您在两个图像完全相同之前，必须对像素进行模糊处理。这似乎工作很好...对于有轻微的图形失真的图像，可能有很多像素不匹配，但轻微的模糊足以使他们匹配;但是对于实际上不同的两个图像，即使大多数像素可能匹配，那些不是非常不同的图像。现在我检查PAE小于15％，看看图像是否应该被计数为相同。我使用的命令行是：

So I ended up going with the ImageMagick command-line tool (because why re-invent image comparison). The "Peak Average Error" metric of the "compare" tool tells you how much you have to fuzz pixels before two images are identical. This seems to work well... for an image with slight graphical distortions, there might be a lot of pixels that don't match, but slight fuzzing is enough to make them match; but for two images that are actually different, even though most pixels might match, the ones that don't tend to be very different. Right now I'm checking for a PAE of less than 15% to see if the images should be counted as identical. Command line I'm using is:

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

ImageMagick的比较工具的文档位于： http://www.imagemagick.org/script/compare.php

Documentation on ImageMagick's compare tool is here: http://www.imagemagick.org/script/compare.php

这篇关于与Selenium的模糊截图比较的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！