CN111580902A - 一种基于图片分析的移动端元素定位方法及系统 - Google Patents

Abstract

一种基于图片分析的移动终端元素定位方法及系统，所述方法包括：获取用户操作界面上的手机截屏，得到图片A，所述图片A中包含需要定位的元素，获取用户操作界面上与图片A具有相同背景图像的手机截屏，得到图片B，所述图片B中不包含需要定位的元素；分别获取图片A的图像数据a、以及图片B的图像数据b；将所述图像数据a减去图像数据b得到图像数据c，所述图像数据c中只包含所述需要定位的元素；对所述图像数据c进行轮廓确定，以及确定所述轮廓的中心点，以该中心点的坐标位置定位所述需要定位的元素。本发明填补了使用WebdriverAgent无法定位图片上元素的空白，使得自动化程序能够正常测试图片上元素涉及到的所有功能点。

Description

一种基于图片分析的移动端元素定位方法及系统

技术领域

本发明涉及移动终端测试自动化的技术领域，尤其涉及一种基于图片分析的移动终端元素定位方法及系统。

背景技术

在现有技术中，手机操作系统移动测试框架WebDriverAgent是Facebook在SeleniumConf大会上推出了一款新的手机移动测试框架，该工具可以通过WEB页面解析手机设备界面元素，其中手机屏幕截图、界面元素树和单个元素的属性信息，包括名称、位置坐标等三者对照展示。

其现有测试框架在解析界面元素时，图片之上的元素无法获取元素的属性，以微博为例，九宫格样式的图片中，有一个标签按钮随机出现在图片上的某个位置，虽然该框架的界面解析工具截图中有该标签按钮，但是界面元素解析树中并没有该按钮，更无法获取该元素的属性信息。

综上所述，现有技术存在WebDriverAgent测试框架无法识别图片上的元素导致自动化程序无法操作某些控件，导致自动化的功能点不完整的问题。

发明内容

为实现上述目的，本发明实施例提供一种基于图片分析的移动终端元素定位方法及系统，通过本发明解决了WebDriverAgent测试框架无法识别图片上的元素导致自动化程序无法操作某些控件，导致自动化的功能点不完整的问题。

一方面，本发明实施例提供一种基于图片分析的移动终端元素定位方法，所述方法包括：

获取用户操作界面上的手机截屏，得到图片A，所述图片A中包含需要定位的元素，获取用户操作界面上与图片A具有相同背景图像的手机截屏，得到图片B，所述图片B中不包含需要定位的元素；

分别获取图片A的图像数据a、以及图片B的图像数据b；

将所述图像数据a减去图像数据b得到图像数据c，所述图像数据c中只包含所述需要定位的元素；

对所述图像数据c进行轮廓确定，以及确定所述轮廓的中心点，以该中心点的坐标位置定位所述需要定位的元素。

另一方面，本发明实施例还提供一种基于图片分析的移动终端元素定位系统，所述系统包括：

图片获取单元，用于获取用户操作界面上的手机截屏，得到图片A，所述图片A中包含需要定位的元素，获取用户操作界面上与图片A具有相同背景图像的手机截屏，得到图片B，所述图片B中不包含需要定位的元素；

图片读取单元，用于分别获取图片A的图像数据a、以及图片B的图像数据b；

数据处理单元，用于将所述图像数据a减去图像数据b得到图像数据c，所述图像数据c中只包含所述需要定位的元素；

坐标计算单元，用于对所述图像数据c进行轮廓确定，以及确定所述轮廓的中心点，以该中心点的坐标位置定位所述需要定位的元素。

上述技术方案具有如下有益效果：本发明与现有技术比较，本技术方案填补了使用WebdriverAgent无法定位图片上元素的空白，使得自动化程序能够正常测试图片上元素涉及到的所有功能点，因此待测APP的UI自动化测试更加全面完整。

附图说明

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

图1是本发明实施例的基于图片分析的移动终端元素定位方法的流程图；

图2是本发明实施例的基于图片分析的移动终端元素定位系统的示意图；

图3是本发明具体实施例中图片A的示意图；

图4是本发明具体实施例中图片B的示意图；

图5是本发明具体实施例中包含需要定位的元素及其背景图像的图片A的示意图；

图6是本发明具体实施例中不包含需要定位的元素的背景图像的图片B的示意图；

