CN112506600A - 用户界面的元素定位方法及其装置、介质和电子设备 - Google Patents
用户界面的元素定位方法及其装置、介质和电子设备 Download PDFInfo
- Publication number
- CN112506600A CN112506600A CN202011442025.9A CN202011442025A CN112506600A CN 112506600 A CN112506600 A CN 112506600A CN 202011442025 A CN202011442025 A CN 202011442025A CN 112506600 A CN112506600 A CN 112506600A
- Authority
- CN
- China
- Prior art keywords
- screenshot
- user interface
- web page
- page
- tested
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 85
- 238000012360 testing method Methods 0.000 claims abstract description 35
- 238000012545 processing Methods 0.000 claims description 89
- 230000006870 function Effects 0.000 claims description 73
- 230000015654 memory Effects 0.000 claims description 26
- 238000005260 corrosion Methods 0.000 claims description 18
- 230000007797 corrosion Effects 0.000 claims description 18
- 238000007781 pre-processing Methods 0.000 claims description 15
- 238000006243 chemical reaction Methods 0.000 claims description 11
- 238000012216 screening Methods 0.000 claims description 9
- 230000004807 localization Effects 0.000 claims 2
- 238000012423 maintenance Methods 0.000 abstract description 5
- 238000005516 engineering process Methods 0.000 abstract description 2
- 238000001514 detection method Methods 0.000 description 93
- 230000008569 process Effects 0.000 description 18
- 238000004422 calculation algorithm Methods 0.000 description 17
- 238000010586 diagram Methods 0.000 description 15
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 10
- 230000003628 erosive effect Effects 0.000 description 9
- 230000009286 beneficial effect Effects 0.000 description 7
- 238000004364 calculation method Methods 0.000 description 6
- 238000010276 construction Methods 0.000 description 5
- 241000760358 Enodes Species 0.000 description 4
- 230000008859 change Effects 0.000 description 4
- 238000004891 communication Methods 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 238000005530 etching Methods 0.000 description 3
- 230000007246 mechanism Effects 0.000 description 3
- 238000012544 monitoring process Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 230000004044 response Effects 0.000 description 3
- 230000000007 visual effect Effects 0.000 description 3
- 238000004458 analytical method Methods 0.000 description 2
- 238000013461 design Methods 0.000 description 2
- 230000014509 gene expression Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000002093 peripheral effect Effects 0.000 description 2
- 241001270131 Agaricus moelleri Species 0.000 description 1
- 239000003795 chemical substances by application Substances 0.000 description 1
- 230000006835 compression Effects 0.000 description 1
- 238000007906 compression Methods 0.000 description 1
- 238000004590 computer program Methods 0.000 description 1
- 230000007613 environmental effect Effects 0.000 description 1
- 230000008571 general function Effects 0.000 description 1
- 238000012812 general test Methods 0.000 description 1
- 230000009191 jumping Effects 0.000 description 1
- 238000005192 partition Methods 0.000 description 1
- 230000000644 propagated effect Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000012795 verification Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/3668—Software testing
- G06F11/3672—Test management
- G06F11/3688—Test management for test execution, e.g. scheduling of test suites
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Debugging And Monitoring (AREA)
Abstract
本申请涉及计算机测试技术领域，特别涉及一种用户界面的元素定位方法及其装置、介质和电子设备。本申请的用户界面的元素定位方法包括：包括：获取待测用户界面的待测用户界面的截图，获取待测用户界面中的元素在待测用户界面的截图中的位置，根据获取的每个元素在待测用户界面的截图中的位置，获取每个元素在待测用户界面中的Xpath和/或截图。在用户界面产品迭代更新时，不需要重新设计或修改元素定位程序，本申请的用户界面的元素定位方法可以自适应用户界面的元素位置、元素增减等的变化，有效减少在用户界面自动化测试时元素定位信息的维护成本，提高定位元素的执行效率。
Description
技术领域
本申请涉及计算机测试技术领域，特别涉及一种用户界面的元素定位方法及其装置、介质和电子设备。
背景技术
在UI(User Interface，UI)自动化测试中，测试用例构建流程一般为定位被测用户界面UI元素，对元素进行操作，验证被测用户界面UI响应是否符合预期，通用测试框架可以通过程序代码驱动完成对元素的操作判断用户界面响应是否符合预期。
全球广域网(World Wide Web，web)页面是目前UI自动化测试的重要对象，要对Web页面进行测试的重点在于对前端框架的了解，其中，不同前端框架包含各种不同的元素，这不仅保证了Web页面的丰富性，同时对于Web页面的自动化测试也带来了挑战。
现有技术中，UI自动化测试过程中定位元素的程序是固定的，所以随着UI产品迭代或者UI产品更新时，固定的定位程序无法适应前端UI的变化，导致原有的定位方式较大概率失效，为维护测试用例，再次的人力投入在所难免。以上背景让UI自动化测试在企业中的投入产出比达不到理想水平。
发明内容
本申请提供的用户界面的元素定位方法，在用户界面UI产品迭代更新时，不需要重新设计或修改元素定位程序，本申请的用户界面的元素定位方法可以自适应UI的元素位置、元素增减等的变化，有效减少元素定位信息的维护成本，提高定位元素的执行效率。
本申请实施例提供了一种用户界面的元素定位方法及其装置介质和电子设备。
第一方面，本申请实施例提供了一种用户界面的元素定位方法，包括：获取待测UI的截图；获取所述待测UI中的元素在待测UI的截图中的位置；根据获取的每个元素在所述图像中的位置，获取所述每个元素在所述待测UI中的可扩展标记语言路径语言Xpath和/或截图，其中每个Xpath用于定位待测UI中的一个元素。
可以理解的是，网页驱动单元通过实时截取UI的整个界面来生成待测UI的截图，当用户界面发生变化时，例如用户对UI的元素执行点击、输入等操作导致用户界面切换，网页驱动单元及时检测到，并及时截取整个界面生成待测UI的截图。因此，通过本申请的用户界面的元素定位方法可以及时生成用于自动化测试的Xpath，提高后续自动化测试效率。另外，元素检测单元通过对待测UI的截图执行预处理操作可以检测元素的轮廓生成元素在UI中所在区域的位置坐标(即元素坐标列表)，使得无论后续产品迭代元素在UI中如何变化，元素检测单元都可以实现对元素轮廓的检测以及生成元素的位置坐标。减少开发人员的人力投入及产品维护成本，提高效率。其中，产品迭代导致元素在UI中的变化包括：元素图形或文字的变化，元素在UI中位置的变化，元素的增减变化等。可以理解，网页驱动单元根据元素在UI中的坐标，通过基于元素匹配的Xpath结构相似性计算的递归算法生成元素的Xpath。相较于其他元素定位(例如id,name等)，使用Xpath定位UI元素有利于验证UI是否发生变化。如果UI结构发生变化，Xpath始终可以定位到元素的路径，大大降低自动化测试的维护成本，提高自动化测试效率。
在上述第一方面的一种可能的实现中，上述方法还包括：所述待测UI为web应用的页面。
可以理解的是，网页驱动单元获取待测web应用的页面(即web页面)的web页面图像，网页驱动单元将web页面图像发送给元素定位单元，由元素定位单元实现对web页面元素在web页面中的定位，生成元素在web页面图像的坐标列表，网页驱动单元根据元素定位单元生成的元素坐标列表生成元素在待测web页面中的Xpath和/或截图。通过本申请的方法，对web页面元素的定位生成web页面的Xpath，可以理解，生成的web页面的Xpath可以用于web页面的自动化测试。
在上述第一方面的一种可能的实现中，上述方法还包括：所述方法通过网页驱动单元实现，所述网页驱动单元为所述web应用的扩展。
在上述第一方面的一种可能的实现中，上述方法还包括：其中，所述背景页的功能包括以下至少一项：实时对所述web应用的页面进行截图操作得到待测UI的截图；获取元素在web应用的页面实时截图得到的待测UI的截图中的位置；保存所述web应用的页面中的元素的Xpath；所述嵌入页的功能包括以下至少一项：根据元素在所述web应用的页面截图得到的待测UI的截图中的位置，获取所述web应用的页面中的元素的Xpath和/或截图；保存web应用的页面中的元素的截图；所述配置页的功能包括以下至少一项：打开或关闭所述网页驱动单元；查看web应用的页面中的元素的Xpath和/或截图的保存路径。
可以理解的是，网页驱动单元可以为“chrome扩展”，其中，“chrome扩展”包括背景页、配置页和嵌入页，背景页负责web应用中的各页面的消息通信、事件监听、web页面截图获取、文件保存等。例如，各页面的消息通信包括背景页将获取的待测UI的截图(即web页面的截图)发送给元素检测单元、背景页接收元素检测单元发送的元素坐标列表并将元素坐标列表发送给嵌入页、背景页接收嵌入页生成的Xpath等。可以理解，背景页负责与嵌入页或元素检测单元交互，有利于实现待测UI的截图发送给元素检测单元执行元素检测，实现不同单元的交互。背景页的事件监听包括当用户对web页面的元素执行点击、输入等操作导致web页面切换，背景页可以及时监听到，并且可以实现实时对web页面的全部画面截图操作(即获取待测UI的截图)。可以理解，背景页的事件监听功能可以提高测试覆盖范围的全面性，有利于检测页面的变化，从而对不同页面状态下的元素进行定位，对每一种页面状态进行检测。背景页的文件保存包括背景页可以保存嵌入页生成的包含所有元素Xpath的Xpath列表，有利于用户或开发人员及时查看生成的Xpath列表，防止生成的Xpath列表出现错漏元素Xpath的现象，从而保证后续UI自动化测试的准确性。
可以理解的是，配置页作为用户与网页驱动单元交互的页面，其中，配置页的页面内容可以由开发人员设置，例如，开发人员可以在配置页设置打开或关闭网页驱动单元的开关。开发人员还可以在配置页设置元素的Xpath和/或截图是否保存的开关及生成的保存路径地址等。可以理解，通过配置页用户可以打开或关闭网页驱动单元的功能，还可以查看生成元素的Xpath及截图等，有利于用户随时查看生成的元素的Xpath和/或截图，使后续的UI自动化测试更加便捷。
可以理解的是，嵌入页根据待测web页面中的元素在所述web页面图像中的位置，获取所述每个元素在所述待测web页面中的Xpath和/或截图，并保存元素的Xpath和/或截图。具体地，嵌入页可以根据元素坐标列表，通过基于元素匹配的Xpath结构相似性计算的递归算法生成元素的Xpath。同时嵌入页可以保存生成的元素的截图，同时将生成的Xpath发送给背景页保存。嵌入页保存的元素的截图可以有利于后续用户或开发人员查看元素检测单元生成的元素坐标列表是否正确，具体包括：例如，元素检测单元根据元素轮廓裁剪的元素在web页面所在区域的最小覆盖矩形是否正确，即裁剪的最小矩形未包含单个元素的全部区域或者裁剪的最小矩形包含单个元素的区域过大等；例如，元素检测单元未完全检测到web页面的所有元素或者将web页面的噪声当作元素，进一步地生成了该噪声所在区域的坐标，等等。
可以理解的是，背景页对待测web页面进行截图操作得到web页面图像即网页驱动单元对待测web页面的整个界面截取图像得到待测UI的截图。因此，web页面图像包含待测web页面中的所有元素的图像(即元素的截图)，并且待测web页面的截图中的元素的截图的相对位置或者图文标识与在web页面中的元素的相对位置或者图文标识一致。可以理解，通过获取每个元素在web页面图像的坐标位置即获取每个元素在web页面的坐标位置。
在上述第一方面的一种可能的实现中，上述方法还包括：所述待测UI中的所述每个元素在所述图像中的位置，由对应元素在所述待测UI的截图中所处区域的坐标表示；所述根据确定的每个元素在所述图像中的位置，获取所述每个元素在所述待测UI中的Xpath和/或截图，包括：所述根据确定的每个元素在所述图像中所处区域的坐标，获取所述每个元素在所述待测UI中的Xpath和/或截图。
可以理解的是，网页驱动单元向元素检测单元发送待测UI的截图，相应的，元素检测单元可以从网页驱动单元接收到待测UI的截图，具体地，待测UI中的每个元素在待测UI的截图中的位置，由相应元素在待测UI的截图中所在区域的位置坐标表示，即元素检测单元生成每个元素在待测UI的截图的位置坐标，针对UI的所有元素的位置坐标，组成UI元素的坐标列表。网页驱动单元从元素检测单元获取待测UI中的元素在待测UI的截图中的位置。相应的，元素检测单元可以待测UI的待测UI的截图进行处理，得到待测UI中的元素在待测UI的截图中的位置，相应的，网页驱动单元从元素检测单元获取待测UI中的元素在待测UI的截图中的位置。针对UI元素位置布局或者元素功能更新时，不需要重新设计或者修改UI测试用例，可以理解，元素检测单元通过检测每个元素的轮廓进一步确定每个元素在待测UI的截图中所处区域的坐标，获取所述每个元素在所述待测UI中的Xpath和/或截图。减少人力投入，提高后续UI自动化测试的效率。
在上述第一方面的一种可能的实现中，上述方法还包括：所述待测UI中的元素在所述待测UI的截图中的位置通过所述待测UI的截图进行图像预处理得到，所述图像预处理包括以下至少一项：转灰度处理、二值化处理、膨胀处理、腐蚀处理、查找元素轮廓处理、元素所在最小矩形区域的坐标处理、元素筛选处理。
可以理解的是，元素检测单元可以接收待测web页面的web页面图像并对其进行预处理，得到待测web页面中的元素在web页面图像中的位置，web页面图像转灰度处理即元素检测单元13利用OpenCV的cvtColor函数对待测web页面的待测UI的截图进行灰度化处理，得到web页面灰度图像，可以理解，对待测web页面的待测UI的截图转灰度可减少待测UI的截图的存储空间，并且有利于后续的待测UI的截图处理。转灰度处理即采用OpenCV中的最大类间方差OTSU算法对生成web页面灰度图进行二值化，获得web页面二值化图像。可以理解，web页面灰度图的二值化处理使图像的数据量大为减少，有利于后续图像的处理和分析。二值化处理即使用OpenCV中的最大类间方差OTSU算法对web页面灰度图进行二值化处理，可以提取web页面灰度图内灰度值较高部分，web页面二值化图像的错分概率最小，web页面二值化图像中的web页面元素会更清晰。膨胀处理包括一次膨胀处理，二次膨胀处理。一次膨胀处理即采用OpenCV的morphologyEx函数和dilate函数对web页面二值化图像进行一次膨胀，生成web页面一次膨胀图像，可以理解，相较于web页面二值化图像，web页面一次膨胀图像中的web页面元素轮廓更加清晰。腐蚀处理即采用OpenCV的getStructuringElement函数和erode函数对web页面一次膨胀图像做腐蚀处理，可以理解，元素检测单元针对web页面一次膨胀图像的白色像素点，可以消除非连通的白色小区域，以去除线条等细节。二次膨胀处理即采用OpenCV的dilate函数对web页面腐蚀图像做迭代膨胀处理，生成web页面二次膨胀图像，可以理解，元素检测单元对web页面腐蚀图像做迭代膨胀处理，生成的web页面二次膨胀图像使web页面元素轮廓更加明显。查找元素轮廓处理即采用OpenCV的findContours函数和drawContours函数对web页面二次膨胀图像进行web页面元素检测，获取web页面图像中所有的元素的截图。元素所在最小矩形区域的坐标处理即利用OpenCV的minAreaRect函数和boxPoints函数对web页面中所有元素在待测web页面的位置逐个做裁剪处理，即获取每个web页面元素最小覆盖矩形，以确定每个web页面元素最小覆盖矩形的顶点坐标。元素筛选处理即去除最小覆盖矩形面积小于预设面积的web页面元素，可以理解，通过去除小于预设面积的web页面元素，可以有效地排除元素检测单元误将图像噪声当作web页面元素的情形，确保生成的web页面元素的坐标都是有效的。
在上述第一方面的一种可能的实现中，上述方法还包括：XPath包括以下至少一项:以绝对路径定位的Xpath，以相对路径方定位的Xpath，以索引号定位的Xpath，以属性值定位的Xpath。
第二方面，本申请实施例提供了一种用户界面的元素定位装置，包括：图像获取模块，用于获取待测用户界面UI的截图；第一位置获取模块，用于获取所述图像获取模块得到的所述待测UI中的元素在所述待测UI的截图中的位置；第二位置获取模块，用于根据所述第一位置获取模块获取的每个元素在所述图像中的位置，获取所述每个元素在所述待测UI中的所述Xpath和/或所述截图,其中每个Xpath用于定位所述待测UI中的一个元素。
在上述第二方面的一种可能的实现中，上述装置还包括：所述待测UI为web应用的页面。
在上述第二方面的一种可能的实现中，上述装置还包括：所述装置通过网页驱动单元实现，所述网页驱动单元为所述web应用的扩展。
在上述第二方面的一种可能的实现中，上述装置还包括：所述网页驱动单元包括背景页、配置页和嵌入页；
其中，所述背景页的功能包括以下至少一项：实时对所述web应用的页面进行截图操作得到待测UI的截图；获取元素在web应用的页面实时截图得到的待测UI的截图中的位置；保存所述web应用的页面中的元素的Xpath；
所述嵌入页的功能包括以下至少一项：根据元素在在所述web应用的页面截图得到的待测UI的截图中的位置，获取所述web应用的页面中的元素的Xpath和/或截图；保存web应用的页面中的元素的截图；
所述配置页的功能包括以下至少一项：打开或关闭所述网页驱动单元；查看web应用的页面中的元素的Xpath和/或截图的保存地址。
在上述第二方面的一种可能的实现中，上述装置还包括：所述待测UI中的所述每个元素在所述待测UI的截图中的位置，由对应元素在所述待测UI的截图中所处区域的坐标表示；
所述根据确定的每个元素在所述待测UI的截图中的位置，获取所述每个元素在所述待测UI中的Xpath和/或截图，包括：
所述根据确定的每个元素在所述待测UI的截图中所处区域的坐标，获取所述每个元素在所述待测UI中的Xpath和/或截图。
在上述第二方面的一种可能的实现中，上述装置还包括：所述待测UI中的元素在所述待测UI的截图中的位置通过所述待测UI的截图进行图像预处理得到，所述图像预处理包括以下至少一项：
转灰度处理、二值化处理、膨胀处理、腐蚀处理、查找元素轮廓处理、元素所在最小矩形区域的坐标处理、元素筛选处理。
在上述第二方面的一种可能的实现中，上述装置还包括：XPath包括以下至少一项:以绝对路径定位的Xpath，以相对路径方定位的Xpath，以索引号定位的Xpath，以属性值定位的Xpath。
第三方面，本申请实施例提供了一种可读介质，其特征在于，所述可读介质上存储有指令，该指令在电子设备上执行时使所述电子设备执行第一方面以及第一方面可能的各实现中的用户界面的元素定位方法。
第四方面，本申请实施例提供了一种电子设备，包括：
存储器，用于存储由电子设备的处理器执行的指令，以及
处理器，是电子设备的处理器之一，用于执行第一方面以及第一方面可能的各实现中的用户界面的元素定位方法。
附图说明
图1根据本申请的一些实施例，示出了一种web页面元素定位的系统架构图；
图2根据本申请的一些实施例，示出了一种网页驱动单元的组成结构示意图；
图3根据本申请的一些实施例，示出了一种配置页界面示意图；
图4根据本申请的一些实施例，示出了一种web页面元素定位流程图；
图5根据本申请的一些实施例，示出了一种网站用户登录web页面图像示意图；
图6根据本申请的一些实施例，示出了一种web页面图像预处理流程图；
图7根据本申请的一些实施例，示出了一种web页面用户界面的元素定位装置的结构框图；
图8根据本申请的一些实施例，示出了一种电子设备的框图；
图9根据本申请一些实施例，示出了一种片上系统(SoC)的框图。
具体实施例
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本申请实施例提供的用户界面的元素定位方法，可以应用于对UI(UserInterface，UI)的自动化测试场景中。针对待测UI，该方法可以实时获取该待测UI的截图，如该待测UI的全部界面的截图；并通过图像处理算法，获取该待测UI中各个元素在该待测UI的截图中的位置；随后，通过获取的每个元素在该待测UI的截图中的位置，获取每个元素在该待测UI中的Xpath和/或截图。如此，即使UI产品不断迭代更新导致待测UI中的元素发生变动，本申请也可以通过实时获取待测UI的图像来计算待测UI中各个元素的Xpath和/或截图，实现UI元素的准确定位。进而，在UI产品迭代更新时，用户无需重新设计元素定位的软件程序或代码，有效减少元素定位的软件程序的维护成本，并提高定位元素定位的执行效率。
本申请的方法生成元素的Xpath主要应用于UI的自动化测试场景中，例如，可以用于浏览器的用户操作界面即(web页面)的自动化测试，还可以用于计算机操作系统的用户操作界面的自动化测试，还可以用于移动终端的用户操作界面的自动化测试等。具体地，对用户操作界面的元素执行文本内容输入、点击、滑动等自动化测试操作。还可以用于判定文字元素是否正确，包含元素的界面是否美观，文字元素，图片元素的组合是否完美，元素操作界面是否友好等。
为便于理解本申请实施例提供的技术方案，这里先对本申请实施例使用的关键名词进行解释：
OpenCV的图形函数库：是一个基于BSD许可(开源)发行的跨平台计算机视觉库，可以运行在Linux、Windows、IOS、Android和Mac OS操作系统上。它不仅轻量级而且高效，由一系列C函数和少量C++类构成，同时提供了Python、Ruby、MATLAB等语言的接口，实现了图像处理和计算机视觉方面的很多通用的函数算法。
腐蚀：是数学形态学中最基本的运算。进行腐蚀处理时，内核从图像上划过，留下一片覆盖区域，将其中的最小像素值提取出来，代替锚点位置的像素。这样处理之后，图像中的亮点会出现缩减现象。
膨胀：数学形态学中另一个基本运算。进行膨胀处理时，内核从图像上划过，留下一片覆盖区域，将其中的最小像素值提取出来，代替锚点位置的像素。这样处理之后图像中的亮区会开始扩大。
XML路径语言(XML Path Language,Xpath)：Xpath是一门在xml文档中查找信息的语言。Xpath可用来在xml文档中对元素和属性进行遍历。由于html的层次结构与xml的层次结构天然一致，所以使用Xpath也能够进行html元素的定位。XPath使用路径表达式来选取XML文档中的节点或者节点集。这些路径表达式与我们在常规的电脑文件系统中看到的表达式相似。Xpath定位方法包括但不限于绝对路径定位，相对路径定位，索引号定位，属性值定位。其中，Xpath相对路径定位，是只给出元素路径的部分信息，在HYTML的任意层次中寻找符合条件的元素。
本申请实施例提供一种用户界面的元素定位方法，该方法的执行主体可以是手机、平板电脑、服务器、计算机等可以为用户提供UI的电子设备，本申请对此不作限制。
可以理解，通过该用户用户界面的元素定位方法可以在UI自动化测试过程中，对用户在UI界面输入、操作(如：点击、长按、拖动等)的目标元素进行识别，以准确抓取到前端UI的元素，进而为成功实现UI自动化测试提供保障。
在本申请的实施例中，用户界面(User Interface，UI)是指软件的人机交互、操作逻辑、界面美观的整体设计。用户界面可以是浏览器程序上的用户操作界面，例如微软的IE浏览器、火狐的Firefox浏览器、谷歌的chrome浏览器等。用户界面也可以是计算机操作系统上的用户操作界面，例如Microsoft Windows操作系统、Unix操作系统等。用户界面还可以是移动终端操作系统上的用户操作界面，例如IOS系统、Android系统以及系统上运行的应用程序。
下面以对浏览器的web页面进行元素定位为例，对上述方法进行详细描述。
本申请的一些实施例中，提供一种web页面元素定位所应用的系统，该系统可以基于提供在上述web页面用户界面的元素定位方法的执行主体(电子设备)中。
图1根据本申请的实施例示出了一种执行web页面元素定位应用的系统架构图。如图1所示，该系统10包括待测web页面的截图11、网页驱动单元12、元素检测单元13。
下面具体描述执行web页面元素定位的系统10的各部分。
待测web页面的截图11：待测UI的截图为UI整个界面的截图，其中，待测web页面包括一个或多个元素。具体地，网页驱动单元对待测web页面进行截图操作得到UI图像即网页驱动单元对待测web页面的整个界面截取图像得到待测web页面的截图11。在本申请的实施例中，web页面11可以是在浏览器上打开的web应用的页面，其中，浏览器可以是chrome浏览器，IE浏览器，Firefox浏览器等，可以理解，待测UI的截图11即待测web页面的截图11。特别的，本文中的待测UI的截图即待测web页面的截图，为了方便描述，有些地方称作“待测UI的截图”，有些地方称作“待测web页面的截图”。
网页驱动单元12：用于获取待测web页面的截图11，还可以用于根据元素检测单元13生成的web页面元素坐标列表生成元素的截图和元素的Xpath等。具体地，在本申请的实施例中，网页驱动单元12又称“浏览器扩展”，网页驱动单元12包括背景页122，配置121页，嵌入页123。
图2根据本申请的实施例示出了一种网页驱动单元12的组成结构示意图。如图2所示，网页驱动单元12包括配置页121，背景页122，嵌入页123。
配置页121：配置页121即用于与用户或开发人员交互的页面，用户可在配置页121界面启动与关闭网页驱动单元12的功能。具体地，配置页121用于设置网页驱动单元12功能的打开开启和关闭，还可以用于设置生成的web页面元素Xpath列表的保存路径，还可以用于设置生成的元素的截图的保存路径等。具体地，图3示出了配置页121的功能设置选项界面示意图，如图3示，用户可以选择是否打开网页驱动器12的功能，用户还可以双击图3中的元素Xpath保存路径或元素的截图保存路径，进入嵌入页123生成的web页面所有元素的Xpath列表的保存位置或嵌入页123生成的web页面所有元素的截图的保存位置。可以理解，配置页121的功能不仅限于图3配置页121界面上罗列的功能设置选项，可以根据用户需求进行添加，在此不做限制。
背景页122：背景页122负责web应用中的各页面的消息通信、事件监听、web页面截图获取、文件保存等。具体地，背景页122可以用于实时对打开的web页面进行截图操作，生成待测web页面的截图11。背景页122还可以用于将生成的web页面截图发送给元素检测单元13，背景页还可以用于接收元素检测单元13生成web页面元素坐标列表，还可以用于保存嵌入页123生成的web页面所有元素的Xpath列表等。可以理解，背景页122随着网页驱动单元12的打开而打开，随着网页驱动单元12的关闭而关闭，所以在本申请的实施例中，通常把需要一直运行的或启动就运行的全局的代码放在背景页122里面。需要说明的是，这里的背景页122与配置页121不同，开发者或用户看不到他的界面，只能调用背景页122的代码。
嵌入页123：嵌入页123嵌入需采集元素的web页面，可以控制web页面，从而完成元素xpath的计算。根据待测web页面中的元素在web页面图像中的位置，获取每个元素在待测web页面中的Xpath和/或截图，并保存元素的截图。具体地，嵌入页可以接收背景页发送的元素坐标列表，根据元素坐标列表，生成元素Xpath和元素的截图。具体地，嵌入页可以根据元素坐标列表，通过基于元素匹配的Xpath结构相似性计算的递归算法生成元素的Xpath。同时嵌入页可以保存生成元素的截图，并将生成Xpath发送给背景页保存。需要说明的是，这里的嵌入页123与配置页121不同，开发者或用户看不到他的界面，只能调用嵌入页123的代码。
元素检测单元13：用于检测待测web页面的截图11的web页面元素，生成web页面元素在web页面所在区域的坐标列表。具体地，元素检测单元13调用OpenCV图形函数库，并在此基础上进行调优和逻辑构建。元素检测单元13可以是python封装的HTTP API形式的脚本。该脚本供网页驱动单元12调用。可以理解，当脚本运行后，元素检测单元13接收web页面截图，经过元素检测单元13的计算后，生成web页面所有元素的顶点坐标列表。具体地，元素检测单元13以openCV图形函数库为底层算法，并在此基础上进行逻辑构建，调优等操作生成元素检测单元13的代码。元素检测单元13的代码对待测web页面的截图11做预处理，预处理包括转灰度处理、二值化、膨胀处理、腐蚀处理、查找元素轮廓处理、元素所在最小矩形区域的坐标处理、元素筛选处理、最终生成所有元素的坐标列表。
基于上述图1所示的系统，图4为本申请示出的一种web页面元素定位流程图，该方法具体包括：
步骤402：网页驱动单元12获取待测web页面的截图11。
在本申请的实施例中，网页驱动器12的背景页122获取待测web页面中每个web页面的截图，并且网页驱动器12的背景页122将每个web页面截图发送给元素检测单元13。具体地，网页驱动器12使用通用浏览器的原生Web API驱动浏览器获取网页截图，并将待测web页面的截图11发送给页面元素检测单元13。可以理解，待测web页面包括需要做UI测试的web页面，截取待测web页面的web页面截图(即图像)，其中，web页面截图与需要做UI测试的web页面一一对应，Web页面截图包括web页面元素。对web页面元素做UI自动化测试，即对用户在UI界面输入、操作(如：点击、长按、拖动等)的元素进行测试。
具体地，以Chrome浏览器平台的web页面为例，例如，该网页驱动器12可以为chrome浏览器扩展。具体的，Chrome浏览器扩展的背景页122可调用runtime.onMessage.addListener监听信息并根据信息内容完成响应，例如当用户点击页面控件，web页面切换至其他页面，背景页122可以第一时间监听到web页面的切换或跳转等。背景页122即对web页面执行截图操作。背景页122可调用Tab.captureVisibleTab程序获取web页面截图，并将截图通过HTTP接口发送给元素检测单元13。
在本申请的实施例中，网页驱动器12获取待测web页面的web页面的图像，其中，待测web页面包括一个或多个元素。web页面的元素包括菜单栏、输入框、链接窗口、按钮、图标、文本框、对话框、出错信息、帮助信息、文字、表格、图片等。图5根据本申请的一些实施例，示出了一种某网站用户登录web页面图像示意图，例如，如图5所示，图5中的“登录名”“密码”“验证码”等为文字元素，可以理解，文字元素可以用于指示用户在页面的输入内容。图5中的“登录名”后面的方框为输入框元素，可以理解，方框内可以输入用户登录名。图5中的带有“登录”的方框为按钮元素，可以理解，点击登录方框按钮可以执行登录操作。图5中的“QQ”“百度”等是链接窗口元素，可以理解，点击“QQ”会打开与QQ账号相关的web页面。图5中的“LOGO”为图片元素，可以理解，图5中的“LOGO”可以起到标识的作用的图片，用于区分于其他网站的用户登录web页面。
步骤404：网页驱动单元12获取待测web页面中的元素在待测web页面的截图11中的位置。
在一些实施例中，网页驱动单元12可以与元素检测单元13交互，从元素检测单元13侧获取待测web页面中的元素在待测web页面的截图11中的位置。具体地，上述步骤404具体可以通过步骤404a和404b实现：
步骤404a：网页驱动单元12向元素检测单元13发送待测web页面的待测web页面的截图11。
相应的，元素检测单元13可以从网页驱动单元12接收到待测web页面的待测web页面的截图11。
步骤404b：网页驱动单元12从元素检测单元13获取待测web页面中的元素在待测web页面的截图11中的位置。
相应的，元素检测单元13可以接收待测web页面的待测web页面的截图11并对其进行处理，得到待测web页面中的元素在待测web页面的截图11中的位置。其中，具体的处理步骤将在下文中详细描述，此处不做赘述。
在本申请的实施例中，元素检测单元13对web页面的图像做预处理，确定待测web页面中的元素在待测web页面的截图11中的位置坐标，即元素检测单元13对网页驱动器12获取的待测web页面的截图(即待测web页面的截图11)，并对待测web页面的截图11做元素检测，确定待测web页面的截图11的每个web页面元素在web页面的位置，生成待测web页面的所有元素的位置坐标列表。
在本申请的实施例中，通过调用OpenCV的图形函数库中的函数来实现web页面元素检测以及对检测到的web页面元素生成元素的位置坐标，将所有元素的位置坐标整理成坐标列表。具体地，元素检测单元13调用OpenCV图形函数库，并在此基础上进行调优和逻辑构建。元素检测单元13可以是python封装的HTTP API形式的脚本。该脚本供网页驱动单元12调用。可以理解，当脚本运行后，元素检测单元13接收web页面截图，经过元素检测单元的计算后，生成web页面所有元素的顶点坐标列表。具体地，元素检测单元13以openCV图形函数库为底层算法，并在此基础上进行逻辑构建，调优等操作生成元素检测单元13的代码。元素检测单元13的代码对待测web页面的截图11做预处理，预处理包括转灰度处理、二值化、膨胀处理、腐蚀处理、查找元素轮廓处理、元素所在最小矩形区域的坐标处理、元素筛选处理、最终生成所有元素的坐标列表。
步骤406：网页驱动单元12根据获取的每个元素在待测web页面的截图11中的位置，获取每个元素在待测web页面中的Xpath和/或截图。
在本申请的实施例中，网页驱动单元12对待测web页面进行截图操作得到web页面图像即网页驱动单元对待测web页面的整个界面截取图像得到待测web页面的截图11。网页驱动单元12向元素检测单元13发送待测web页面的待测web页面的截图11，元素检测单元13可以接收待测web页面的待测web页面的截图11并对其进行处理，得到待测web页面中的元素在待测web页面的截图11中的位置。网页驱动单元12获取元素检测单元13生成的web页面元素在web页面的位置(即元素坐标列表)，网页驱动单元12根据web页面元素的坐标列表生成web页面元素的Xpath列表及每个web页面元素的图像。具体地，背景页122获取元素检测单元13生成的web页面元素在web页面的坐标列表，然后，背景页122将获取的坐标列表发送给嵌入页123，嵌入页123根据web页面元素的坐标列表，生成的元素的Xpath列表和/或截图。嵌入页123将生成的Xpath列表发送给背景页122保存，同时，嵌入页123将生成的web页面元素的截图实时保存。
在本申请的实施例中，网页驱动单元12根据获取的每个元素在待测web页面的截图11中的位置，获取每个元素在待测web页面中的元素的Xpath和/或截图，其中，元素的Xpath可以是以绝对路径定位方法生成的Xpath，也可以是以相对路径方定位方法生成的Xpath，还可以是以索引号定位方法的Xpath，还可以是以属性值定位的Xpath，在此不做限制。
在本申请的实施例中，以Chrome浏览器的web页面为例，根据web页面元素的坐标列表，网页驱动器12可以是Chrome浏览器扩展，Chrome浏览器扩展包括背景页122，配置页121，嵌入页123。其中,背景页122接收元素检测单元13发送的web页面元素列表，然后背景页122将web页面元素列表发送给嵌入页123，生成web页面的每个元素的截图和web页面每个元素的Xpath。具体地，根据web页面元素列表，嵌入页123可以调用getBoundingClientRect的通用web API获取web页面每个元素的截图，并将获取的每个元素的截图保存。嵌入页123还可以根据每个元素的坐标生成web页面每个元素的Xpath，生成Xpath列表。嵌入页123将生成的Xpath列表发送给背景页122保存。其中，生成Xpath列表的算法可以是递归算法。通过递归算法生成元素的Xpath的过程包括基于目标元素的身份标识id和/或名称name等属性值生成该元素的Xpath，即属性值定位的Xpath算法。嵌入页123或背景页122可通过调用tabs.sendMessage程序传递信息。可以理解，用户可在配置页121中设置嵌入页123保存的web页面的所有元素的图像(即每个元素在所述待测UI中元素的截图)和背景页122保存的web页面的所有元素的Xpath列表的路径。并且，在本申请的实施例中，嵌入页123生成的web页面元素的Xpath可用于web页面自动化测试。其中，背景页122可以保存嵌入页123生成的包含所有元素Xpath的Xpath列表，有利于用户或开发人员及时查看生成的Xpath列表，防止生成的Xpath列表出现错漏元素Xpath的现象，从而保证后续UI自动化测试的准确性。嵌入页123保存的元素的截图可以有利于后续用户或开发人员查看元素检测单元13生成的元素坐标列表是否正确，具体包括，例如，元素检测单元13根据元素轮廓裁剪的元素在web页面所在区域的最小覆盖矩形是否正确，即裁剪的最小矩形未包含单个元素的全部区域或者裁剪的最小矩形包含单个元素的区域过大等。例如，元素检测单元13未完全检测到web页面的所有元素或者将web页面的噪声当作元素，进一步地生成了该噪声所在区域的坐标，等等。
在本申请的实施例中，元素检测单元13接收网页驱动单元12的背景页122发送的待测web页面的截图11，对UI图像11做元素检测，生成元素坐标列表。具体地，待测UI中的元素在待测web页面的截图11中的位置通过元素检测单元13对待测web页面的截图11进行预处理得到，图像预处理包括以下至少一项转灰度处理、二值化处理、膨胀处理、腐蚀处理、查找元素轮廓处理、元素所在最小矩形区域的坐标处理、元素筛选处理。
元素检测单元13可以接收待测web页面的web页面图像并对其进行预处理，得到待测web页面中的元素在web页面图像中的位置，具体地，web页面图像转灰度处理即元素检测单元13利用OpenCV的cvtColor函数对待测web页面的UI图像进行灰度化处理，得到web页面灰度图像。转灰度处理即采用OpenCV中的最大类间方差OTSU算法对web页面灰度图进行二值化，获得web页面二值化图像。膨胀处理包括一次膨胀处理，二次膨胀处理。一次膨胀处理即采用OpenCV的morphologyEx函数和dilate函数对web页面二值化图像进行一次膨胀，生成web页面一次膨胀图像，腐蚀处理即采用OpenCV的getStructuringElement函数和erode函数对web页面一次膨胀图像做腐蚀处理。二次膨胀处理即采用OpenCV的dilate函数对web页面腐蚀图像做迭代膨胀处理，生成web页面二次膨胀图像。查找元素轮廓处理即采用OpenCV的findContours函数和drawContours函数对web页面二次膨胀图像进行web页面元素检测，获取UI图像中所有的web页面元素的截图。元素所在最小矩形区域的坐标处理即利用OpenCV的minAreaRect函数和boxPoints函数对web页面中所有元素的截图逐个做裁剪处理，即获取每个web页面元素最小覆盖矩形，以确定每个web页面元素最小覆盖矩形的顶点坐标。元素筛选处理即去除最小覆盖矩形面积小于预设面积的web页面元素，可以理解，通过去除小于预设面积的web页面元素，可以有效地排除元素检测单元13误将图像噪声当作web页面元素的情形，确保生成的web页面元素的坐标都是有效的。图6为根据本申请的实施例，元素检测单元13对待测web页面的待测web页面的截图11的预处理的流程图。具体的，图6以待测web页面中的元素的检测的方法为例进行说明，该方法包括：
步骤601：元素检测单元13将待测web页面的截图11转灰度，生成web页面灰度图。
在本申请的实施例中，元素检测单元13利用OpenCV的cvtColor函数对待测web页面的待测web页面的截图11进行灰度化处理，得到web页面灰度图像。其中，web页面灰度图像中每个像素点的灰度等级是用8位二进制数进行存储，因此每个像素点的灰度值范围为0～255，即每个像素点共有256种灰度等级。可以理解，对待测web页面的待测web页面的截图11转灰度可减少待测web页面的截图11的存储空间，并且有利于后续的待测web页面的截图11处理。
步骤602，元素检测单元13对web页面灰度图执行二值化，获得web页面二值化图像。
在本申请的实施例中，元素检测单元13通过步骤601生成的灰度图的最大灰度等级为255，采用OpenCV中的最大类间方差OTSU算法对步骤601生成web页面灰度图进行二值化，获得web页面二值化图像。具体地，先计算web页面灰度图的灰度直方图，然后对其进行归一化，计算零阶累积矩和一阶累积矩，再计算类间方差，选取使类间方差最大的那个值，即为选取的阈值，例如，选取的阈值可以为128。若像素点的灰度值大于128，则该像素点的灰度值设为255。若像素点的灰度值不大于128，则该像素点的灰度值设为0。可以理解，web页面灰度图二值化后，获得的web页面二值化图像的像素点的灰度值为255或0。则web页面二值化图像只呈现黑白两种视觉效果，即web页面二值化图像的像素点的灰度值为255，则视觉效果为黑色，web页面二值化图像的像素点的灰度值为0，则视觉效果为白色。可以理解，web页面灰度图的二值化处理使图像的数据量大为减少，有利于后续图像的处理和分析。
在本申请的实施例中，OpenCV中的最大类间方差OTSU算法是按照web页面灰度图的灰度等级，以最大的类间方差作为选取的阈值对web页面灰度图做二值化处理。可以理解，使用OpenCV中的最大类间方差OTSU算法对web页面灰度图进行二值化处理，可以提取web页面灰度图内灰度值较高部分，web页面二值化图像的错分概率最小，web页面二值化图像中的web页面元素会更清晰。
步骤603：元素检测单元13针对web页面二值化图像中，黑色背景的白色像素点，对web页面二值化图像的白色像素点进行一次膨胀处理，生成web页面一次膨胀图像。
在本申请的实施例中，针对web页面二值化图像的黑色背景的白色像素点，元素检测单元13采用OpenCV的morphologyEx函数和dilate函数对web页面二值化图像进行一次膨胀，生成web页面一次膨胀图像。具体地，首先元素检测单元13对web页面二值化图像中采用阈值划分不清晰的地方(即web页面二值化图像受无效信息干扰的地方)做进一步处理，即元素检测单元13采用OpenCV的morphologyEx函数对web页面二值化图像进行闭运算，得到web页面闭运算二值化图像。可以理解，对web页面二值化图像进行闭运算处理，可以减少在web页面元素检测时无效信息的干扰。然后元素检测单元13采用OpenCV的dilate函数对web页面闭运算二值化图像进行一次膨胀，获得web页面一次膨胀图像。可以理解，相较于web页面二值化图像，web页面一次膨胀图像中的web页面元素轮廓更加清晰。
步骤604：元素检测单元13针对web页面一次膨胀图像的白色背景的黑色像素点，对web页面一次膨胀图像进行迭代腐蚀，生成web页面腐蚀图像。
在本申请的实施例中，针对web页面一次膨胀图像的白色背景的黑色像素点，元素检测单元13采用OpenCV的getStructuringElement函数和erode函数对web页面一次膨胀图像做腐蚀处理。首先元素检测单元13利用OpenCV的getStructuringElement函数对web页面一次膨胀图像创建图标平均尺寸的椭圆形的结构元，其中，图标的平均尺寸可以是30×30。然后元素检测单元13再利用OpenCV的erode函数进行迭代腐蚀操作，迭代次数设置为n次，其中，n为正整数。具体地，针对web页面一次膨胀图像的白色背景的黑色像素点创建的结构元，元素检测单元13采用OpenCV的erode函数对创建的结构元进行腐蚀，生成web页面腐蚀图像。可以理解，元素检测单元13针对web页面一次膨胀图像的白色像素点，可以消除非连通的白色小区域，以去除分割线或边框线等细节。
步骤605：元素检测单元13对web页面腐蚀图像做迭代膨胀处理，生成web页面二次膨胀图像。
在本申请的实施例中，元素检测单元13采用OpenCV的dilate函数对web页面腐蚀图像做迭代膨胀处理，生成web页面二次膨胀图像。具体地，由于web页面一次膨胀图像进行腐蚀操作后，图像的尺寸发生了变化，为了恢复之前的尺寸，利用步骤404中迭代腐蚀过程中创建的相同的结构元，在腐蚀后生成的web页面腐蚀图像，再使用OpenCV的dilate函数进行迭代膨胀操作，迭代次数也设置为n次，将图像尺寸恢复到腐蚀操作之前的尺寸，web页面二次膨胀图像。可以理解，元素检测单元13web页面腐蚀图像做迭代膨胀处理，可以使web页面二次膨胀图像恢复迭代腐蚀操作前的尺寸，即web页面二次膨胀图像恢复到未做转灰度处理的待测web页面的截图11(即元素检测单元13接收到的网页驱动单元12发送的待测web页面的截图11)时的尺寸。可以理解，元素检测单元13对web页面腐蚀图像做迭代膨胀处理，生成的web页面二次膨胀图像使web页面元素轮廓更加明显。
步骤606：元素检测单元13查找web页面二次膨胀图像中的web页面元素，获取web页面中每个web页面元素的图像。
在本申请的实施例中，元素检测单元13采用OpenCV的findContours函数和drawContours函数对web页面二次膨胀图像进行web页面元素检测，获取待测web页面的截图11中所有的web页面元素的截图。具体地，元素检测单元13利用OpenCV的findContours函数在步骤405做迭代膨胀后生成的web二次膨胀图像上寻找web页面元素轮廓获取web页面中每个web页面元素的截图。
步骤607：元素检测单元13对web页面中每个web页面元素的图像逐个做裁剪处理，获取每个web页面元素最小覆盖矩形。
在本申请的实施例中，元素检测单元13利用OpenCV的minAreaRect函数和boxPoints函数对web页面中所有元素在图像中的位置逐个做裁剪处理，即获取每个web页面元素最小覆盖矩形，以确定每个web页面元素最小覆盖矩形的顶点坐标。具体地，元素检测单元13利用OpenCV的minAreaRect函数得到包含每个web页面元素所在区域的最小覆盖矩形的中心点，宽度，高度及旋转角度，再利用OpenCV的boxPoints函数得到包含每个web页面元素的最小覆盖矩形的至少两个顶点，例如矩形对顶角的两个顶点就可以构成最小覆盖矩形，最终获取待测web页面的截图11的所有web元素的顶点坐标。可以理解，一个web页面元素生成一个包含该web页面元素在web页面区域的最小面积的覆盖矩形，即元素的最小覆盖矩形。待测web页面的截图11有n个web页面元素，则生成n个最小覆盖矩形。可以理解，元素检测单元13通过获取web页面元素最小覆盖矩形，即确认web页面元素在待测web页面的截图11的位置。
步骤608：元素检测单元13计算每个web页面元素最小覆盖矩形的面积，去除最小覆盖矩形面积小于预设面积的web页面元素，最后输出剩余的web页面元素最小覆盖矩形的顶点坐标列表。
在本申请的实施例中，元素检测单元13利用OpenCV的cv2.contourArea函数计算web页面元素最小覆盖矩形的面积，去除最小覆盖矩形面积小于预设面积的web页面元素，最后输出剩余的web页面元素最小覆盖矩形的顶点坐标列表。其中，预设面积可以是根据页面元素的大小及页面元素的形状等设置的预设值。可以理解，去除最小覆盖矩形面积小于预设面积的web页面元素即去除噪声。具体地，例如，通过去除小于预设面积的web页面元素，可以有效地排除元素检测单元13在元素检测过程中误将图像噪声当作web页面元素的情形，确保生成的web页面元素的坐标都是有效的。
本申请的实施例主要以浏览器的web页面元素定位做详细说明，可以理解，本申请的用户界面的元素定位方法的思想也适用于其他的元素定位，例如，计算机操作系统的元素定位、手机操作系统的元素定位、手机APP的元素定位等，在此不做赘述。
在本申请的实施例中，元素检测单元13输出每个web页面元素的顶点坐标，生成web页面元素坐标列表，元素检测单元13将生成的web页面元素坐标列表发送给网页驱动单元12。
图7根据本申请的一些实施例，示出了一种用户界面的元素定位装置700的结构框图。如图7所示，该装置包括：
图像获取模块(702)，用于获取待测UI的截图；
第一位置获取模块(704)，用于获取图像获取模块得到的待测UI中的元素在待测UI的截图中的位置；
第二位置获取模块(706)，用于根据获取第一位置获取模块的每个元素在图像中的位置，获取每个元素在待测UI中的Xpath和/或截图，其中每个Xpath用于定位所述待测UI中的一个元素。
在本申请的实施例中，待测UI为web应用的页面。通过网页驱动单元实现，网页驱动单元为web应用的扩展。网页驱动单元包括背景页、配置页和嵌入页；其中，背景页的功能包括以下至少一项：实时对web应用的页面进行截图操作得到待测UI的截图；获取元素在web应用的页面实时截图得到的待测UI的截图中的位置；保存web应用的页面中的元素的Xpath；嵌入页的功能包括以下至少一项：根据元素在在web应用的页面截图得到的待测UI的截图中的位置，获取web应用的页面中的元素的Xpath和/或截图；保存web应用的页面中的元素的截图；配置页的功能包括以下至少一项：打开或关闭网页驱动单元；查看web应用的页面中的元素的Xpath和/或截图的保存地址。待测UI中的每个元素在UI图像中的位置，由对应元素在待测UI的截图中所处区域的坐标表示；根据确定的每个元素在待测UI的截图中的位置，获取每个元素在待测UI中的元素的Xpath和/或截图，包括：根据确定的每个元素在待测UI的截图中所处区域的坐标，获取每个元素在待测UI中的元素的Xpath和/或截图。待测UI中的元素在待测UI的截图中的位置通过待测UI的截图进行图像预处理得到，图像预处理包括以下至少一项：转灰度处理、二值化处理、膨胀处理、腐蚀处理、查找元素轮廓处理、元素所在最小矩形区域的坐标处理、元素筛选处理，XPath包括以下至少一项：以绝对路径定位的Xpath，以相对路径方定位的Xpath，以索引号定位的Xpath，以属性值定位的Xpath。
可以理解，图7所示的用户界面的元素定位装置700与本申请提供的用户界面的元素定位方法相对应，以上关于本申请提供的用户界面的元素定位方法的具体描述中的技术细节依然适用于图7所示的用户界面的元素定位装置700，具体描述请参见上文，在此不再赘述。
图8所示为根据本申请的一些实施例的电子设备800的框图。图8示意性地示出了根据多个实施例的示例电子设备800。在一些实施例中，电子设备800可以包括处理器804，与处理器804中的至少一个连接的系统控制逻辑808，与系统控制逻辑808连接的系统内存812，与系统控制逻辑808连接的非易失性存储器(NVM)816，以及与系统控制逻辑808连接的网络接口810。
在一些实施例中，处理器804可以包括单核或多核处理器。在一些实施例中，处理器804可以包括通用处理器和专用处理器(例如，图形处理器，应用处理器，基带处理器等)的任意组合。
在一些实施例中，系统控制逻辑808可以包括任意合适的接口控制器，以向处理器804中的至少一个和/或与系统控制逻辑808通信的任意合适的设备或组件提供任意合适的接口。
在一些实施例中，系统控制逻辑808可以包括存储器控制器，以提供连接到系统内存812的接口。系统内存812可以用于加载以及存储数据和/或指令。在一些实施例中电子设备800的内存812可以包括任意合适的易失性存储器，例如合适的动态随机存取存储器(DRAM)。
NVM/存储器816可以包括用于存储数据和/或指令的有形的、非暂时性的计算机可读介质。在一些实施例中，NVM/存储器816可以包括闪存等任意合适的非易失性存储器和/或任意合适的非易失性存储设备，例如HDD(Hard Disk Drive，硬盘驱动器)，CD(CompactDisc，光盘)驱动器，DVD(Digital Versatile Disc，数字通用光盘)驱动器中的至少一个。
NVM/存储器816可以包括安装电子设备800的装置上的一部分存储资源，或者它可以由设备访问，但不一定是设备的一部分。例如，可以经由网络接口810通过网络访问NVM/存储816。
特别地，系统内存812和NVM/存储器816可以分别包括：指令824的暂时副本和永久副本。指令824可以包括：由处理器804中的至少一个执行时导致电子设备800实施如图4所示的方法的指令。在一些实施例中，指令824、硬件、固件和/或其软件组件可另外地/替代地置于系统控制逻辑808，网络接口810和/或处理器804中。
网络接口810可以包括收发器，用于为电子设备800提供无线电接口，进而通过网络与任意其他合适的设备(如前端模块，天线等)进行通信。在一些实施例中，网络接口810可以集成于电子设备800的其他组件。例如，网络接口810可以集成于处理器804，系统内存812，NVM/存储器816，和具有指令的固件设备(未示出)中的至少一种，当处理器804中的至少一个执行指令时，电子设备800实现如图4所示的用户界面的元素定位方法。
网络接口810可以进一步包括任意合适的硬件和/或固件，以提供多输入多输出无线电接口。例如，网络接口810可以是网络适配器，无线网络适配器，电话调制解调器和/或无线调制解调器。
在一个实施例中，处理器804中的至少一个可以与用于系统控制逻辑808的控制器的逻辑封装在一起，以形成系统封装(SiP)。在一个实施例中，处理器804中的至少一个可以与用于系统控制逻辑808的控制器的逻辑集成在同一管芯上，以形成片上系统(SoC)。
电子设备800可以进一步包括：输入/输出(I/O)设备832。I/O设备832可以包括用户界面，使得用户能够与系统800进行交互；外围组件接口的设计使得外围组件也能够与电子设备800交互。在一些实施例中，电子设备800还包括传感器，用于确定与电子设备800相关的环境条件和位置信息的至少一种。
根据本申请的实施例，图9示出了一种SoC(System on Chip，片上系统)900的框图。在图9中，相似的部件具有同样的附图标记。另外，虚线框是更先进的SoC的可选特征。在图9中，SoC 900包括：互连单元950，其被耦合至应用处理器910；系统代理单元970；总线控制器单元980；集成存储器控制器单元940；一组或协处理器910，其可包括集成图形逻辑、图像处理器、音频处理器和视频处理器；静态随机存取存储器(SRAM)单元930；直接存储器存取(DMA)单元960。在一个实施例中，协处理器910包括专用处理器，诸如例如网络或通信处理器、压缩引擎、GPU、高吞吐量MIC处理器、或嵌入式处理器等等。
本申请公开的机制的各实施例可以被实现在硬件、软件、固件或这些实现方法的组合中。本申请的实施例可实现为在可编程系统上执行的计算机程序或程序代码，该可编程系统包括至少一个处理器、存储系统(包括易失性和非易失性存储器和/或存储元件)、至少一个输入设备以及至少一个输出设备。
可将程序代码应用于输入指令，以执行本申请描述的各功能并生成输出信息。可以按已知方式将输出信息应用于输出设备。为了本申请的目的，处理系统包括具有诸如例如数字信号处理器(DSP)、微控制器、专用集成电路(ASIC)或微处理器之类的处理器的任何系统。
程序代码可以用高级程序化语言或面向对象的编程语言来实现，以便与处理系统通信。在需要时，也可用汇编语言或机器语言来实现程序代码。事实上，本申请中描述的机制不限于任何特定编程语言的范围。在任一情形下，该语言可以是编译语言或解释语言。
在一些情况下，所公开的实施例可以以硬件、固件、软件或其任何组合来实现。所公开的实施例还可以被实现为由暂时或非暂时性机器可读(例如，计算机可读)存储介质承载或存储在其上的指令，其可以由处理器读取和执行。例如，指令可以通过网络或通过其他计算机可读介质分发。因此，机器可读介质可以包括用于以机器(例如，计算机)可读的形式存储或传输信息的任何机制，包括但不限于，软盘、光盘、光碟、只读存储器(CD-ROMs)、磁光盘、只读存储器(ROM)、随机存取存储器(RAM)、可擦除可编程只读存储器(EPROM)、电可擦除可编程只读存储器(EEPROM)、磁卡或光卡、闪存、或用于利用因特网以电、光、声或其他形式的传播信号来传输信息，例如，载波、红外信号数字信号等)的有形的机器可读存储器。因此，机器可读介质包括适合于以机器(例如，计算机)可读的形式存储或传输电子指令或信息的任何类型的机器可读介质。
在附图中，可以以特定布置和/或顺序示出一些结构或方法特征。然而，应该理解，可能不需要这样的特定布置和/或排序。而是，在一些实施例中，这些特征可以以不同于说明性附图中所示的方式和/或顺序来布置。另外，在特定图中包括结构或方法特征并不意味着暗示在所有实施例中都需要这样的特征，并且在一些实施例中，可以不包括这些特征或者可以与其他特征组合。
需要说明的是，本申请各设备实施例中提到的各单元/模块都是逻辑单元/模块，在物理上，一个逻辑单元/模块可以是一个物理单元/模块，也可以是一个物理单元/模块的一部分，还可以以多个物理单元/模块的组合实现，这些逻辑单元/模块本身的物理实现方式并不是最重要的，这些逻辑单元/模块所实现的功能的组合才是解决本申请所提出的技术问题的关键。此外，为了突出本申请的创新部分，本申请上述各设备实施例并没有将与解决本申请所提出的技术问题关系不太密切的单元/模块引入，这并不表明上述设备实施例并不存在其它的单元/模块。
需要说明的是，在本专利的示例和说明书中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
虽然通过参照本申请的某些优选实施例，已经对本申请进行了图示和描述，但本领域的普通技术人员应该明白，可以在形式上和细节上对其作各种改变，而不偏离本申请的精神和范围。
Claims (10)
1.一种用户界面的元素定位方法，其特征在于，所述方法包括：
获取待测用户界面的截图；
获取所述待测用户界面中的元素在所述待测用户界面的截图中的位置；
根据获取的每个元素在所述待测用户界面的截图中的位置，获取所述每个元素在所述待测用户界面中的可扩展标记语言路径语言Xpath和/或截图，其中每个Xpath用于定位所述待测用户界面中的一个元素。
2.根据权利要求1所述的用户界面的元素定位方法，其特征在于，所述待测用户界面为web应用的页面。
3.根据权利要求2所述的用户界面的元素定位方法，其特征在于，所述方法通过网页驱动单元实现，所述网页驱动单元为所述web应用的扩展。
4.根据权利要求3所述的用户界面的元素定位方法，其特征在于，所述网页驱动单元包括背景页、配置页和嵌入页；
其中，所述背景页的功能包括以下至少一项：实时对所述web应用的页面进行截图操作得到待测用户界面的截图；获取元素在web应用的页面实时截图得到的待测用户界面的截图中的位置；保存所述web应用的页面中的元素的Xpath；
所述嵌入页的功能包括以下至少一项：根据元素在在所述web应用的页面截图得到的待测用户界面的截图中的位置，获取所述web应用的页面中的元素的Xpath和/或截图；保存web应用的页面中的元素的截图；
所述配置页的功能包括以下至少一项：打开或关闭所述网页驱动单元；查看web应用的页面中的元素的Xpath和/或截图的保存地址。
5.根据权利要求2所述的用户界面的元素定位方法，其特征在于，所述待测用户界面中的所述每个元素在所述待测用户界面的截图中的位置，由对应元素在所述待测用户界面的截图中所处区域的坐标表示；
所述根据确定的每个元素在所述待测用户界面的截图中的位置，获取所述每个元素在所述待测用户界面中的Xpath和/或截图，包括：
所述根据确定的每个元素在所述待测用户界面的截图中所处区域的坐标，获取所述每个元素在所述待测用户界面中的Xpath和/或截图。
6.根据权利要求2所述的用户界面的元素定位方法，其特征在于，所述待测用户界面中的元素在所述待测用户界面的截图中的位置通过所述待测用户界面的截图进行图像预处理得到，所述图像预处理包括以下至少一项：
转灰度处理、二值化处理、膨胀处理、腐蚀处理、查找元素轮廓处理、元素所在最小矩形区域的坐标处理、元素筛选处理。
7.根据权利要求1所述的用户界面的元素定位方法，其特征在于，所述Xpath包括以下至少一项：
以绝对路径定位的Xpath，以相对路径方定位的Xpath，以索引号定位的Xpath，以属性值定位的Xpath。
8.一种用户界面的元素定位装置，其特征在于，所述装置包括：
图像获取模块，用于获取待测所述用户界面的所述待测用户界面的截图；
第一位置获取模块，用于获取所述图像获取模块得到的所述待测用户界面中的元素在所述待测用户界面的截图中的位置；
第二位置获取模块，用于根据所述第一位置获取模块获取的每个元素在所述图像中的位置，获取所述每个元素在所述待测用户界面中的Xpath和/或截图,其中每个Xpath用于定位所述待测用户界面中的一个元素。
9.一种可读介质，其特征在于，所述可读介质上存储有指令，所述指令在电子设备上执行时使所述电子设备执行权利要求1至7中任一项所述的用户界面的元素定位方法。
10.一种电子设备，包括：
存储器，用于存储由所述电子设备的处理器执行的指令，以及
处理器，是所述电子设备的处理器之一，用于执行权利要求1至7中任一项所述的用户界面的元素定位方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011442025.9A CN112506600A (zh) | 2020-12-11 | 2020-12-11 | 用户界面的元素定位方法及其装置、介质和电子设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011442025.9A CN112506600A (zh) | 2020-12-11 | 2020-12-11 | 用户界面的元素定位方法及其装置、介质和电子设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112506600A true CN112506600A (zh) | 2021-03-16 |
Family
ID=74970906
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011442025.9A Pending CN112506600A (zh) | 2020-12-11 | 2020-12-11 | 用户界面的元素定位方法及其装置、介质和电子设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112506600A (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113051514A (zh) * | 2021-03-26 | 2021-06-29 | 挂号网（杭州）科技有限公司 | 元素的定位方法、装置、电子设备及存储介质 |
| CN113094291A (zh) * | 2021-06-10 | 2021-07-09 | 深圳掌酷软件有限公司 | 锁屏界面的匹配验证方法、装置、设备及存储介质 |
| CN113934487A (zh) * | 2021-09-18 | 2022-01-14 | 达而观数据(成都)有限公司 | 一种用户界面元素定位方法、系统、计算机设备和存储介质 |
| CN117520690A (zh) * | 2024-01-05 | 2024-02-06 | 易方信息科技股份有限公司 | 基于css样式预渲染对比的ui自动化方法及相关装置 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107239397A (zh) * | 2017-05-17 | 2017-10-10 | 北京微影时代科技有限公司 | 一种web自动化测试方法及电子设备 |
| CN107845113A (zh) * | 2017-10-20 | 2018-03-27 | 广州阿里巴巴文学信息技术有限公司 | 目标元素定位方法、装置以及用户界面测试方法、装置 |
| US20180349110A1 (en) * | 2017-05-31 | 2018-12-06 | Wipro Limited | Method and layout identification system for facilitating identification of a layout of a user interface |
| CN109669873A (zh) * | 2018-12-27 | 2019-04-23 | 拉扎斯网络科技（上海）有限公司 | 用户界面自动测试方法及装置、电子设备及存储介质 |
| CN110888810A (zh) * | 2019-11-19 | 2020-03-17 | 广东润联信息技术有限公司 | 自动识别并标注的方法、装置、计算机设备及存储介质 |
-
2020
- 2020-12-11 CN CN202011442025.9A patent/CN112506600A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107239397A (zh) * | 2017-05-17 | 2017-10-10 | 北京微影时代科技有限公司 | 一种web自动化测试方法及电子设备 |
| US20180349110A1 (en) * | 2017-05-31 | 2018-12-06 | Wipro Limited | Method and layout identification system for facilitating identification of a layout of a user interface |
| CN107845113A (zh) * | 2017-10-20 | 2018-03-27 | 广州阿里巴巴文学信息技术有限公司 | 目标元素定位方法、装置以及用户界面测试方法、装置 |
| CN109669873A (zh) * | 2018-12-27 | 2019-04-23 | 拉扎斯网络科技（上海）有限公司 | 用户界面自动测试方法及装置、电子设备及存储介质 |
| CN110888810A (zh) * | 2019-11-19 | 2020-03-17 | 广东润联信息技术有限公司 | 自动识别并标注的方法、装置、计算机设备及存储介质 |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113051514A (zh) * | 2021-03-26 | 2021-06-29 | 挂号网（杭州）科技有限公司 | 元素的定位方法、装置、电子设备及存储介质 |
| CN113094291A (zh) * | 2021-06-10 | 2021-07-09 | 深圳掌酷软件有限公司 | 锁屏界面的匹配验证方法、装置、设备及存储介质 |
| CN113934487A (zh) * | 2021-09-18 | 2022-01-14 | 达而观数据(成都)有限公司 | 一种用户界面元素定位方法、系统、计算机设备和存储介质 |
| CN113934487B (zh) * | 2021-09-18 | 2024-01-23 | 达而观数据(成都)有限公司 | 一种用户界面元素定位方法、系统、计算机设备和存储介质 |
| CN117520690A (zh) * | 2024-01-05 | 2024-02-06 | 易方信息科技股份有限公司 | 基于css样式预渲染对比的ui自动化方法及相关装置 |
| CN117520690B (zh) * | 2024-01-05 | 2024-04-09 | 易方信息科技股份有限公司 | 基于css样式预渲染对比的ui自动化方法及相关装置 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112506600A (zh) | 用户界面的元素定位方法及其装置、介质和电子设备 | |
| CN108830780B (zh) | 图像处理方法及装置、电子设备、存储介质 | |
| CN108664364B (zh) | 一种终端测试方法及装置 | |
| CN104391797A (zh) | Gui控件的识别方法和装置 | |
| CN104751093B (zh) | 用于获取宿主设备显示的图像识别码的方法和装置 | |
| JP2013222461A (ja) | ナンバープレート画像の確実なクロッピング | |
| EP2660753B1 (en) | Image processing method and apparatus | |
| CN112949767B (zh) | 样本图像增量、图像检测模型训练及图像检测方法 | |
| CN111460355B (zh) | 一种页面解析方法和装置 | |
| CN110708568B (zh) | 一种视频内容突变检测方法及装置 | |
| CN108734161B (zh) | 冠字号区域的识别方法、装置、设备及存储介质 | |
| CN109993065B (zh) | 基于深度学习的驾驶员行为检测方法和系统 | |
| US20210311723A1 (en) | Method and system for providing image-based interoperability with an application | |
| CN111912846A (zh) | 一种基于机器视觉的表面缺陷与边缘毛刺检测方法 | |
| CN112052702A (zh) | 一种识别二维码的方法和装置 | |
| CN113129298B (zh) | 文本图像的清晰度识别方法 | |
| US20200363931A1 (en) | Computer implemented platform, software, and method for drawing using augmented reality | |
| CN111340788B (zh) | 硬件木马版图检测方法、装置、电子设备和可读存储介质 | |
| CN110992299B (zh) | 一种检测浏览器兼容性的方法及装置 | |
| CN114299293A (zh) | 应用于回收检测的图像机器视觉预处理方法及装置 | |
| CN115223173A (zh) | 对象识别方法、装置、电子设备及存储介质 | |
| CN113742559A (zh) | 关键词检测方法和装置、电子设备、存储介质 | |
| CN112559342A (zh) | 一种画面测试图像的获取方法、装置、设备及存储介质 | |
| CN112559340A (zh) | 一种画面测试方法、装置、设备及存储介质 | |
| CN112749769A (zh) | 图形码检测方法、装置、计算机设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |