CN110515835A - 一种基于机器视觉和dom树结构的测试方法 - Google Patents

Abstract

本发明公开了一种基于机器视觉和DOM树结构的测试方法，包括如下步骤：S100、特征抽取和选择，识别测试页面中目标元素的特征；S200、根据目标元素的特征，对页面中具有类似特征的元素进行分类、泛化，获得泛化元素；S300、根据泛化元素进行自动测试，并记录。本发明可大大减少测试成本、测试时间，可增加测试方案的鲁棒性，以及测试方案的自动生成，流程机器人对于用户行为的主动理解。本发明可广泛用于用于网页测试环节、流程机器人等，使用本发明后，测试人员不会再因为开发人员对于网页的更新，而需要进一步更新测试脚本，同时一次录制或者一个脚本就可以对于所有同类的元素进行操作。同时，在流程机器人上对于用户行为有主动理解的功能。

Description

一种基于机器视觉和DOM树结构的测试方法

技术领域

本发明涉及网页测试技术，特别是涉及一种基于机器视觉和DOM树结构的测试方法。

背景技术

在当下软件、网页、移动端应用开发或者测试的自动化要求越来越高，对于用户行为理解的重要性不言而喻。比如流程化机器人或者说自动化测试领域，举个例子，在网页的自动化测试领域，已经有很多的测试软件可以录制测试人员的操作，之后可以不断地执行。但问题在于，在测试过程中有的步骤是可以“泛化”的，举个例子来说，华北1，华东2，……，这些服务器对于测试过程来说是等价的，同时也是都是需要测试的，那么很容易提出一个问题，即能不能在测试人员选择华北1这个服务器时，测试平台或者工具，可以理解这一选择并泛化，如此在测试平台或者工具执行到这一步时，可以随机选择其他地点的服务器或者并行测试所有的服务器，如此来节约测试人员录制或者编写脚本的时间，增加测试的全面性。

为了实现这个“泛化”的目标，申请人运用了机器视觉和DOM树结构分析两项技术来实现这一目标，机器视觉主要是为了在识别网页中图标、按钮的图像特征，进行相似匹配，而DOM树分析方法是通过网页的HTML或者XML中目标元素的位置与DOM树的结构来寻找同类元素即可泛化元素。

同时，另一个不是那么显而易见的好处是增加了鲁棒性，即容错能力，尤其是在测试领域。就是当版本迭代之后测试可以继续进行，比如，在原来的测试工具或者测试脚本所进行的测试过程中，华北1服务器下线了，那么整个测试就会中断，造成测试时间浪费，同时也有可能造成客户的体验下降等不必要损失，同时测试人员修改或者从头开始写脚本或者录制是必然。而使用本发明中的技术则会自动选择别的服务器，同时会在日志记录，留待测试人员判断这是正常情况还是错误，这样就极大地提高了测试效率(比如半夜这种测试人员没有留守在旁边地情况)，并且减少了测试人员的工作量。

发明内容

有鉴于现有技术的上述缺陷，本发明所要解决的技术问题是提出一种基于机器视觉和DOM树结构的测试方法，其具有“泛化”性，能够大大提高网页测试效率。

为实现上述目的，本发明提供了一种基于机器视觉和DOM树结构的测试方法，包括如下步骤：

S100、特征抽取和选择，识别测试页面中目标元素的特征；

S200、根据目标元素的特征，对具有类似特征的元素进行分类、泛化，获得泛化元素；

S300、根据泛化元素进行自动测试，并记录。

优选地，S100中，包括两种方式，即S110、机器视觉方法和S120、DOM树分析方法，两种方法可以同时进行、相互比对，也可以单一使用；

机器视觉方法的使用环境是网页清晰、各个图标按钮边缘清晰的情况下，通过识别目标元素的大致形状，在一定区域中找与其类似的图标或者是按钮，来达到泛化的目的；

而DOM树分析方法是通过DOM树的结构来进行的，分析遵守以下假设：

假设1.可泛化的同类元素的层级一定相似；

假设2.当同类元素都找到最近同一父元素的时候，非同类元素一定不是这一父元素。在这两个假设的前提下，就可以可以找到同类元素，达到泛化的目的。

优选地，S110、机器视觉方法，包括如下步骤：

S111、选择目标元素，此目标元素为图标或按钮，并识别目标元素的特征，如为方框的话就识别方框面积、倾斜角度、长款等；为圆形就识别其圆心、半径；为椭圆就识别其焦点、长轴、短轴等；

S112、识别页面中所有元素的边缘；

S113、根据目标元素特征，筛选对所有元素进行筛选，得到与目标元素类似特征的图形元素，获得泛化元素。

其中，S111-S112可以通过现有的OCR技术实现，当然也可以通过如下技术实现：

