CN113886247A - 一种移动端用户界面动态元素定位方法及系统 - Google Patents

Abstract

本发明实施例提供一种移动端用户界面动态元素定位方法，包括：截取满足预设数量的移动端用户界面的显示图像，作为训练图像；将所述训练图像中各动态元素与类型名称的对应关系输入到YOLOV5算法模型；通过所述训练图像对所述YOLOV5算法模型进行模型训练，并得到最终模型；通过所述最终模型对待测试的移动端用户界面中的各动态元素进行定位，所述定位是指识别出图像中的各动态元素的类型名称、以及确定各动态元素在图像中的位置。通过该方法，即使测试页面中动态元素的属性发生了变化，不需要维护更新也能够快速的进行元素的定位。

Description

一种移动端用户界面动态元素定位方法及系统

技术领域

本发明涉及移动终端测试技术领域，具体涉及一种移动端用户界面动态元素定位方法及系统。

背景技术

在用户界面(UI)自动化测试中，需要定位到元素后才能进行输入、点击、滑动等后续自动化测试操作。用户界面是由多个元素对象组成，元素内容不固定且相对位置有一定规律的称为动态元素，比如微博头像就是动态元素，一般位于一条博文的左上角，且不同头像的图片内容完全不同；元素内容固定的成为静态元素。通过元素对象的name、label、value等属性查找元素的过程就是元素定位。

现有技术在UI自动化测试过程中用于元素定位的方法有两种：

1、采用WebDriverAgent(一种iOS移动测试框架)进行用户界面的元素的定位，该工具可以通过WEB页面解析iOS设备界面元素，其中手机屏幕截图、界面元素树和单个元素的属性信息(名称、位置坐标等)三者对照展示。在获取元素属性后，通过WebDriverAgent提供的函数接口定位元素。

2、采用UIAutomator(一种Android测试框架)其中包含Android端界面元素解析的工具uiautomatorviewer.bat，该工具能够将Android手机屏幕截图、界面元素树和单个元素的属性信息(id、class、text、位置坐标等)三者对照展示。在获取元素属性后通过UIAutomator提供的函数接口定位元素。

在实现本发明过程中，发明人发现现有技术中至少存在如下问题：

无论是采用WebDriverAgent对iOS移动终端进行测试，还是采用UIAutomator对Android移动终端进行测试，均是通过元素对象的属性来定位目标元素。对于其中的动态元素，在元素渲染效果不变而上述属性发生变化后，自动化定位代码就会执行失败，被迫维护更新，从而增加了维护成本。因此，如何在属性变化后不需要维护更新就能快速定位动态元素，是需要解决的问题。

发明内容

本发明实施例提供一种移动端用户界面动态元素定位方法及系统，用以解决现有技术中动态元素属性发生变化后，若不维护更新就无法自动定位的问题。

为达上述目的，一方面，本发明实施例提供一种移动端用户界面动态元素定位方法，包括：

截取满足预设数量的移动端用户界面的显示图像，作为训练图像；

将所述训练图像中各动态元素与类型名称的对应关系输入到YOLOV5算法模型；

通过所述训练图像对所述YOLOV5算法模型进行模型训练，并得到最终模型；

通过所述最终模型对待测试的移动端用户界面中的各动态元素进行定位，所述定位是指识别出图像中的各动态元素的类别名称、以及确定各动态元素在图像中的位置。

另一方面，本发明实施例提供一种移动端用户界面动态元素定位系统，包括：

训练图像获取单元，用于截取满足预设数量的移动端用户界面的显示图像，作为训练图像；

关联建立单元，用于将所述训练图像中各动态元素与类型名称的对应关系输入到YOLOV5算法模型；

模型训练单元，用于通过所述训练图像对所述YOLOV5算法模型进行模型训练，并得到最终模型；

定位单元，用于通过所述最终模型对待测试的移动端用户界面中的各动态元素进行定位，所述定位是指识别出图像中的各动态元素的类别名称、以及确定各动态元素在图像中的位置。

上述技术方案具有如下有益效果：