图7是本发明具体实施例中图像数据c的图片；

图8是本发明具体实施例中图像数据c进行灰度化处理后的图片；

图9是本发明具体实施例中图像数据c进行灰度化、过滤处理后的图片；

图10是本发明具体实施例中图像数据c进行轮廓确定后的图片；

图11是本发明具体实施例中需要定位的元素的标记图片。

具体实施方式

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

本发明的中涉及到的缩略语和关键术语定义如下：

1、移动终端：移动终端是指可以在移动中使用的计算机设备，包括有手机、平板电脑、笔记本等。此处特指手机。

2、用户界面：即UI(UserInterface)，指对软件的人机交互、操作逻辑、界面美观的整体设计。此处特指移动终端上的用户操作界面。

3、手机：苹果公司于2007年公布的移动终端操作系统，主要运行在苹果公司的ipod、iphone和ipad系列产品上。

4、图片分析：对图像中感兴趣的目标进行检测和测量，以获得他们的客观信息，从而建立对图像的描述。

5、元素定位：在UI自动化测试中，用户界面是由多个元素对象组成，通过元素对象的name、label标签、value值等属性查找元素的过程就是元素定位，定位到元素后才能进行输入、点击、滑动等后续自动化测试操作。

6、WebDriverAgent：WebDriverAgent是Web驱动程序代理，简称WDA。它是由Facebook推出的一款移动端测试框架。它是在手机客户端实现了一个网络驱动器WebDriver的Server服务器，借助这个server，我们可以远程控制手机设备进行测试。

7、OpenCv：OpenCv是一个基于BSD许可开源发行的跨平台计算机视觉库，可以运行在Linux、Windows、Android和Mac OS操作系统上。它轻量级而且高效——由一系列C函数和少量C++类构成，同时提供了Python、Ruby、MATLAB等语言的接口，实现了图像处理和计算机视觉方面的很多通用算法。

如图1所示，为本发明实施例的基于图片分析的移动终端元素定位方法的流程图，本发明适用于IOS系统以及安卓系统，所述方法包括：

获取用户操作界面上的手机截屏，得到图片A，所述图片A中包含需要定位的元素，获取用户操作界面上与图片A具有相同背景图像的手机截屏，得到图片B，所述图片B中不包含需要定位的元素；

分别获取图片A和图片B的图像数据a和图像数据b，具体通过读取所述图片A和图片B，得到所述图片A的图像数据a，得到所述图片B的图像数据b；

所述图像数据a减去图像数据b得到图像数据c，所述图像数据c中只包含所述需要定位的元素，进一步地，对所述图像数据c依次进行灰度化处理、过滤处理，定位所述处理后的图像数据c中的有效内容，并对所述有效内容的轮廓进行标记，所述有效内容即所述需要定位的元素；

对所述搜索需要定位元素的图像数据进行轮廓确定，从而确定所述轮廓的中心点，根据所述有效内容的轮廓中所有轮廓点的坐标计算得到轮廓中心点的坐标，以该中心点的坐标位置定位所述需要定位的元素。

优选地，分别获取图片A和图片A的图像数据a和图像数据b，具体包括：通过Python语言调用开源计算机视觉库OpenCv库提供的接口imread,分别读取图片A和图片A，得到图像数据a和图像数据b。

优选地，在所述将图像数据a减去图像数据b得到图像数据c之后，还包括：通过OpenCv库提供的接口CvtColor对图像数据c进行灰度化处理；通过OpenCv库提供的接口threshold过滤掉经过灰度化处理的图像数据c中的干扰像素点。

优选地，在所述分别获取图片A和图片A的图像数据a和图像数据b之前，还包括：对初始的图片A进行裁剪，获得既包含需要定位的元素又包含背景图像的图片A；对初始的图片B进行裁剪，获得不包含需要定位的元素仅包含背景图像的图片B，即对所述图片A进行裁剪，保留图片自上而下五分之一到五分之四的部分，对所述图片B进行裁剪，保留图片自上而下五分之一到五分之四的部分。

使用Python语言读取仅包含元素及其背景图像的图片A和仅包含背景图像的图片B，分别得到所述仅包含元素及其背景图像的图片A和仅包含背景图像的图片B的图像数据a和图像数据b；上述图像数据a减去图像数据b得到图像数据c。

