CN108121648A - 一种界面错误监控方法 - Google Patents

Abstract

本发明公开了一种界面错误监控方法，该方法包括：预先根据所截取的界面图像制作待测目标界面检测模板；所述待测目标界面检测模板包括非运营区域和内容变化频繁的运营区域，所述非运营区域像素点信息中透明度A值保持1不变，所述运营区域像素点信息中透明度A值从1降低至[0，1)中的预定值；选择并截取与待测目标界面检测模板具有相同非运营区域的界面图像作为待测目标界面图像，将所截取的待测目标界面图像与所述检测模板中的每一像素点的像素点信息进行一一比对，确定待测目标界面图像上的异常像素点数量，在异常像素点数量不超过预定值时，判断该待测目标界面检测通过。采用本发明能够直接从界面上检测出UI层出现的问题。

Description

一种界面错误监控方法

技术领域

本发明涉及软件测试技术领域，特别涉及一种界面错误监控方法。

背景技术

在传统的软件测试领域中，所有的工作基本都是由人力来完成的，随着技术的发展，出现了一些自动化测试工具，使一部分工作可以由机器代劳，但仍有很大的局限性，机器只能从API或数据层面进行检测。对于用户界面(UI)层的检查，并没有一个非常好的方式。

发明内容

本发明的目的在于提供一种界面错误监控方法，能够直接从界面上检测出UI层出现的问题。

为实现上述发明目的，本发明提供了一种界面错误监控方法，该方法包括：预先根据所截取的界面图像制作待测目标界面检测模板；所述待测目标界面检测模板包括非运营区域和内容变化频繁的运营区域，所述非运营区域像素点信息中透明度A值保持1不变，所述运营区域像素点信息中透明度A值从1降低至[0，1)中的预定值；选择并截取与待测目标界面检测模板具有相同非运营区域的界面图像作为待测目标界面图像，将所截取的待测目标界面图像与所述检测模板中的每一像素点的像素点信息进行一一比对，确定待测目标界面图像上的异常像素点数量，在异常像素点数量不超过预定值时，判断该待测目标界面检测通过。

综上所述，本发明提供的界面错误监控方法，预先根据所截取的界面图像制作待测目标界面检测模板，所述待测目标界面检测模板包括非运营区域和内容变化频繁的运营区域，所述非运营区域像素点信息中透明度A值保持1不变，所述运营区域像素点信息中透明度A值从1降低至[0，1)中的预定值；选择并截取与待测目标界面检测模板具有相同非运营区域的界面图像作为待测目标界面图像，将所截取的待测目标界面图像与所述检测模板中的每一像素点的像素点信息进行一一比对，确定待测目标界面图像上的异常像素点数量，在异常像素点数量不超过预定值时，判断该待测目标界面检测通过。由此可以看出，本发明以软件或者网页的界面图像作为依据，通过与检测模板进行逐像素分析，即专门针对UI层进行检查，及时发现UI层面的显示问题。

附图说明

图1a为正确的界面显示图像示意图。

图1b为错误的界面显示图像示意图。

图2为本发明界面错误监控方法的流程示意图。

图3为所截取的版本为1.1的界面图像示意图。

图4为待测目标界面检测模板示意图。

图5为实施例三所截取的界面图像中运营区域和非运营区域的示意图。

具体实施方式

为使本发明的目的、技术方案及优点更加清楚明白，以下参照附图并举实施例，对本发明所述方案作进一步地详细说明。

图1a为正确的界面显示图像示意图。图1b为错误的界面显示图像示意图。当界面出现如图1b所示的错误时，现有技术使用传统API与数据的检测方式是无法检测出来的。本发明以软件或者网页的界面图像作为依据，通过与检测模板进行逐像素分析，即专门针对UI层进行检查，从而及时发现UI层面的显示问题，能够及时检测出图1b的界面显示错误。

图2为本发明界面错误监控方法的流程示意图。

步骤21、预先根据所截取的界面图像制作待测目标界面检测模板；所述待测目标界面检测模板包括非运营区域和内容变化频繁的运营区域，所述非运营区域像素点信息中透明度A值保持1不变，所述运营区域像素点信息中透明度A值从1降低至[0，1)中的预定值。

其中，预先根据所截取的界面图像制作待测目标界面检测模板的方法包括：

在图像处理软件中打开所截取的界面图像；

当所述运营区域对非运营区域不产生影响时，通过图像处理软件将所截取的界面图像中运营区域的A值从1降低至0，形成待测目标界面检测模板；

当所述运营区域对非运营区域产生影响时，根据运营区域对非运营区域产生影响的大小，扩大运营区域的面积，通过图像处理软件将所截取的界面图像中未扩大之前原运营区域的A值从1降低至0，将扩大部分的运营区域的A值从1降低至[0，1)中的预定值，运营区域对非运营区域产生影响越大，A值越低。