S112.1将目标的页面边缘化，首先将测试页面的图像变为二值图像，因为这样可以加强图像的重要特征，更好的检测图标或者按钮的边缘，然后检测边缘，边缘检测的公式：

其中：

Gx为水平梯度，Gy:垂直梯度，Edge_Gradient(G)为边缘梯度，Angle(θ)为边缘倾角；通过这一步可以检测出页面中所有的边缘，但也包含了文字边缘；

S112.2根据目标元素的特征，对获得的边缘进行选择。如目标元素为长方形方框，且知晓此方框的长、宽，且长为水平、宽为垂直，因此通过对不水平、不垂直、长度、高度(宽度)异常的边缘进行过滤，从而可以去除大部分的文字、非常规边缘，从而得到的是多条直线起点和终点的坐标；

S112.3取交点，选取各个边缘的交点；

S112.4将各个交点进行连线，选取与目标元素类似的形状，然后通过目标元素的面积、半径、长宽比例等去除与之特征不一致的形状，剩下的就是目标元素的同类元素，也就对目标元素进行了很好的泛化，然后将泛化元素归为同一类。这种方法十分简单，而且效率很高，但是当图标或者按钮特征不明显的时候，就需要DOM树分析方法来得到所需要的泛化结果。

S120、DOM树分析方法，包括如下步骤：

S121、寻找目标元素的路径；

S122、根据寻找到的路径寻找同一级路径下的元素；

S123、剔除不相关的元素，对目标元素进行泛化，获得泛化元素；剔除方式为寻找到目标元素的父元素(上一级元素或目标元素所属的归类)，然后依据当同类元素都找到同一父元素的时候，非同类元素一定不是这一父元素来排除不相关元素。

本发明的有益效果是：

本发明可大大减少测试成本、测试时间，可增加测试方案的鲁棒性，以及测试方案的自动生成，流程机器人对于用户行为的主动理解。

本发明可广泛用于用于网页测试环节、流程机器人等，使用本发明后，测试人员不会再因为开发人员对于网页的更新，而需要进一步更新测试脚本，同时一次录制或者一个脚本就可以对于所有同类的元素进行操作。同时，在流程机器人上对于用户行为有主动理解的功能。使用时，按照正常录制或者脚本的流程，即可自动泛化元素，自动生成一系列测试流程，或者流程机器人工作流。

附图说明

图1是具体实施方式中测试页面示意图。

图2是具体实施方式中对测试页面进行边缘化后的示意图。

图3是具体实施方式中对测试页面边缘化后需提取感兴趣的区域。

图4是具体实施方式中对边缘进行选择后的示意图。

图5是具体实施方式中对选取的边缘取交点的示意图。

图6是具体实施方式中选取与目标元素类似长方形的示意图。

图7是具体实施方式中DOM树结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步说明：

目前，用于进行页面测试的主要现有技术如下：

1、Selenium

Selenium可能是网页应用中最流行的开源自动化测试框架。在2千年的时候就出现了，至今有十多年的发展历史，Selenium成为许多Web自动化测试人员的选择，尤其是那些有高级编程和脚本技能的人。

Selenium支持多***环境(Windows，Mac，Linux)以及多种浏览器(Chrome，FireFox，IE以及无头浏览器(没有界面))。它的脚本可以由各种各样的编程语言编写，比如Java，Groovy，Python，C#，PHP，Ruby以及Perl。

因为Selenium的灵活性，测试人员可以写各种复杂的、高级的测试脚本来应对各种复杂的问题，它需要高级的编程技能和付出来构建满足自己需求的自动化测试框架和库。

证书：开源

2、Katalon Studio

Katalon Studio是一个在网页应用、移动和网页服务方面功能强大的自动化测试解决方案。基于Selenium和Appium框架，Katalon Studio集成了这些框架在软件自动化方面的优点。

这个工具支持不同层次的测试技能集。非程序员也可以快速上手一个自动化测试项目(如使用间谍对象记录测试脚本)，同时也节省了程序员和高级测试人员构建新库和维护脚本的时间。

Katalon Studio可以集成到CI/CD过程中，而且兼容流行的质量处理工具，包括qTest，JIRA，Jenkins和Git。它提供了一个很好的功能叫Katalon分析，通过指标和图表向用户提供全面的测试报告。

证书：免费

3、Uipath

UiPath Studio是用于应用程序集成以及自动执行第三方应用程序，管理性IT任务和业务IT流程的完整解决方案。

项目是业务流程的图形表示。它使您能够自动执行基于规则的流程，方法是让您完全控制执行顺序以及一组自定义步骤(也称为UiPath Studio中的活动)之间的关系。每个活动都包含一个小动作，例如单击按钮，读取文件或写入日志面板。

受支持项目的主要类型是：

序列-适用于线性过程，使您能够顺利地从一个活动转到另一个活动，而不会混淆项目。

