CN114385514A

CN114385514A - 一种检测网页元素的方法、设备及存储介质

Info

Publication number: CN114385514A
Application number: CN202210288643.5A
Authority: CN
Inventors: 朱涛; 金宏洲; 程亮
Original assignee: Hangzhou Tiangu Information Technology Co ltd
Current assignee: Hangzhou Tiangu Information Technology Co ltd
Priority date: 2022-03-23
Filing date: 2022-03-23
Publication date: 2022-04-22

Abstract

本申请公开了一种检测网页元素的方法、设备及存储介质，涉及网页检测技术领域，检测网页元素的方法包括以下步骤：打开指定页面的地址，获取指定页面的DOM树，遍历DOM树得到所有DOM节点，DOM节点为可点击元素时，基于可点击元素生成对应的查询链路，保存可点击元素以及可点击元素对应的查询链路，测试工具基于查询链路查询对应的可点击元素，基于预设事件判断可点击元素是否有效。有益效果在于能够全面扫描并获取全量待测试的网页元素进行测试，自动检测页面的可点击元素是否有效，达到全量覆盖测试的目的。无需消耗人力成本，相较于人工检测，本申请大幅提升了检测效率和检测的准确性。

Description

一种检测网页元素的方法、设备及存储介质

技术领域

本申请属于网页检测技术领域，更具体地说，本申请涉及一种检测网页元素的方法、设备及存储介质。

背景技术

网页在给用户使用之前，一般会由测试人员打开页面，手动点击页面的指定元素，检查点击操作是否生效，以此来保证用户正常与网页进行交互，目前的技术方案存在以下缺陷：

第一，在复杂的业务场景以及大量的页面测试情况下，人工很难去覆盖全量场景，容易出现疏漏。第二，通过人工进行操作检测元素是否有效，需要消耗的人力成本高，在项目较大或者需求更迭频繁时更为明显。

发明内容

本申请的目的在于提供一种检测网页元素的方法、设备及存储介质，以解决上述现有技术中存在的人工难以覆盖全量场景且消耗的人力成本高的技术问题。

为实现上述技术目的，本申请采用的技术方案如下：

一种检测网页元素的方法，包括以下步骤：

打开指定页面的地址，获取所述指定页面的DOM树，遍历所述DOM树得到所有DOM节点；

所述DOM节点为可点击元素时，基于所述可点击元素生成对应的查询链路，保存所述可点击元素以及所述可点击元素对应的查询链路；

测试工具基于所述查询链路查询对应的所述可点击元素，基于预设事件判断所述可点击元素是否有效。

优选地，打开指定页面的地址，获取所述指定页面的DOM树，具体包括以下步骤：

启动nodejs执行脚本，所述nodejs执行脚本调用Chrome DevTools Protocol工具控制浏览器打开指定页面的地址，调用所述Chrome DevTools Protocol工具的DOM.getDocument接口获取所述指定页面的DOM树。

优选地，还包括步骤：

判断所述DOM节点是否绑定点击事件，当所述DOM节点绑定点击事件时，继续判断所述DOM节点的cursor样式是否为pointer；

当所述cursor样式为pointer时，标记所述DOM节点为所述可点击元素。

优选地，还包括步骤：

所述DOM节点绑定点击事件，但所述cursor样式不是pointer时，判定所述点击事件为委托事件，所述DOM节点为委托事件元素；

遍历所述委托事件元素的子节点，判断所述子节点的cursor样式是否为pointer，当所述cursor样式为pointer时，标记所述子节点为所述可点击元素。

优选地，基于所述可点击元素生成对应的查询链路，具体包括以下步骤：

获取所述可点击元素的名称、ID、样式属性、其他属性以及位于父节点的位置；

基于所述名称、所述ID、所述样式属性、所述其他属性以及所述位于父节点的位置，生成可点击元素的类css标识；

基于所述可点击元素的类css标识以及可点击元素的父节点的类css标识，生成所述可点击元素对应的查询链路。

优选地，还包括步骤：

所述指定页面加载完毕后，监听所述指定页面的异常事件，所述异常事件包括所述指定页面删除DOM节点、增加DOM节点或更新DOM节点的属性；

将删除的DOM节点、增加的DOM节点以及更新属性的DOM节点加入黑名单。

优选地，基于预设事件判断所述可点击元素是否有效，具体包括以下步骤：

所述预设事件包括所述可点击元素是否有修改、是否有跳转页面、是否有发送网络请求以及控制台是否有报错；

若监听到所述可点击元素有修改，则判定所述可点击元素有效，若指定页面不是原始的地址，则判定所述可点击元素有效，若检测到有发送网络请求，则判定所述可点击元素有效，若控制台无报错，则判定所述可点击元素有效。

优选地，还包括步骤：

所述可点击元素为无效时，收集无效的可点击元素并传输至开发端；

循环判断下一个所述可点击元素是否有效，直至判断完所有所述可点击元素。