本发明中运营区域指的是会经常发生变化的区域，例如网页中的广告等。

在软件或网页中，有的UI区域是给广告，推荐位，或者为其他一些特别的需求而定制的。这些区域的变化非常频繁，可能在第二次打开软件时，这些区域都会变化，虽然这些变化会引起最后截取道德图像也发生变化，但这种变化却是合理的，因此，将这种区域统一称为“运营区域”。

原则上，只要是会随着时间、地域、用户登录状态等变换而变化的显示区域都可以被认定是运营区域。常见的运营区域有广告区域、用户相关信息显示区域、访问IP相关信息区域、网页中的轮播图、节假日相关信息显示区域、向用户推荐的信息区域、用户的评论区域、以及一些随机显示的信息区域、或AB Test区域等等。但最后具体运营区域的确定，还需结合当前业务场景。

在所截取的界面图像上，包括上述运营区域，以及除运营区域以外的非运营区域。其中，确定运营区域位置的方法包括：

确定与运营区域相对应的文档对象模型(Document Object Model，dom)节点；

计算所述dom节点相对于所截取的界面图像左上角的位置坐标(x，y)；

计算所述dom节点的宽度和高度(width，height)；

根据(x，y，width，height)确定运营区域位置。

步骤22、选择并截取与待测目标界面检测模板具有相同非运营区域的界面图像作为待测目标界面图像，将所截取的待测目标界面图像与所述检测模板中的每一像素点的像素点信息进行一一比对，确定待测目标界面图像上的异常像素点数量，在异常像素点数量不超过预定值时，判断该待测目标界面检测通过。

其中，像素点信息还包括红黄蓝(RGB)值，将所截取的待测目标界面图像与所述检测模板中的每一像素点的像素点信息进行一一比对，确定待测目标界面图像上的异常像素点数量的方法包括：

当判断所截取的待测目标界面图像与所述检测模板中该像素点的RGB值匹配时，确定该像素点为正常像素点，则进行界面上下一像素点的检测；

当判断所截取的待测目标界面图像与所述检测模板中该像素点的RGB值不匹配时，进一步根据所述检测模板中该像素点的A值进行判断：

如果A值为1，则确定该像素点为异常像素点；

如果A值为0，则确定该像素点为正常像素点，进行界面上下一像素点的检测；

如果A值在(0，1)，则根据该A值以及该像素点对RGB差异量的容忍度系数，得到该像素点对RGB差异量的容忍度；根据该像素点对RGB差异量的容忍度，确定该像素点RGB差异量是否在容忍范围内，如果在，则确定该像素点为正常像素点，进行界面上下一像素点的检测；否则确定该像素点为异常像素点；

遍历检测待测目标界面图像上的每一像素点后，确定所述待测目标界面图像上的异常点数量。

至此，完成了本发明的界面错误监控方法。

需要注意的是，本发明中在制作检测模板时所截取的界面图像与所述检测模板，以及待测目标界面图像的尺寸需要保持一致。

待测目标界面图像包括软件图像和网页图像；当待测目标界面图像为网页图像时，截取待测目标界面图像的方法优选为：采用脚本浏览器打开待测目标界面，截取待测目标界面图像。

进一步地，为确保检测的准确率，本发明可以根据所述检测模板对所截取的待测目标界面图像进行多次检测，当该待测目标界面检测不通过的概率超过预定值时，确定该待测目标界面检测失败。

为清楚说明本发明，下面列举具体场景进行说明。

实施例一

S1、为制作待测目标界面检测模板截取界面图像。假设本次截取界面图像版本为1.1，则后续每次截取的待测目标界面图像可以与本次截取界面图像版本不同，但具有相同的非运营区域。

本实施例中，采用脚本浏览器例如webdriver或者Phantomj s打开网页界面，然后截取界面图像。图3为所截取的版本为1.1的界面图像示意图。其中，webdriver或者Phantomjs都是一种脚本浏览器，和一般浏览器的区别在于，不是用户行为来驱动工作的，而是编写好的脚本，可以用来模拟用户在网页上的行为，比如点击、鼠标滚动、键盘输入等。

需要注意的是，截取的页面图像一定要在固定分辨率下，在采用脚本浏览器时，都会选择一个固定的分辨率。后续每次截取待测目标界面图像时也选择该固定分辨率，确保后续每次截取的待测目标界面图像可以与本次截取界面图像的尺寸一致，且图像最好存为无损图片保存格式，例如24位png。