本技术方案采用YOLOV5算法模型对训练图像进行训练，预先确定出移动端用户界面中的各动态元素的相对位置关系；在元素渲染结果不变而动态元素属性发生变化时，通过YOLOV5最终模型对待测试的用户界面图像进行识别，根据训练阶段确定的相对位置关系来对待测试图像中的动态元素进行定位，无需代码维护更新，从而降低了维护成本。

此外，本发明还具有以下特点：

现有技术进行移动端测试时，WebDriverAgent只能用于iOS端，UIAutomator只能用于Android端，因使用不同的测试框架维护两套元素定位代码，其维护成本很高。而采用本技术方案后，可同时适用于Android端和iOS端的动态元素定位，仅需维护一套代码即可，大幅降低了成本。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例一种移动端用户界面动态元素定位方法的流程图；

图2是本发明实施例一种移动端用户界面动态元素定位方法的构成框架图；

图3是本发明的具体实例中的一张训练图像示例；

图4是图3中动态元素遮盖黑色矩形色块后的图像；

图5是本发明的具体实例中的坐标比率数据表示例；

图6是本发明的具体实例中的一张测试图像示例；

图7是图6中动态元素遮盖黑色矩形色块后的图像；

图8是本发明具体实例中YOLOV5最终模型输出结果示例。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

如图1所示，本发明实施例提供一种移动端用户界面动态元素定位方法，包括：

S101、截取满足预设数量的移动端用户界面的显示图像，作为训练图像；

S102、将所述训练图像中各动态元素与类型名称的对应关系输入到YOLOV5算法模型；

S103、通过所述训练图像对所述YOLOV5算法模型进行模型训练，并得到最终模型；

采用YOLOV5算法模型对训练图像进行训练，可以预先确定出移动端用户界面中的各动态元素的相对位置关系，所述最终模型能够描述用户界面中各动态元素的相对位置关系，后续可以根据最终模型中描述的相对位置关系对待测试的移动端用户界面中的各动态元素进行定位；

S104、通过所述最终模型对待测试的移动端用户界面中的各动态元素进行定位，所述定位是指识别出图像中的各动态元素的类别名称、以及确定各动态元素在图像中的位置。

现有技术存在的问题在于，移动端用户界面中，有大量的动态元素(例如头像、昵称等)，在测试过程中，每张测试页面的动态元素的内容是经常变动的，而现有技术在测试时是根据动态元素的属性(name、value、text等)来定位元素的。当更新测试页面后，新的页面中的相应动态元素内容也得到更新，没有办法根据之前的属性来定位相同类型的动态元素。例如，之前移动端用户页面的某测试页中，左上角的头像为一只宠物，其属性中name为“pet”，当需要对头像进行定位时，可根据其名称来查找并定位；当更新测试页面后，头像为花朵，尽管元素渲染效果不变，头像仍旧位于页面的左上角处，但由于此时头像不再是“pet”，移动端的测试程序无法确认哪个元素是头像，也就没办法定位到头像上。此时，只能进行维护更新，在测试程序中更新当前新头像的name为“flower”。故每次变化时，均需要做大量维护工作。

为解决此问题，本申请不再通过元素的属性来查找和定位动态元素，而是根据其在整个页面中的相对位置关系来予以区分。在元素渲染效果不变的情况下，即使测试页面中的动态元素的属性发生了变化，甚至某些动态元素的尺寸也会发生变化(例如某用户界面中的评论区，根据实际内容可显示为单行、或多行)，但其在用户界面中的相对位置也没有改变。因此，若移动端的测试程序通过预先的训练过程，能够区分出各个动态元素在整个用户界面中的相对位置，并将每个动态元素的相对位置与设定的类型名称关联起来得到相对位置关系，在后续测试中，只需根据预先确定的相对位置关系，便可以找到要定位的目标元素。例如前述例子中，将各动态元素分类，并将头像所对应的动态元素的类型名称命名为face，在测试过程中，无需在每次测试中查找“pet”或“flower”，而只需测试程序在测试图像中找到类型名称为face的动态元素，便可定位到测试页面的头像上。