一种电子设备，包括存储器和处理器，所述存储器用于存储一条或多条计算机指令，其中，所述一条或多条计算机指令被所述处理器执行以实现如上述所述的一种检测网页元素的方法。

一种计算机可读存储介质，计算机可读存储介质上存储有计算机指令，所述计算机指令被处理器执行时实现上述所述方法的步骤。

本申请提供的有益效果在于：

1、本申请通过遍历DOM树得到所有DOM节点，DOM节点为可点击元素时，基于可点击元素生成对应的查询链路，测试工具基于查询链路查询对应的可点击元素，基于预设事件判断可点击元素是否有效，能够全面扫描并获取全量待测试的网页元素进行测试，自动检测页面的可点击元素是否有效，达到全量覆盖测试的目的。无需消耗人力成本，相较于人工检测，本申请大幅提升了检测效率和检测的准确性。

2、本申请指定页面加载完毕后，监听指定页面的异常事件，异常事件包括指定页面删除DOM节点、增加DOM节点或更新DOM节点的属性，将删除的DOM节点、增加的DOM节点以及更新属性的DOM节点加入黑名单，保证后续模拟用户点击DOM节点是否有效的准确性。

附图说明

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

图1是检测网页元素的方法的流程图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

实施例1：

如图1所示，本实施例包括一种检测网页元素的方法，包括以下步骤：打开指定页面的地址，获取指定页面的DOM树，遍历DOM树得到所有DOM节点。

DOM节点为可点击元素时，基于可点击元素生成对应的查询链路，保存可点击元素以及可点击元素对应的查询链路。测试工具基于查询链路查询对应的可点击元素，基于预设事件判断可点击元素是否有效。

本申请能够全面扫描并获取全量待测试的网页元素进行测试，自动检测页面的可点击元素是否有效，无需消耗人力成本，相较于人工检测，本申请大幅提升了检测效率和检测的准确性。

打开指定页面的地址，获取指定页面的DOM树，具体包括以下步骤：启动nodejs执行脚本，nodejs执行脚本调用Chrome DevTools Protocol工具控制浏览器打开指定页面的地址，调用Chrome DevTools Protocol工具的DOM.getDocument接口获取指定页面的DOM树。

在本实施例中，浏览器为chrome浏览器，nodejs执行脚本调用Chrome DevToolsProtocol工具控制chrome浏览器打开指定页面的地址，调用Chrome DevTools Protocol工具的DOM.getDocument接口获取指定页面的DOM树，循环遍历DOM树得到所有DOM节点。

还包括步骤：判断DOM节点是否绑定点击事件，当DOM节点绑定点击事件时，继续判断DOM节点的cursor样式是否为pointer。当cursor样式为pointer时，标记DOM节点为可点击元素。

具体的，通过Chrome DevTools Protocol工具里的DOMDebugger.getEventListeners接口判断DOM节点是否绑定点击事件。若DOM节点绑定点击事件，则通过Chrome DevTools Protocol工具执行window.getComputedStyle(adom).cursor，判断DOM节点的cursor样式是否为pointer，pointer样式代表页面鼠标悬浮时变为手指样式，手指样式的元素在网页规范上被认定为可点击元素。当DOM节点绑定了点击事件，且样式带有cursor：pointer，标记此DOM节点为可点击元素。

还包括步骤：DOM节点绑定点击事件，但cursor样式不是pointer时，判定点击事件为委托事件，DOM节点为委托事件元素。遍历委托事件元素的子节点，判断子节点的cursor样式是否为pointer，当cursor样式为pointer时，标记子节点为可点击元素。

在本实施例中，若DOM节点绑定点击事件，但样式未有cursor：pointer，判定此点击事件为委托事件，此DOM节点为委托事件元素。遍历委托事件元素的子节点，即使子节点没有绑定点击事件，但当子节点的cursor样式为pointer时，仍然标记子节点为可点击元素。

基于可点击元素生成对应的查询链路，具体包括以下步骤：获取可点击元素的名称、ID、样式属性、其他属性以及位于父节点的位置。基于名称、ID、样式属性、其他属性以及位于父节点的位置，生成可点击元素的类css标识。基于可点击元素的类css标识以及可点击元素的父节点的类css标识，生成可点击元素对应的查询链路。

在本实施例中，可点击元素的名称是div，可点击元素的ID是app，可点击元素的样式是class1和class2，可点击元素的其他属性是attr =1，可点击元素是位于父节点的第2个子元素，可点击元素的类css标识为：div#app.class1.class2[attr1=1]：nth-child(2)。

基于可点击元素的类css标识以及可点击元素的父节点的类css标识，生成可点击元素对应的查询链路，保存该可点击元素以及可点击元素对应的查询链路。

还包括步骤：指定页面加载完毕后，监听指定页面的异常事件，异常事件包括指定页面删除DOM节点、增加DOM节点或更新DOM节点的属性。将删除的DOM节点、增加的DOM节点以及更新属性的DOM节点加入黑名单。