流程图-适用于更复杂的业务逻辑，使您能够通过多个分支逻辑运算符以更多样化的方式整合决策并连接活动。

状态机-适用于非常大的项目；他们在执行中使用有限数量的状态，这些状态由条件(转换)或活动触发。

Selenium的缺点是：元素定位方式单一且不智能，需要技术人员需要高级的编程技巧。Katalon Studio是基于Selenium的集成工具包，使用用户体验较为友好的录制界面。但这两者的缺点都在于鲁棒性较低——任意页面更新或者迭代大概率会导致测试失败，同时如果遇到同类元素都需要测试的情况下测试人员会有很多机械重复的工作量，这些是通过此方案完全可以解决的。

而流程机器人方面，uipath等软件还是基于用户对于规则的定义，而不是主动去理解用户行为。如果使用本发明的机器视觉方法和DOM树分析方法，即可以泛化目标元素，如此来生成同类元素，从而可以极大地增加测试流程的鲁棒性，即使网页迭代更新，测试流程依旧可以进行下去，也可以更好的理解用户操作。同时大大减少测试人员或者用户重复劳动。

以下结合图1-图6对本发明进行进一步解释：

S110机器视觉方法：

S111，选择图1作为测试页面，这是需要测试的网页，在地域那个选项里所显示的在人看来都是一类元素，但在测试脚本中就完全不一样，目前选择的亚太南部1(孟买)，我们希望所有的地域都进行测试。

S112.1、将测试页面变成黑白二值图，因为这样可以更好的检测图标或者按钮的边缘，后面图就是边缘化的结果。

通过边缘检测的公式检测所有边缘，公式如下：

其中：Gx:水平梯度；Gy:垂直梯度，获得图2。然后通过目标元素的长方形边缘识别需提取感兴趣的区域，如下图3所示。

S112.2，通过图3，就已经找到了所有的边框，但是可以看到边缘检测不仅仅检测出了边框，还检测出了文字的边缘，文字就是我们不要的内容。所以需要加入一些判定条件如长度、是否水平、是否垂直，标记在原图中，如下图4所示。

S112.3通过S112.2得到是多条直线起点和终点的坐标，这样还是无法判断哪些直线构成了长方形。为了得到图标和按钮的精确位置，需要取各个直线的交点(取交点)，如图5所示。

S112.4将各个交点进行连线，然后选取长方形边框，排除和目标图标面积差得太多的长方形，和长宽比不一致的长方形。如图6所示，图像特征泛化的结果就很好地得到了。但是当图标或者按钮特征不明显的时候，就需要另外的方法来得到所需要的泛化结果，就是DOM树分析方法。

参见图7，简单地观察即可看出：DOM树分析方法主要经过合适的div->span->div…->span就可以找到目标元素，将这个过程定义为DOM树中的路径。所以一般来说，同类、可泛化的元素路径都应该一致。

S121、寻找目标元素的路径，假设我们的目标元素为：

<span class＝"ng-scope ng-binding">华东2</span>；

可以得到目标元素的路径：