YOLO是一种基于深度神经网络的算法，YOLOV5是其最新版本，其是在COCO数据集上训练的一系列复合规模的对象检测模型，并包括用于测试时间增强(TTA)、模型集成、超参数演变以及导出到ONNX、CoreML和TFLite的简单功能。它以图像作为输入，能够对图形中的目标进行对象识别和定位。因此，本发明的思路即是将其应用于移动端用户界面的测试中，通过训练来找出各动态元素的相对位置关系，从而在测试时无需维护更新即可实现动态元素的自动定位。

为了获得准确的数据，确定各动态元素之间的相对位置关系，需要选用大量的训练样本，因此训练图像的数量要满足训练要求。各动态元素与类型名称的对应关系，可以通过配置文件输入到YOLOV5算法模型中。

进一步的，所述步骤S103包括：

S1031、将所述训练图像中各动态元素分别用黑色矩形色块遮盖；

S1032、将所述被黑色矩形色块遮盖的训练图像输入到所述YOLOV5算法模型，进行模型训练；

S1033、当模型训练的召回率和正确率均达到预设值时，导出最终模型。

YOLOV5算法训练模型在进行目标检测和定位时，通常需要识别元素内容、形状、位置三方面的要素，尤其是元素内容的识别，需要占用大量资源。然而对于本申请来说，由于前述的动态元素内容经常变动的原因，即使对元素内容识别后也无法用于动态元素的比对，该工作对解决问题没有意义，且占用了大量的资源对元素内容进行图像识别。因此，为减少资源占用、提高工作效率，本申请中，将各元素均以黑色矩形色块覆盖，即相当于去掉了元素的内容特性，在识别时无需识别其内容，仅进行形状、位置两方面的要素的识别，从而大大提高了工作效率。并且，采用黑色矩形色块覆盖后，对形状要素的识别工作量也得以降低。

进一步的，所述步骤S104包括：

S1041、从待测试的移动端用户界面截取当前图像，作为测试图像；

S1042、通过所述最终模型对所述测试图像中各动态元素进行定位。

由于YOLOV5以图像作为输入，因此在实际测试时，需要对移动端用户界面进行截图，选取出测试图像作为模型的输入。

进一步的，所述步骤S1042包括：

S10421、将所述测试图像中的各动态元素用黑色矩形色块遮盖；

S10422、将所述被黑色矩形色块遮盖的测试图像输入到所述最终模型；

S10423、对所述测试图像中的每一个动态元素分别进行定位。

由于YOLOV5算法模型在训练时采用了将动态元素用黑色矩形色块遮盖的方法，在实际训练过程汇总，算法模型实际上是将动态元素的检测和定位转化成为了对黑色矩形色块的检测和定位，因此，相应的，在使用最终模型时，也需要将动态元素用黑色矩形色块遮盖，再通过最终模型对各黑色矩形色块进行检测和定位。

在YOLOV5算法模型进行检测和定位时，并不直接获取坐标来定位元素，而是采用获取各黑色矩形色块的角点的坐标比率的方式来定义各动态元素的位置。这非常适用于本申请：由于屏幕像素不同、分辨率不同等原因，用户界面在不同型号的移动终端上具有不同的显示效果，其大小会有一些缩放，因此无法通过直接获取坐标来定位元素。计算坐标比率的方法举例如下：某用户界面的截屏图像中，图形总宽度方向有1000像素，总高度方向为2000像素，其中某动态元素所对应的黑色矩形色块的左上角的横坐标位于横向第100个像素处，则该黑色矩形色块的左上角点的横向坐标比率为100/1000＝0.1，纵坐标位于纵向第200个像素处，则纵向坐标比率为200/2000＝0.1。

进一步的，所述步骤S102之前还包括：

S1015、为所述训练图像中的各动态元素指定类型名称。

由于训练图像和测试图像均是截取自移动端用户界面的显示图像，实际测试图像和训练图像中，均具备相同类型名称的动态元素，且相同类型名称的动态元素在每幅图像中的相对位置也是不变的。在实际测试过程中，根据模型训练过程中所确定的各动态元素间相对位置关系，可以很快地在测试图像中识别出每种类型名称的动态元素的位置。为了能区分出每个动态元素，需要预先为每个动态元素分配类型名称，例如前述的“face”、“Nick”等，必要时，为了检索方便，还可以为每个类型名称的动态元素指定自定义编号。