另外，界面图像分为两种，一种是软件的界面图像，一种是网页的界面图像。如果是软件，则直接为该软件截图即可(如果窗口可以缩放，截图前要缩放到一个统一的尺寸，确保多次截图，图像尺寸一致。且图像最好存为24位png)。

S2、制作待测目标界面检测模板。

假设图3框内所标区域为运营区域，且运营区域对非运营区域不产生影响，则本步骤中，在图像处理软件中打开图3所示界面图像，将运营区域像素点信息中透明度A值从1降至0。形成待测目标界面检测模板示意图如图4所示。

A值用来记录图像中像素点的透明度信息，1表示不透明，0表示透明。本发明采用A值表示对RGB差异量的容错率，1表示零容错率，0表示完全容错率。

S3、执行检测

选择并截取与图3具有不同版本的界面图像作为待测目标界面图像，将所截取的待测目标界面图像与图4所示的检测模板中的每一像素点的像素点信息进行一一比对，

假设检测模板中在x＝215y＝100点的像素点信息是rgb＝0.3，0.7，0.5，则检查待测目标界面图像在x＝215y＝100点的像素点信息是否与检测模板上的rgb匹配，即是否也为rgb＝0.3，0.7，0.5。

如果完全匹配，确定该像素点为正常像素点，则进行界面上下一像素点的检测。

如果不匹配，则进行以下判断

1)检查检测模板上像素点的A值，如果A值为0，表示对RGB差异量具有完全容错率，也就是说，无论待测目标界面图像与检测模板之间的RGB差异量是多少，都在容忍范围内。因此，确定该像素点为正常像素点，进行界面上下一像素点的检测。

本实施例中，由于检测模板运营区域的所有像素的A值都是0，所以不会成为异常像素点。

2)检查检测模板上像素点的A值，如果A值不为0，则存在两种情况，一种情况是A＝1，一种情况是A值在(0，1)。

A＝1，表示对RGB差异量具有零容错率，也就是说，无论待测目标界面图像与检测模板之间的RGB差异量是多少，都是不能容忍的，因此，确定该像素点为异常像素点。

A＝0.3，表示对RGB差异量具有0.3的容错率，再结合该像素点对RGB差异量的容忍度系数(假设为10)，得到该像素点对RGB差异量的容忍度0.3*10＝3。如果待测目标界面图像与检测模板之间的RGB差异量在±3的范围内，都是容许的。如果超过±3，则确定该像素点为异常像素点。

S4、遍历检测待测目标界面图像上的每一像素点后，如果异常像素点积累超过一定数量，则判定整个页面检测不通过。

需要说明的是，本实施例是通过在图像处理软件中手工将运营区域像素点信息中透明度A值从1降至0。通过图像处理软件也可以将A值调整为其他0-1之间的值。

实施例二

在网页中，一个连续的区域都可以找到与之对应的dom节点。在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为dom。

也就是说，在网页中，运营区域是可以快速计算出来的。因此，本实施例可以通过快速确定运营区域的位置，进而调整运营区域的A值。具体地，确定运营区域位置的方法包括：

1)在网页的dom树中，找出与运营区域相对应的dom节点，并获得其引用；

本实施例中仍然假设图3框内所标区域为运营区域。

2)计算该dom节点相对于所截取的界面图像左上角的位置坐标(x，y)；

3)计算该dom节点的宽度与高度(width，height)

4)根据(x，y，width，height)确定运营区域位置，并发送给裁图程序进行裁切。

其中，给裁图程序进行裁切就是调整A值。

综上，网页中的其他运营区域位置都可以通过上述方法确定。

另外，结合phantomjs或webdriver等工具，还可以将dom节点的xpath直接传给抓图脚本，这样在采集图像过程中，上述步骤1-4可以一并完成，直接将xpath所指定的dom元素从图中擦掉。

实施例三

当所述运营区域对非运营区域产生影响时，根据运营区域对非运营区域产生影响的大小，扩大运营区域的面积，通过图像处理软件将所截取的界面图像中未扩大之前原运营区域的A值从1降低至0，将扩大部分的运营区域的A值从1降低至[0，1)中的预定值，运营区域对非运营区域产生影响越大，A值越低。

图5为实施例三所截取的界面图像中运营区域和非运营区域的示意图。点划线框所示区域1为初始运营区域，如果区域1中存在阴影面积，如图5区域1中左上角阴影所示，阴影面积会对非运营区域产生影响，即对非运营区域的RGB产生影响。如果在这种情况下，仍然采用区域1作为运营区域，那么在检测页面错误时很容易报错。因此本发明在运营区域对非运营区域产生影响的情况下，根据区域1中阴影面积对非运营区域产生辐射的大小，扩大运营区域的面积，将虚线框与点划线框之间的区域2再加上初始运营区域1作为最终运营区域，将实线框与虚线框之间的区域3为非运营区域。