优选地，所述对所述搜索需要定位元素的图像数据进行轮廓确定，具体包括：通过OpenCv库提供的findContours接口对图像数据进行轮廓标记，从而确定图像数据的轮廓，其中，轮廓边界点以绿色点的形式标记。

如图2所示，为本发明实施例的基于图片分析的移动终端元素定位系统的示意图，所述系统包括：

图片获取单元21，用于获取用户操作界面上的手机截屏，得到图片A，所述图片A中包含需要定位的元素，获取用户操作界面上与图片A具有相同背景图像的手机截屏，得到图片B，所述图片B中不包含需要定位的元素；

图片读取单元22，用于分别获取图片A的图像数据a、以及图片B的图像数据b；

数据处理单元23，用于将所述图像数据a减去图像数据b得到图像数据c，所述图像数据c中只包含所述需要定位的元素；

坐标计算单元24，用于对所述图像数据c进行轮廓确定，以及确定所述轮廓的中心点，以该中心点的坐标位置定位所述需要定位的元素。

优选地，所述图片读取单元22，具体包括：

通过Python语言调用开源计算机视觉库OpenCv库提供的接口imread,分别读取图片A和图片A，得到图像数据a和图像数据b。

优选地，所述系统还包括去干扰单元，用于：

在所述将图像数据a减去图像数据b得到图像数据c之后，通过OpenCv库提供的接口CvtColor对图像数据c进行灰度化处理；

通过OpenCv库提供的接口threshold过滤掉经过灰度化处理的图像数据c中的干扰像素点。

优选地，所述系统还包括裁剪单元，用于：

在所述分别获取图片A的图像数据a、以及图片B的图像数据b之前，对初始的图片A进行裁剪，获得既包含需要定位的元素又包含背景图像的图片A；

对初始的图片B进行裁剪，获得不包含需要定位的元素仅包含背景图像的图片B。

优选地，所述坐标计算单元24，具体包括：

通过OpenCv库提供的接口findContours对图像数据c进行轮廓标记，从而确定图像数据c的轮廓。

根据本技术方案，例举一具体实施方案如下：

步骤1：在自动化程序运行到如图3界面时，通过元素属性name为“立即使用”来自动判断图片上的按钮是否能够被成功识别，得到结果是不能识别，然后开始下面通过图片分析进行元素定位的过程；

步骤2：自动化程序截取手机屏幕，得到图3。

步骤3：自动化程序通过元素属性name为“收起”，定位到左下角的按钮，并点击；

步骤4：自动化程序截取手机屏幕，得到图4。

步骤5：对图3进行裁剪，保留图片自上而下五分之一到五分之四的部分，得到图5。

步骤6：对图4进行裁剪，保留图片自上而下五分之一到五分之四的部分，得到图6。

步骤7：使用Python语言OpenCv库提供的接口imread读取图5和图6，分别得到OpenCv图片对象5和图片对象6，imread是计算机语言中的一个函数，用于读取图片文件中的数据。

步骤8：图片对象5减去图片对象6，得到图片对象7，如图7所示。

步骤9：使用OpenCv库接口CvtColor对图片对象7进行灰度化处理，得到图片对象8，如图8所示，CvtColor是OpenCv里的颜色空间转换函数，可以实现RGB颜色向HSV,HSI等颜色空间的转换，也可以转换为灰度图像。

步骤10：使用OpenCv库接口threshold过滤掉图片对象8中小的干扰像素点，得到图片对象9，如图9所示，threshold方法是通过遍历灰度图中点，将图像信息二值化，处理过后的图片只有二种色值。

步骤11：使用OpenCv库接口findContours找到当前图片对象9中有效内容的轮廓，轮廓边界点以绿色点的形式画在图片对象9上得到图片对象10，如图10所示，findContours函数是opencv中非常有用的分割函数，为开发人员提供形状、面积等拓扑信息等。

步骤12：根据上步中得到的所有轮廓点的坐标计算得到轮廓中心点的坐标，坐标位置如图11红点所示：

步骤13：根据上图11中红点的坐标就可以对目前元素进行点击操作了，至此解决了WebdriverAgent无法定位图片上元素的问题。