['div','span','div','div','div','div','div','div','div',

'dd','dl','form','div','div','div','div','div','div','di

v','div','div','div','div','div','div','div','body','htm

l','[document]']；

S122、根据目标元素的路径，反过来寻找元素：

<span class＝"ng-scope ng-binding">华北2</span>

<span class＝"ng-scope ng-binding">华东1</span>

<span class＝"ng-scope ng-binding">华东2</span>

<span class＝"ng-scope ng-binding">华南1</span>

<span class＝"ng-scope ng-binding">亚太东南3(吉隆坡)</span>

<span class＝"ng-scope ng-binding">华北5</span>

<span class＝"ng-scope ng-binding">美西1(硅谷)</span>

<span class＝"ng-scope ng-binding">新加坡</span>

<span class＝"ng-scope ng-binding">亚太南部1(孟买)</span>

<span class＝"ng-scope ng-binding">亚太东南5(雅加达)</span>

<span class＝"ng-scope ng-binding">亚太东南2(悉尼)</span>

<span class＝"ng-scope ng-binding">美东1(弗吉尼亚)</span>

<span class＝"ng-scope ng-binding">华北3</span>

<span class＝"ng-scope ng-binding">英国(伦敦)</span>

<span class＝"ng-scope ng-binding">计算存储一体版</span>

<span class＝"ng-scope ng-binding">专有网络</span>

<span class＝"ng-scope ng-binding">经典网络</span>

<span class＝"ng-scope ng-binding">1C SSD</span>

<span class＝"ng-scope ng-binding">2C SSD</span>

<span class＝"ng-scope ng-binding">16C SSD</span>

<span class＝"ng-scope ng-binding">2</span>；

S123、根据路径找到了一些不相关的元素，所以可以用第二条假设：当同类元素都找到同一父元素的时候，非同类元素一定不是这一父元素来排除不相关元素。用伪代码表示如下：

·Input:候选元素(包括目标元素)，目标元素-在这个例子中就是(华东2)

·Initialization:dic[候选元素的父元素]＝候选元素

●while包含目标元素的那个dic里仅有目标元素，即dic[目标元素的父父..父元素]＝＝目标元素:

■dicTmp＝{}

■candiParents＝[]

■foriin候选元素:

ocandiParents.append(i.parent)

oif i.parent not in dicTmp.keys():

odicTmp[i.parent]+＝dic[i]

■dic＝dicTmp

■候选元素＝candiParents；

获得的结果如下：

<span class＝"ng-scope ng-binding">华北2</span>

<span class＝"ng-scope ng-binding">华东1</span>

<span class＝"ng-scope ng-binding">华东2</span>

<span class＝"ng-scope ng-binding">华南1</span>

<span class＝"ng-scope ng-binding">亚太东南3(吉隆坡)</span>

<span class＝"ng-scope ng-binding">华北5</span>

<span class＝"ng-scope ng-binding">美西1(硅谷)</span>

<span class＝"ng-scope ng-binding">新加坡</span>

<span class＝"ng-scope ng-binding">亚太南部1(孟买)</span>

<span class＝"ng-scope ng-binding">亚太东南5(雅加达)</span>

<span class＝"ng-scope ng-binding">亚太东南2(悉尼)</span>

<span class＝"ng-scope ng-binding">美东1(弗吉尼亚)</span>

<span class＝"ng-scope ng-binding">华北3</span>

<span class＝"ng-scope ng-binding">英国(伦敦)</span>。

本发明未详述之处，均为本领域技术人员的公知技术。

以上详细描述了本发明的较佳具体实施例。应当理解，本领域的普通技术人员无需创造性劳动就可以根据本发明的构思作出诸多修改和变化。因此，凡本技术领域中技术人员依本发明的构思在现有技术的基础上通过逻辑分析、推理或者有限的实验可以得到的技术方案，皆应在由权利要求书所确定的保护范围内。

Claims (8)

1.一种基于机器视觉和DOM树结构的测试方法，其特征在于，包括如下步骤：

S100、特征抽取和选择，识别测试页面中目标元素的特征；

S200、根据目标元素的特征，对具有类似特征的元素进行分类、泛化，获得泛化元素；

S300、根据泛化元素进行自动测试，并记录。

2.如权利要求1所述的测试方法，其特征在于，S100中，包括两种方式，即S110、机器视觉方法和S120、DOM树分析方法，所述机器视觉方法和DOM树分析方法择一或组合使用。

3.如权利要求2所述的测试方法，其特征在于，机器视觉方法的使用环境是网页清晰、各个图标按钮边缘清晰的情况下，通过识别目标元素的大致形状，在一定区域中找与其类似的图标或者是按钮，来达到泛化的目的。

4.如权利要求2所述的测试方法，其特征在于，DOM树分析方法是通过DOM树的结构来进行的，分析遵守以下假设：

假设1.可泛化的同类元素的层级一定相似；

假设2.当同类元素都找到最近同一父元素的时候，非同类元素一定不是这一父元素。

5.如权利要求3所述的测试方法，其特征在于，S110、机器视觉方法，包括如下步骤：

S111、选择目标元素，此目标元素为图标或按钮，并对目标元素进行特征点检测，得到目标元素的特征；

S112、识别页面中所有元素的边缘；

S113、根据目标元素特征，筛选对所有元素进行筛选，得到与目标元素类似特征的图形元素，获得泛化元素。

6.如权利要求5所述的测试方法，其特征在于，S112中，包括如下步骤：

S112.1将目标的页面边缘化，首先将测试页面的图像进行预处理变为二值图像，然后检测边缘，边缘检测的公式：

公式(1)中：Gx为水平梯度，Gy:垂直梯度，Edge_Gradient(G)为边缘梯度，Angle(θ)为边缘倾角；

S112.2根据目标元素特征，对获得的边缘进行筛选；

S112.3取交点，选取剩余边缘的交点；

S112.4将各个交点进行连线，选取与目标元素类似的形状，然后通过目标元素特征进行筛选，剩下的就是目标元素的同类元素，从而获得泛化元素。

7.如权利要求4所述的测试方法，其特征在于，S120、DOM树分析方法，包括如下步骤：

S121、寻找目标元素的路径；

S122、根据寻找到的路径寻找同一级路径下的所有元素；

S123、剔除不相关的元素，对目标元素进行泛化，获得泛化元素。

8.如权利要求7所述的测试方法，其特征在于，S123中，剔除方式为寻找到目标元素的父元素，然后依据“当同类元素都找到同一父元素的时候，非同类元素一定不是这一父元素来排除不相关元素”这一条件进行剔除。