通过图像处理软件将区域1中的A值从1降低至0；将虚线框与点划线框之间的区域2根据阴影面积辐射影响对该区域内的像素点A值进行灵活调整，越靠近阴影的位置，说明影响越大，为了消除影响，将A值调整的越低。如此，就可以进一步提高页面检测时的准确性。

综上，本发明采用A值表示对RGB差异量的容错率，1表示零容错率，0表示完全容错率。通过调整界面图像上运营区域的A值形成检测模板，然后通过待测目标界面图像与检测模板进行逐像素分析，即专门针对UI层进行检查，及时发现UI层面的显示问题。

本发明的界面错误监控方法，会带来如下好处：

一、可以检测UI在渲染中产生的问题。当图1a中的图片出现图1b中的问题时，通过本发明的方法是可以检测出来的。

二、对于新的测试任务，可以通过简单的PS或画板操作，都可以制作出待测目标界面检测模板，而且还可以根据检测的侧重点不同，对同一张界面图像制作出不同的检测模板。

以上所述，仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (7)

1.一种界面错误监控方法，其特征在于，该方法包括：

预先根据所截取的界面图像制作待测目标界面检测模板；所述待测目标界面检测模板包括非运营区域和内容变化频繁的运营区域，所述非运营区域像素点信息中透明度A值保持1不变，所述运营区域像素点信息中透明度A值从1降低至[0，1)中的预定值；

选择并截取与待测目标界面检测模板具有相同非运营区域的界面图像作为待测目标界面图像，将所截取的待测目标界面图像与所述检测模板中的每一像素点的像素点信息进行一一比对，确定待测目标界面图像上的异常像素点数量，在异常像素点数量不超过预定值时，判断该待测目标界面检测通过。

2.如权利要求1所述的方法，其特征在于，所述预先根据所截取的界面图像制作待测目标界面检测模板的方法包括：

在图像处理软件中打开所截取的界面图像；

当所述运营区域对非运营区域不产生影响时，通过图像处理软件将所截取的界面图像中运营区域的A值从1降低至0，形成待测目标界面检测模板；

当所述运营区域对非运营区域产生影响时，根据运营区域对非运营区域产生影响的大小，扩大运营区域的面积，通过图像处理软件将所截取的界面图像中未扩大之前原运营区域的A值从1降低至0，将扩大部分的运营区域的A值从1降低至[0，1)中的预定值，运营区域对非运营区域产生影响越大，A值越低。

3.如权利要求1所述的方法，其特征在于，确定运营区域位置的方法包括：

确定与运营区域相对应的文档对象模型dom节点；

计算所述dom节点相对于所截取的界面图像左上角的位置坐标(x，y)；

计算所述dom节点的宽度和高度(width，height)；

根据(x，y，width，height)确定运营区域位置。

4.如权利要求1所述的方法，其特征在于，所述像素点信息还包括红黄蓝RGB值，所述将所截取的待测目标界面图像与所述检测模板中的每一像素点的像素点信息进行一一比对，确定待测目标界面图像上的异常像素点数量的方法包括：

当判断所截取的待测目标界面图像与所述检测模板中该像素点的RGB值匹配时，确定该像素点为正常像素点，则进行界面上下一像素点的检测；

当判断所截取的待测目标界面图像与所述检测模板中该像素点的RGB值不匹配时，进一步根据所述检测模板中该像素点的A值进行判断：

如果A值为1，则确定该像素点为异常像素点；

如果A值为0，则确定该像素点为正常像素点，进行界面上下一像素点的检测；

如果A值在(0，1)，则根据该A值以及该像素点对RGB差异量的容忍度系数，得到该像素点对RGB差异量的容忍度；根据该像素点对RGB差异量的容忍度，确定该像素点RGB差异量是否在容忍范围内，如果在，则确定该像素点为正常像素点，进行界面上下一像素点的检测；否则确定该像素点为异常像素点；

遍历检测待测目标界面图像上的每一像素点后，确定所述待测目标界面图像上的异常点数量。

5.如权利要求1所述的方法，其特征在于，所截取的界面图像与所述检测模板，以及待测目标界面图像的尺寸一致。

6.如权利要求1所述的方法，其特征在于，待测目标界面图像包括软件图像和网页图像；当待测目标界面图像为网页图像时，截取待测目标界面图像的方法包括：

采用脚本浏览器打开待测目标界面，截取待测目标界面图像。

7.如权利要求1所述的方法，其特征在于，该方法进一步包括：根据所述检测模板对所截取的待测目标界面图像进行多次检测，当该待测目标界面检测不通过的概率超过预定值时，确定该待测目标界面检测失败。