页面自动化对比html,Web自动化页面样式检查尝试

左手的ㄟ右手 2023-10-04 16:18 30阅读 0赞

UI自动化测试局限性

自动化测试的目的就是能够解放劳动力，提高测试效率。在UI自动化测试方面，selenium作为一个功能强大的框架，提供了比较方便的检查页面是否存在某个元素的方法，也能够模拟点击、按键等一些操作，可谓是满足了自动化功能测试的大部分需求。但是对于许多对视觉或样式要求较高的页面来说，selenium就显得比较无力，毕竟样式的检查并不像功能的检查，带有一定的主观性。

但是也并非说样式的检查就不能通过自动化来实现了。分析手工测试样式检查的过程，其实测试人员也是根据视觉稿给出的既定样式作为标准，然后在页面上各个检查点与这个标准进行对比，如果对比结果一致则通过，如果结果不一致就可以作为样式上的bug。如果要进行样式的自动化比较，很容易想到进行图片的对比，幸运的是，selenium提供了截图的方法，因此可以容易的与selenium的功能自动化测试相结合，采用图片对比的方法来检查样式。与手工测试同样的思路，如果我们事先有一个标准的图片作为模版，每次进行样式检查的时候自动截取相同位置的图片与标准的模版进行对比，就可以完成样式的检查。

图片对比的缺陷

自动的截图然后进行比较也有一个问题，在实际的页面中，往往有一些我们并不需要进行验证的部分，例如文本，图片，统计的数字，滚动的广告等，这些元素往往在不同的时间点都会有不同的展现，在手工测试的过程中我们会自动过滤这些干扰信息。但是如果进行自动化比较，就必须先设置好过滤这些因素，只着眼于需要检查的样式点。在selenium中，我们可以容易的定位到元素，并得到元素相对于页面的位置和大小。因此我们只需要根据这些信息比较需要检查样式的元素就行了。

图片对比算法

在理论上，进行图片对比验证时，只需要验证图片每个像素的颜色值或者RGB分量的值是否一致即可。但在实际测试中，这样的图片对比方式会有一个问题，因为在RGB色彩模型中，通常用8bit来存储RGB的每个分量，在24bit和32bit的颜色深度下会有不同的表现。无论是否采用压缩格式存储图片，如果将32bit颜色转换为24bit颜色图片就会发生失真，同一位置像素的颜色值或RGB颜色向量值就就会有差异。此外，如果获取作为验证时基线的参照图片时的环境与实际的测试执行环境有差异，即使是产品的界面元素没有发生任何变化，也有可能发生误报。因此为了避免这样的情况，可以在LAB色彩空间中比较像素的颜色值，这是一种与设备无关的色彩空间。从RGB转换到LAB需要进行一些公式进行计算，这里不作详细叙述。

结合selenium的图片对比样式检查

基本的步骤如下：

1、在用例中设置样式检查点，首次运行用例得到作为样本的截图

2、每次运行得到截图，与样本进行比较

3、如果比较结果一致，则测试通过；如果比较结果不一致，则输出差异的图片

图片对比的算法采用的是在LAB空间中计算每个像素点的色差，如果色差大于一定的阈值则可以认为图片不一致。为了方便与现有的自动化测试用例相结合，封装了图片对比和图片截图及处理的类。在用例中，只需要添加一个方法即可：

![5cbaf6ba67203aa433078055b7051fc0.png][]

传入的参数分别为WebDriver，用例的模块，样式检查点，检查点元素的xpath值。在配置文件type.properties中设置不同的值来区分当前是截取样本图片或是样式对比。

例如设定的样本图片如下，检查点是相册页面的TAB条：

![93cf5058737116cf22bff4266e3cae4f.png][]

21/212>

[5cbaf6ba67203aa433078055b7051fc0.png]: https://img-blog.csdnimg.cn/img_convert/5cbaf6ba67203aa433078055b7051fc0.png
[93cf5058737116cf22bff4266e3cae4f.png]: https://img-blog.csdnimg.cn/img_convert/93cf5058737116cf22bff4266e3cae4f.png