如图2所示，本发明实施例提供一种移动端用户界面动态元素定位系统，包括：

训练图像获取单元21，用于截取满足预设数量的移动端用户界面的显示图像，作为训练图像；关联建立单元22，用于将所述训练图像中各动态元素与类型名称的对应关系输入到YOLOV5算法模型；模型训练单元23，用于通过所述训练图像对所述YOLOV5算法模型进行模型训练，并得到最终模型；定位单元24，用于通过所述最终模型对待测试的移动端用户界面中的各动态元素进行定位，所述定位是指识别出图像中的各动态元素的类别名称、以及确定各动态元素在图像中的位置。

进一步的，所述模型训练单元23具体用于：将所述训练图像中各动态元素分别用黑色矩形色块遮盖；将所述被黑色矩形色块遮盖的训练图像输入到所述YOLOV5算法模型，进行模型训练；当模型训练的召回率和正确率均达到预设值时，导出最终模型。

进一步的，所述定位单元24包括：

测试图像获取模块241，用于从待测试的移动端用户界面截取当前图像，作为测试图像；定位模块242，用于通过所述最终模型对所述测试图像中各动态元素进行定位。

进一步的，所述定位模块242具体用于：将所述测试图像中的各动态元素用黑色矩形色块遮盖；将所述被黑色矩形色块遮盖的测试图像输入到所述最终模型；对所述测试图像中的每一个动态元素分别进行定位。

进一步的，所述系统还包括：

类型名称建立单元25，用于为所述训练图像中的各动态元素指定类型名称，并提供给所述关联建立单元22。

以下结合一个具体应用实例对本发明实施例上述技术方案进行详细说明：

该实例中，用于对移动端用户界面的动态元素定位的工作主要分为两个阶段。第一阶段的主要工作是通过模型训练来确定各动态元素的坐标比率数据，从而进一步确定出各动态元素与整体图像的相对位置关系、以及各动态元素之间的相对位置关系。

步骤1：截取微博广告图片，如图3所示；

步骤2：为了去掉元素内容特性，只保留元素空间关系特性，微博广告截图中的有效内容使用同等大小的黑色矩形覆盖，处理后的效果如图4所示；

步骤3：为每个动态元素的类型名称自定义编号，例如标注face为0、nick为1、nick_blow为2、close为3、forward_text为5、comment_text为6等等，(face、nick、nick_blow等即为类型名称)再把各动态元素的坐标比率(即个元素相对于整个微博广告截图的相对位置坐标)转化成YOLOV5元素标注的数据格式，如图5所示，即为坐标比率数据表，其中每行表示一个动态元素，空格隔开的第一部分是自定义编号，后四部分是坐标比率值；自定义编号并非必须的，但可以更便于数据查找。

步骤4：重复步骤1-3，为了保证准去性，采集不少于300个训练样本，YOLOV5算法模型训练到召回率和正确率都在95％以上即可导出模型(即最终模型)，准备在下一阶段使用。

第二阶段主要工作是在实际测试阶段，通过模型使用来进行移动端用户界面的动态元素定位，步骤如下：

步骤1：如图6所示，截取实际测试的微博广告图片；

步骤2：如图7所示，微博广告截图中的有效内容使用同等大小的黑色矩形覆盖；

步骤3：把图7输入到YOLOV5最终模型中进行目标检测，输出结果如8图所示，图中显示了测试图像中的各动态元素的类型名称、自定义编号和位置等信息，该结果为初步得到的结果，部分类型名称的动态元素存在多行数据，后续可通过相应的技术手段进行筛选，选出其中可信度最高的数据；

步骤4：遍历图8所示的表，根据动态元素的类型名称(即图中“icon_name”字段)找到目标元素，即完成定位。