应该明白，公开的过程中的步骤的特定顺序或层次是示例性方法的实例。基于设计偏好，应该理解，过程中的步骤的特定顺序或层次可以在不脱离本公开的保护范围的情况下得到重新安排。所附的方法权利要求以示例性的顺序给出了各种步骤的要素，并且不是要限于所述的特定顺序或层次。

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

Claims (10)

1.一种基于图片分析的移动端元素定位方法，其特征在于，所述方法包括：

获取用户操作界面上的手机截屏，得到图片A，所述图片A中包含需要定位的元素，获取用户操作界面上与图片A具有相同背景图像的手机截屏，得到图片B，所述图片B中不包含需要定位的元素；

分别获取图片A的图像数据a、以及图片B的图像数据b；

将所述图像数据a减去图像数据b得到图像数据c，所述图像数据c中只包含所述需要定位的元素；

对所述图像数据c进行轮廓确定，以及确定所述轮廓的中心点，以该中心点的坐标位置定位所述需要定位的元素。

2.如权利要求1所述的基于图片分析的移动终端元素定位方法，其特征在于，分别获取图片A的图像数据a、以及图片B的图像数据b，具体包括：

通过Python语言调用开源计算机视觉库OpenCv库提供的接口imread,分别读取图片A和图片B，得到图像数据a和图像数据b。

3.如权利要求1所述的基于图片分析的移动终端元素定位方法，其特征在于，在所述将图像数据a减去图像数据b得到图像数据c之后，还包括：

通过OpenCv库提供的接口CvtColor对图像数据c进行灰度化处理；

通过OpenCv库提供的接口threshold过滤掉经过灰度化处理的图像数据c中的干扰像素点。

4.如权利要求1所述的基于图片分析的移动终端元素定位方法，其特征在于，在所述分别获取图片A的图像数据a、以及图片B的图像数据b之前，还包括：

对初始的图片A进行裁剪，获得既包含需要定位的元素又包含背景图像的图片A；

对初始的图片B进行裁剪，获得不包含需要定位的元素仅包含背景图像的图片B。

5.如权利要求1所述的基于图片分析的移动终端元素定位方法，其特征在于，所述对所述图像数据c进行轮廓确定，具体包括：

通过OpenCv库提供的接口findContours对图像数据c进行轮廓标记，从而确定图像数据c的轮廓。

6.一种基于图片分析的移动端元素定位系统，其特征在于，所述系统包括：

图片获取单元，用于获取用户操作界面上的手机截屏，得到图片A，所述图片A中包含需要定位的元素，获取用户操作界面上与图片A具有相同背景图像的手机截屏，得到图片B，所述图片B中不包含需要定位的元素；

图片读取单元，用于分别获取图片A的图像数据a、以及图片B的图像数据b；

数据处理单元，用于将所述图像数据a减去图像数据b得到图像数据c，所述图像数据c中只包含所述需要定位的元素；

坐标计算单元，用于对所述图像数据c进行轮廓确定，以及确定所述轮廓的中心点，以该中心点的坐标位置定位所述需要定位的元素。

7.如权利要求6所述的基于图片分析的移动终端元素定位系统，其特征在于，所述图片读取单元，具体用于：

通过Python语言调用开源计算机视觉库OpenCv库提供的接口imread,分别读取图片A和图片B，得到图像数据a和图像数据b。

8.如权利要求6所述的基于图片分析的移动终端元素定位系统，其特征在于，所述系统还包括去干扰单元，用于：

在所述将图像数据a减去图像数据b得到图像数据c之后，通过OpenCv库提供的接口CvtColor对图像数据c进行灰度化处理；

通过OpenCv库提供的接口threshold过滤掉经过灰度化处理的图像数据c中的干扰像素点。

9.如权利要求6所述的基于图片分析的移动终端元素定位系统，其特征在于，所述系统还包括裁剪单元，用于：

在所述分别获取图片A的图像数据a、以及图片B的图像数据b之前，对初始的图片A进行裁剪，获得既包含需要定位的元素又包含背景图像的图片A；

对初始的图片B进行裁剪，获得不包含需要定位的元素仅包含背景图像的图片B。

10.如权利要求6所述的基于图片分析的移动终端元素定位系统，其特征在于，所述坐标计算单元，具体用于：

通过OpenCv库提供的接口findContours对图像数据c进行轮廓标记，从而确定图像数据c的轮廓。

Images