具体的，模拟用户点击DOM节点前，在指定页面全部加载完毕后，通过MutationObserver监听指定页面的异常事件，在本实施例中，监听时间为十秒，监听时间可根据实际的业务需求进行修改，一旦指定页面有删除DOM节点、增加DOM节点或更新DOM节点的属性等页面变化，该页面变化会被MutationObserver监听并触发通知，收集在模拟用户点击DOM节点前的页面变化，本实施例中的页面变化即为异常事件。将删除的DOM节点、增加的DOM节点以及更新属性的DOM节点加入黑名单。

在初始化页面时，会有一些轮播和计时器等动画特效，这些动画特效是上述提到的DOM节点持续变化产生的页面变化，而这些页面变化会让MutationObserver监听到，对后续模拟用户点击DOM节点是否有效的准确性会产生影响，因此需要记录在黑名单中。

测试工具基于查询链路查询对应的可点击元素，具体包括以下步骤：保存可点击元素以及可点击元素对应的查询链路后，nodejs执行脚本触发测试工具，测试工具基于获取的查询链路查询对应的DOM节点，模拟用户点击DOM节点。

在本实施例中，测试工具为UI自动化测试工具cypress。作为另外一种实施方式，通过Chrome DevTools Protocol工具操作chrome浏览器，也能基于获取的查询链路查询对应的DOM节点，模拟用户点击DOM节点。

基于预设事件判断可点击元素是否有效，具体包括以下步骤：预设事件包括可点击元素是否有修改、是否有跳转页面、是否有发送网络请求以及控制台是否有报错。

若监听到可点击元素有修改，则判定可点击元素有效，若指定页面不是原始的地址，则判定可点击元素有效，若检测到有发送网络请求，则判定可点击元素有效，若控制台无报错，则判定可点击元素有效。

在本实施例中，通过MutationObserver 监听可点击元素是否有修改，若可点击元素有修改，则判定可点击元素有效。若可点击元素无修改，继续检查window.location.href是否为原始url，若不是原始url，则判定可点击元素有效。

若是原始url，通过拦截XHR或者fetch，检测可点击元素点击后是否有发送网络请求，若有发送网络请求，则判定可点击元素有效。若无发送网络请求，通过window.addEventListenner监听unhandledrejection和error检测控制台是否有报错，若控制台无报错，则判定可点击元素有效。若控制台有报错，判定可点击元素无效。

还包括步骤：可点击元素为无效时，收集无效的可点击元素并传输至开发端，循环判断下一个可点击元素是否有效，直至判断完所有可点击元素。

实施例2：

一种电子设备，包括存储器和处理器，存储器用于存储一条或多条计算机指令，其中，一条或多条计算机指令被处理器执行以实现上述的一种检测网页元素的方法。所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的电子设备的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

一种计算机可读存储介质，计算机可读存储介质上存储有计算机指令，计算机指令被处理器执行时实现实施例1中方法的步骤。

本领域内的技术人员应明白，本发明的实施例可提供为方法、装置、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明的方法、终端设备(***)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

需要说明的是：

说明书中提到的“一个实施例”或“实施例”意指结合实施例描述的特定特征、结构或特性包括在本申请的至少一个实施例中。因此，说明书通篇各个地方出现的短语 “一个实施例”或“实施例”并不一定均指同一个实施例。

尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。

此外，需要说明的是，本说明书中所描述的具体实施例，其零、部件的形状、所取名称等可以不同。凡依本申请专利构思所述的构造、特征及原理所做的等效或简单变化，均包括于本申请专利的保护范围内。本申请所属技术领域的技术人员可以对所描述的具体实施例做各种各样的修改或补充或采用类似的方式替代，只要不偏离本申请的结构或者超越本权利要求书所定义的范围，均应属于本申请的保护范围。

Claims

1.一种检测网页元素的方法，其特征在于，包括以下步骤：

2.如权利要求1所述的一种检测网页元素的方法，其特征在于，打开指定页面的地址，获取所述指定页面的DOM树，具体包括以下步骤：

3.如权利要求1所述的一种检测网页元素的方法，其特征在于，还包括步骤：

4.如权利要求3所述的一种检测网页元素的方法，其特征在于，还包括步骤：

5.如权利要求1所述的一种检测网页元素的方法，其特征在于，基于所述可点击元素生成对应的查询链路，具体包括以下步骤：

6.如权利要求1所述的一种检测网页元素的方法，其特征在于，还包括步骤：

7.如权利要求1所述的一种检测网页元素的方法，其特征在于，基于预设事件判断所述可点击元素是否有效，具体包括以下步骤：

8.如权利要求1所述的一种检测网页元素的方法，其特征在于，还包括步骤：

9.一种电子设备，其特征在于，包括存储器和处理器，所述存储器用于存储一条或多条计算机指令，其中，所述一条或多条计算机指令被所述处理器执行以实现如权利要求1至8中任一项所述的一种检测网页元素的方法。

10.一种可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至8中任一项所述方法的步骤。