为使本领域内的任何技术人员能够实现或者使用本发明，上面对所公开实施例进行了描述。对于本领域技术人员来说；这些实施例的各种修改方式都是显而易见的，并且本文定义的一般原理也可以在不脱离本公开的精神和保护范围的基础上适用于其它实施例。因此，本公开并不限于本文给出的实施例，而是与本申请公开的原理和新颖性特征的最广范围相一致。

以上所述的具体实施方式，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施方式而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种移动端用户界面动态元素定位方法，其特征在于，包括：

截取满足预设数量的移动端用户界面的显示图像，作为训练图像；

将所述训练图像中各动态元素与类型名称的对应关系输入到YOLOV5算法模型；

通过所述训练图像对所述YOLOV5算法模型进行模型训练，并得到最终模型；

通过所述最终模型对待测试的移动端用户界面中的各动态元素进行定位，所述定位是指识别出图像中的各动态元素的类型名称、以及确定各动态元素在图像中的位置。

2.如权利要求1所述的移动端用户界面动态元素定位方法，其特征在于，所述通过训练图像对所述YOLOV5算法模型进行模型训练，并得到最终模型，包括：

将所述训练图像中各动态元素分别用黑色矩形色块遮盖；

将所述被黑色矩形色块遮盖的训练图像输入到所述YOLOV5算法模型，进行模型训练；

当模型训练的召回率和正确率均达到预设值时，导出最终模型。

3.如权利要求1或2所述的移动端用户界面动态元素定位方法，其特征在于，所述通过最终模型对移动端用户界面中的动态元素进行定位，包括：

从待测试的移动端用户界面截取当前图像，作为测试图像；

通过所述最终模型对所述测试图像中各动态元素进行定位。

4.如权利要求3所述的移动端用户界面动态元素定位方法，其特征在于，所述通过最终模型对所述测试图像中各动态元素进行定位，包括：

将所述测试图像中的各动态元素用黑色矩形色块遮盖；

将所述被黑色矩形色块遮盖的测试图像输入到所述最终模型；

对所述测试图像中的每一个动态元素分别进行定位。

5.如权利要求1所述的移动端用户界面动态元素定位方法，其特征在于，在将所述训练图像中各动态元素与类型名称的对应关系输入到YOLOV5算法模型之前，还包括：

为所述训练图像中的各动态元素指定类型名称。

6.一种移动端用户界面动态元素定位系统，其特征在于，包括：

训练图像获取单元，用于截取满足预设数量的移动端用户界面的显示图像，作为训练图像；

关联建立单元，用于将所述训练图像中各动态元素与类型名称的对应关系输入到YOLOV5算法模型；

模型训练单元，用于通过所述训练图像对所述YOLOV5算法模型进行模型训练，并得到最终模型；

定位单元，用于通过所述最终模型对待测试的移动端用户界面中的各动态元素进行定位，所述定位是指识别出图像中的各动态元素的类型名称、以及确定各动态元素在图像中的位置。

7.如权利要求6所述的移动端用户界面动态元素定位系统，其特征在于，所述模型训练单元具体用于：将所述训练图像中各动态元素分别用黑色矩形色块遮盖；将所述被黑色矩形色块遮盖的训练图像输入到所述YOLOV5算法模型，进行模型训练；当模型训练的召回率和正确率均达到预设值时，导出最终模型。

8.如权利要求6或7所述的移动端用户界面动态元素定位系统，其特征在于，所述定位单元包括：

测试图像获取模块，用于从待测试的移动端用户界面截取当前图像，作为测试图像；

定位模块，用于通过所述最终模型对所述测试图像中各动态元素进行定位。

9.如权利要求8所述的移动端用户界面动态元素定位系统，其特征在于，所述定位模块具体用于：将所述测试图像中的各动态元素用黑色矩形色块遮盖；将所述被黑色矩形色块遮盖的测试图像输入到所述最终模型；对所述测试图像中的每一个动态元素分别进行定位。

10.如权利要求6所述的移动端用户界面动态元素定位系统，其特征在于，所述系统还包括：

类型名称建立单元，用于为所述训练图像中的各动态元素指定类型名称，并提供给所述关联建立单元。

Images