CN116049013A - 网页元素的自动化检测方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明实施例公开了一种网页元素的自动化检测方法、装置、电子设备及存储介质，该方法包括：轮询获取待检测页面中至少一个待检测元素的待处理图像；获取相邻两次轮询中同一待检测元素所对应的两幅待处理图像，并确定两幅待处理图像之间的相似属性；根据至少一个待检测元素的相似属性，对待检测页面中的待检测元素进行检测。本发明实施例的技术方案，解决了基于人工主观经验对网页元素进行检查，导致存在元素漏检，以及检测准确性低、成本高的技术问题，实现在自动化检测网页元素的同时，降低检测成本，达到提高元素检测的全面性和准确性的效果。

Description

网页元素的自动化检测方法、装置、电子设备及存储介质

技术领域

本发明实施例涉及计算机处理技术领域，尤其涉及一种网页元素的自动化检测方法、装置、电子设备及存储介质。

背景技术

现今，很多网页在上线之前或者应用的过程中，通常会为了提高用户对网页的应用体验，定时的对网页中显示的元素进行检测。该元素可以理解为显示界面中每个控件所展示的内容，例如，展示的内容可以为图片、按钮、文字等等。目前对元素进行检测的方式通常是通过人工对网页中显示的元素进行检查。例如，检查网页中每个元素是否正常显示，或者显示的内容是否与设定的显示要求一致等。

发明人在基于上述方式实施本技术方案时，发现存在如下问题：

基于人工检查网页元素的方式，需要依靠人工主观经验对显示的元素进行检查，不仅容易出现遗漏检查元素的情况，还存在检查准确性低以及检测成本高的问题。

发明内容

本发明提供一种网页元素的自动化检测方法、装置、电子设备及存储介质，实现在自动化检测网页元素的同时，降低检测成本，达到提高元素检测的全面性和准确性的技术效果。

第一方面，本发明实施例提供了一种网页元素的自动化检测方法，该方法包括：

轮询获取待检测页面中至少一个待检测元素的待处理图像；

获取相邻两次轮询中同一待检测元素所对应的两幅待处理图像，并确定两幅所述待处理图像之间的相似属性；

根据所述至少一个待检测元素的相似属性，对所述待检测页面中的待检测元素进行检测。

进一步的，所述方法还包括：

设置待检测页面、所述待检测页面中的至少一个待检测元素以及所述待检测元素所对应的检测顺序，以基于所述检测顺序依次获取所述至少一个待检测元素的待处理图像。

进一步的，所述方法还包括：

基于预先配置的定时任务轮询获取所述待检测页面中至少一个待检测元素的待处理图像；

其中，所述定时任务中包括轮询频率。

进一步的，所述方法还包括：

分别确定每幅待处理图像所对应的像素信息；基于各像素信息，确定两幅所述待处理图像的相似属性。

进一步的，所述像素信息包括像素总数量，所述方法还包括：

根据每幅待处理图像的长度和宽度，确定相应待处理图像的像素总数量；

相应的，所述基于各像素信息，确定两幅所述待处理图像的相似属性，包括：

若所述像素总数量不同，则确定两个像素总数量的比值，以得到所述相似属性。

进一步的，所述方法还包括：

若所述像素总数量相同，则分别确定每幅待处理图像的灰度图；

相应的，所述像素信息包括各像素点的灰度值，所述基于各像素信息，确定两幅所述待处理图像的相似属性，包括：

通过对两幅所述灰度图中同一像素点的灰度值比较处理，确定灰度值不同的相异像素数量；

基于所述相异像素数量和所述像素总数量，确定所述相似属性。

进一步的，所述方法还包括：

若存在至少一个待检测元素的相似属性大于预设相似属性阈值，则确定所述待检测页面存在异常，并预警提示。

进一步的，所述方法还包括：

在所述待检测页面中将预警区域突出显示；

其中，所述预警区域是基于相似属性大于预设相似属性阈值时所对应的像素点位置确定的。

进一步的，所述方法还包括：

在所述预警区域中还显示相似属性。

第二方面，本发明实施例还提供了一种网页元素的自动化检测装置，该装置包括：

待处理图像获取模块，用于轮询获取待检测页面中至少一个待检测元素的待处理图像；

相似属性确定模块，用于获取相邻两次轮询中同一待检测元素所对应的两幅待处理图像，并确定两幅所述待处理图像之间的相似属性；

元素检测模块，用于根据所述至少一个待检测元素的相似属性，对所述待检测页面中的待检测元素进行检测。

第三方面，本发明实施例还提供了一种电子设备，电子设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当一个或多个程序被一个或多个处理器执行，使得一个或多个处理器实现如本发明实施例任一的网页元素的自动化检测方法。

第四方面，本发明实施例还提供了一种包含计算机可执行指令的存储介质，计算机可执行指令在由计算机处理器执行时用于执行如本发明实施例任一的网页元素的自动化检测方法。

本发明实施例的技术方案，通过轮询获取待检测页面中至少一个待检测元素的待处理图像；获取相邻两次轮询中同一待检测元素所对应的两幅待处理图像，并确定两幅待处理图像之间的相似属性；根据至少一个待检测元素的相似属性，对待检测页面中的待检测元素进行检测。本发明实施例的技术方案，解决了现有技术中基于人工主观经验对网页元素进行检查，导致存在元素漏检，以及检测准确性低、成本高的技术问题，实现通过自动化轮询获取待检测页面中各待检测元素的待处理图像，将相邻两次轮询中同一待检测元素所对应的两幅待处理图像比对确定相似属性，进而基于相似属性自动化对待检测元素进行检测，在降低检测成本的同时，达到提高元素检测的全面性和准确性的效果。

附图说明

为了更加清楚地说明本发明示例性实施例的技术方案，下面对描述实施例中所需要用到的附图做一简单介绍。显然，所介绍的附图只是本发明所要描述的一部分实施例的附图，而不是全部的附图，对于本领域普通技术人员，在不付出创造性劳动的前提下，还可以根据这些附图得到其他的附图。

图1为本发明实施例所提供的一种网页元素的自动化检测方法的流程示意图；

图2为本发明实施例所提供的网页元素的自动化检测方法示意图；

图3为本发明实施例所提供的待处理图像示意图；

图4为本发明实施例所提供的待处理图像示意图；

图5为本发明实施例所提供的一种网页元素的自动化检测方法的流程示意图；

图6为本发明实施例所提供的一种网页元素的自动化检测方法的流程示意图；

图7为本发明实施例所提供的一种网页元素的自动化检测方法的流程示意图；

图8为本发明实施例所提供的一种网页元素的自动化检测方法的流程示意图；

图9为本发明实施例所提供的拼接图像示意图；

图10为本发明实施例所提供的一种网页元素的自动化检测装置的结构示意图；

图11为本发明实施例所提供的一种电子设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

在介绍本技术方案之前，可以先对应用场景进行说明。例如，在实际应用中，通常会使用CSS(Cascading Style Sheets，层叠样式表)对网页中的元素进行渲染，使得通过渲染控制网页中的文字，图片等元素的显示效果，得到绘制出的网页。在该网页上线之前或者应用的过程中，为了提高用户的体验，可以定时的对网页中的元素进行检测，此时可以将该网页作为待检测页面，进行检测的元素即为待检测元素。例如，待检测元素可以为图片、文字、数字、图标、标签、线框、链接等等。对元素进行检测可以采用本发明实施例所提供的技术方案来进行实施。

图1为本发明实施例所提供的一种网页元素的自动化检测方法的流程示意图，本实施例可适用于检测网页元素的情形，该方法可以由网页元素的自动化检测装置来执行，该装置可以通过软件和/或硬件的形式实现，该硬件可以是电子设备，如移动终端、PC端或服务器等。

如图1所示，所述方法包括：

S110、轮询获取待检测页面中至少一个待检测元素的待处理图像。

其中，待检测元素可以为预先设定好的、需要被检测的元素，其数量可以为一个或多个。例如，如果待检测页面中存在一个需要被检测的元素，那么待检测元素数量为一个，如果存在多个需要被检测的元素，那么待检测元素数量为多个。在对待检测元素进行检测的过程中，可以采集或截取包含待检测元素的图像，此图像即为待处理图像。轮询可以是指定时的向

在实际应用中，可以是在检测到用户触发元素检测控件后，触发轮询获取图像的功能，也可以是定时的自动触发轮询获取图像的功能。在轮询获取图像功能开启后，可以定时的请求获取待检测页面中至少一个待检测元素的待处理图像。例如，可以向截图工具发送截图指令，或者自动触发截图功能，进而基于截图工具截取待检测页面中的包括待检测元素的图像，作为待处理图像，可以将一次请求获取到的从待检测页面中截取的各待处理图像，作为一个轮次的待处理图像。依次将每一个轮次获取的待处理图像上传至系统，以使后续基于待处理图像对待检测元素进行检测。

为了提高对网页元素检测的准确性和全面性，防止出现漏检的情况，可以在轮询获取待检测页面中至少一个待检测元素的待处理图像之前，设置待检测页面、待检测页面中的至少一个待检测元素以及待检测元素所对应的检测顺序，以基于检测顺序依次获取至少一个待检测元素的待处理图像。

其中，待检测页面、待检测页面中的待检测的元素以及待检测元素所对应的检测顺序的设置均可以由技术人员根据实际工作情况进行确定，此处不做限定。

在本实施例中，可以预先设定好哪些网页需要被检测，将该网页设置为待检测页面。还可以设定好待检测页面中哪些元素需要被检测，并将其作为待检测元素，以及设定好待检测元素的检测顺序。例如，可以依据各待检测元素在待检测页面中从左到右、从上到下的顺序设定出各待检测元素的检测顺序，为其进行编号，如元素1-元素2-元素3-元素4。以在开启检测任务后，可以基于检测顺序依次获取待检测页面中至少一个待检测元素的待处理图像。

示例性的，可以参见图2，首先，可以设置待检测页面、待检测页面中的待检测元素，每个待检测元素的CSS选择器，及与待检测元素相对应的预设相似属性阈值，以及轮询频率等信息。其中，CSS选择器用于选中待检测元素进行截图、点击等操作。进一步的，启动自动化轮询任务，定时截取待检测页面中各待检测元素的图像作为待处理图像，并将待处理图像进行存储。

需要说明的是，为了提高元素检测的自动化和准确性。在本实施例中，可以在轮询获取待检测页面中至少一个待检测元素的待处理图像的过程中，基于预先配置的定时任务轮询获取待检测页面中至少一个待检测元素的待处理图像。

其中，定时任务可以为预先配置好的，用于定时进行元素检测的任务。定时任务中包括轮询频率，也可以包括元素检测方法等。例如，在该任务中具体可以包括每隔多长时间访问页面获取待处理图像，然后将本次获取的图像与上一轮次获取的图像进行比较的任务。轮询频率可以基于待检测页面的重要程度进行设定，如重要程度高的可以将每次轮询该页面的时长设置短些，重要程度低的可以将每次轮询该页面的时长设置长些。也可以是由技术人员根据实际工作情况进行设定。例如，可以通过cron表达式设置轮询频率，如每3秒、每1分钟或每5分钟轮询一次。

具体的，可以自动触发定时任务的启动，也可以是在检测用户触发元素检测控件后，触发定时任务启动。触发定时任务之后，可以以预设的轮询频率轮询获取待检测页面中至少一个待检测元素的待处理图像。例如，启动定时任务，每3秒获取一次待检测页面中至少一个待检测元素的待处理图像。

示例性的，可以使用playwright开源框架，通过编写自动化轮询程序进行自动化轮询截图，如打开页面，根据CSS选择器选取待检测元素，截图，保存。可以将定时任务集成在UI(User Interface，用户界面)自动化系统中，以实现定时的自动执行该任务。

需要说明的是，为了提高后续元素图像比对的准确性，保证元素检测的正确性，防止后续将相邻两个轮次不同待检测元素的待处理图像进行比对的问题。可以在自动化定时截取待检测元素的待处理图像时，将待处理图像按照设定的命名方式对待处理图像进行命名并保存。例如，命名方式可以为任务_轮次_元素获取步骤.后缀。元素获取步骤可以表示为元素在检测顺序中第几个步骤被获取，每个元素的获取步骤均唯一，后缀可以为jpg、png等。如第一个轮次得到的4个元素的待处理图像分别命名为1_1_1.jpg、1_1_2.jpg、1_1_3.jpg、1_1_4.jpg，第二个轮次得到这4个元素的待处理图像分别命名为1_2_1.jpg、1_2_2.jpg、1_2_3.jpg、1_2_4.jpg，依次以该命名方式对待处理图像进行命名保存，以保证不同任务，不同轮次，不同元素的图像不重复。

S120、获取相邻两次轮询中同一待检测元素所对应的两幅待处理图像，并确定两幅待处理图像之间的相似属性。

其中，相似属性可以用于表征图像内容之间的相似程度，如果相似程度越高，则说明两个图像越相似，如果相似程度越低，则说明两个图像越不相似。

需要说明的是，相邻轮次中同一待检测元素的待处理图像可能是相同的，也可能不同的，例如，相邻轮次中元素1的字体颜色、底纹、边界线、背景色、文本效果等显示效果存在不同。

在实际应用中，可以在对待检测元素进行检测的过程中，通过待处理图像的命名，获取相邻两次轮询中同一待检测元素所对应的两幅待处理图像。例如，在获取到第二个轮次的待处理图像之后，可以将该轮次的待处理图像与第一个轮次的待处理图像进行比对，如将元素1在第一个轮次中的1_1_1.jpg和在第二个轮次中的1_2_1.jpg作为相邻轮次元素1的两幅待处理图像。进一步的，可以将相邻轮询中同一待检测元素的两幅待处理图像进行比对处理，确定出这两幅待处理图像之间的相似程度，作为相似属性。相应的，可以得到各待检测元素的相似属性。例如，确定相似属性的方式可以基于图像识别技术识别这两幅待处理图像，比较两幅待处理图像之间的特征点信息得到相似属性；或者，也可以基于相似度计算方法(如余弦相似度、哈希算法、直方图计算法或者结构相似性度量方法等)确定两幅待处理图像之间的相似度，如果相似度数值越高，则说明相似程度越高，如果相似度数值越低，则说明相似程度越低，以得到相似属性；或者，还可以是确定两幅待处理图像之间的差异度，如果差异度数值越高，则说明相似程度越低，如果差异度数值越低，则说明相似程度越高，基于差异度表征相似属性。

示例性的，可以继续参见图2，在获取一个轮次的待处理图像之后，可以判断该轮次是否为首轮，如果是首轮，首个轮次获取的待处理图像不进行任务比对，等待下次执行。进一步的，获取第二轮次的待处理图像，此时为非首次的待处理图像，可以获取上一轮次同一待检测元素的待处理图像。例如，可参见图3和图4，待处理图像1_1_1.jpg可以如图3所示，待处理图像1_2_1.jpg如图4所示，两幅待处理图像中000指向111的箭头和111指向222的箭头数字均存在不同，以及222所属线条框的大小不一致。可以将同一待检测元素的两幅待处理图像进行比对，确定相似属性。在获取到第三轮次的待处理图像后，可以将同一待检测元素的待处理图像与在第二轮次获取的该元素的待处理图像进行比对，确定相似属性。接着不断将相邻两次轮询中同一待检测元素所对应的两幅待处理图像进行比对，以得到各待检测元素所对应的相似属性。

S130、根据至少一个待检测元素的相似属性，对待检测页面中的待检测元素进行检测。

在本实施例中，可以在比较相邻两次轮询中同一待检测元素所对应的两幅待处理图像，确定出这两幅待处理图像的相似属性之后，分析该相似属性是否满足预设显示要求。例如，如果相似属性表征的相似程度较高，认为元素显示正确，如果相似属性表征的相似程度较低，认为元素显示不正确。具体的，可以预先设定好一个阈值，判断该相似属性是否达到该设定的阈值，如果达到，则说明两幅待处理图像的相似程度较高，认为元素显示正确；如果未达到，则说明两幅待处理图像的相似程度较低，差异程度大，可能存在元素显示不正确的问题，以此实现对待检测页面中的待检测元素进行检测，检测元素是否显示正确。

本发明实施例的技术方案，通过轮询获取待检测页面中至少一个待检测元素的待处理图像；获取相邻两次轮询中同一待检测元素所对应的两幅待处理图像，并确定两幅待处理图像之间的相似属性；根据至少一个待检测元素的相似属性，对待检测页面中的待检测元素进行检测。本发明实施例的技术方案，解决了现有技术中基于人工主观经验对网页元素进行检查，导致元素漏检，以及检测准确性低、成本高的技术问题，实现通过自动化轮询获取待检测页面中各待检测元素的待处理图像，将相邻两次轮询中同一待检测元素所对应的两幅待处理图像比对确定相似属性，进而基于相似属性自动化对待检测元素进行检测，在降低检测成本的同时，达到提高元素检测的全面性和准确性的效果。

图5为本发明实施例所提供的一种网页元素的自动化检测方法的流程示意图，在前述实施例的基础上，对S120作进一步的细化，其具体的实施方式可以参见本实施例技术方案。其中，与上述实施例相同或者相应的技术术语在此不再赘述。

如图5所示，该方法具体包括如下步骤：

S210、轮询获取待检测页面中至少一个待检测元素的待处理图像。

S220、获取相邻两次轮询中同一待检测元素所对应的两幅待处理图像。

S230、分别确定每幅待处理图像所对应的像素信息。

其中，像素信息中可以包括像素的数量、位置、亮度、颜色等信息。

具体的，可以分别对每幅待处理图像进行解析处理，得到每幅待处理图像中像素点的像素信息。

S240、基于各像素信息，确定两幅待处理图像的相似属性。

在本实施例中，可以通过比较两幅待处理图像中的像素点信息，确定这两幅待处理图像的相似属性。例如，可以比较两幅待处理图像中同一像素点的亮度值，若亮度越相近的像素点数量越多，表示相似属性中相似程度越高，差异程度越低；或者，比较两幅待处理图像中像素点的数量，若两图像中像素点数量越相近，表示相似属性中相似程度越高，差异程度越低。

S250、根据至少一个待检测元素的相似属性，对待检测页面中的待检测元素进行检测。

本发明实施例的技术方案，通过分别确定每幅待处理图像所对应的像素信息，进而通过各像素信息计算两幅待处理图像之间的相似属性，以基于相似属性对待检测元素进行检测，提高检测准确性和便捷性。

图6为本发明实施例所提供的一种网页元素的自动化检测方法的流程示意图，在前述实施例的基础上，像素信息中可包括像素总数量，进而在基于各像素信息确定两幅待处理图像的相似属性的过程中，可以基于像素总数量确定两幅待处理图像的相似属性，其具体的实施方式可以参见本实施例技术方案。其中，与上述实施例相同或者相应的技术术语在此不再赘述。

如图6所示，该方法包括：

S310、轮询获取待检测页面中至少一个待检测元素的待处理图像。

S320、获取相邻两次轮询中同一待检测元素所对应的两幅待处理图像。

S330、根据每幅待处理图像的长度和宽度，确定相应待处理图像的像素总数量。

具体的，在获取到相邻两次轮询中同一待检测元素的两幅待处理图像之后，可以分别解析这两幅待处理图像的尺寸大小，得到各待处理图像的长度和宽度。进一步的，可以将待处理图像的长度和宽度作乘积处理，得到乘积值，进而可以将乘积值作为该待处理图像的像素总数量。相应的，可以分别得到这两幅待处理图像的像素总数量。

S340、若像素总数量不同，则确定两个像素总数量的比值，以得到相似属性。

在本实施例中，得到相邻两次轮询中同一待检测元素的两幅待处理图像的像素总数量之后，可以将这两个像素总数量进行比对处理，如果两个像素总数量不一致，则说明像素总数量不同，即表明这两幅待处理图像不一致。此时可以将两个像素总数量进行作商处理得到两者的比值。可以通过比值评估这两幅待处理图像之间的相似属性。需要说明的是，为了可以清楚的表示出相似属性，可以将相似属性以百分比、小数、分数的形式进行表示，例如，图1的像素总数量为100*100，图2的像素总数量为120*100，可以使用小值除以大值，即(100*100)/(120*100)＝83.33％，可以将83.33％作为相似属性，比值越大说明，相似度越高，比值越小表示相似度越低；也可以将1-83.33％作为相似属性，相似属性数值越大，表示相似度越低，相似属性数值越小，表示相似度越高。或者，在像素总数量不同，确定相似属性时，可以解析两幅待处理图像中同一位置像素信息不同的像素点，进而分别统计出其中一幅待处理图像相对于另一幅待处理图像中像素信息不同的像素总数量，进而可以将相应待处理图像对应的不同的像素总数量与自身图像总的像素数量作比，得到比值作为相似属性。例如，按照图像长宽相乘获取图2的像素总数量120*100之后，可计算图2中与图1中差异的像素数量(120*100-100*100)占像素总数量的百分比，为16.67％，作为相似属性，该相似属性数值越大，表征相似度越高，相似属性数值越小，表征相似度越低。

S350、根据至少一个待检测元素的相似属性，对待检测页面中的待检测元素进行检测。

本发明实施例的技术方案，通过根据每幅待处理图像的长度和宽度，确定相应待处理图像的像素总数量，进而在确定像素总数量不同时，确定两个像素总数量的比值，以得到相似属性。实现通过比较像素总数量的方式，初步判断两幅待处理图像是否不一致，并在像素总数量不同时，确定两幅待处理图像不一致，提高元素检测的快捷性和准确性。

图7为本发明实施例所提供的一种网页元素的自动化检测方法的流程示意图，在前述实施例的基础上，在根据每幅待处理图像的长度和宽度确定出相应待处理图像的像素总数量之后，如果像素总数量相同，那么可以说明像素一致，可以进一步的分析两幅待处理图像中像素的灰度信息是否相同，以确定两幅待处理图像的相似属性，提高对网页元素检测的准确性，其具体的实施方式可以参见本实施例技术方案。其中，与上述实施例相同或者相应的技术术语在此不再赘述。

如图7所示，该方法包括：

S410、轮询获取待检测页面中至少一个待检测元素的待处理图像。

S420、获取相邻两次轮询中同一待检测元素所对应的两幅待处理图像。

S430、根据每幅待处理图像的长度和宽度，确定相应待处理图像的像素总数量。

S440、若像素总数量相同，则分别确定每幅待处理图像的灰度图。

其中，像素信息包括各像素点的灰度值。

在本实施例中，在得到相邻两次轮询中同一待检测元素的两幅待处理图像的像素总数量之后，如果两个像素总数量相同，那么可以进一步的将每幅待处理图像处理成灰度图，用0到255的灰度值表征图像中像素信息，以通过灰度值确定相似属性。

示例性的，如果两张图像的像素总数量一致，那么可以按照从左到右，从上到下的从图像中逐个像素进行灰度计算，得到每个像素的灰度值，相应的得到两张图像的灰度图。

S450、通过对两幅灰度图中同一像素点的灰度值比较处理，确定灰度值不同的相异像素数量。

在本实施例中，可以比较两幅灰度图中同一像素点的灰度值大小，如果灰度值不同，那么可以说明这两幅灰度图中同一像素点具有不同的像素信息。可以统计出这样的像素点的数量，作为相异像素数量。例如，图像1中位置A处的像素点的灰度值为20，图像2中位置A处的像素点的灰度值为21，两个灰度值不同，该像素点即为相异像素点。可以将所有相异像素点的数量总和作为相异像素数量，以基于相异像素数量分析两个图像之间的差异，得到相似属性。

S460、基于相异像素数量和像素总数量，确定相似属性。

在本实施例中，可以将相异像素数量除以像素总数量，得到商值。可以将商值作为评估两幅待处理图像之间差异的相似属性。

S470、根据至少一个待检测元素的相似属性，对待检测页面中的待检测元素进行检测。

本发明实施例的技术方案，通过在像素总数量相同时，分别确定每幅待处理图像的灰度图；对两幅灰度图中同一像素点的灰度值比较处理，确定灰度值不同的相异像素数量；基于相异像素数量和像素总数量，确定相似属性，实现通过像素点的灰度值计算相似属性，以基于相似属性表征两幅待处理图像之间的差异，提高对元素检测的准确性。

图8为本发明实施例所提供的一种网页元素的自动化检测方法的流程示意图，在前述实施例的基础上，对S130作进一步的细化，其具体的实施方式可以参见本实施例技术方案。其中，与上述实施例相同或者相应的技术术语在此不再赘述。

如图8所示，该方法包括：

S510、轮询获取待检测页面中至少一个待检测元素的待处理图像。

S520、获取相邻两次轮询中同一待检测元素所对应的两幅待处理图像，并确定两幅待处理图像之间的相似属性。

S530、若存在至少一个待检测元素的相似属性大于预设相似属性阈值，则确定待检测页面存在异常，并预警提示。

需要说明的是，在实际应用中，待检测页面中的各待检测元素可能是相同的，也可能是不同的。例如，元素1和元素2的元素类型均是文字，但文字内容、字数、颜色、字体、所占区域大小等可能是不同的。相应的，不同待检测页面中的待检测元素的显示标准可能是不同的，同一待检测页面中不同待检测元素的检测标准可能也是不同。为了提高对页面中待检测元素检测的准确性，可以为待检测页面中的每个待检测元素均配置相应的检测阈值，即作为预设相似属性阈值。例如，预设相似属性阈值可以是基于待检测元素的元素属性和/或待检测元素所属待检测页面的页面属性等信息进行设定的。

还需要说明的是，在配置预设相似属性阈值时，可以进一步结合相似属性进行设定，如果相似属性数值越高，表征不相似程度越高，相似程度越低。相应的，在实际应用中，待检测元素的相似属性数值越低，说明该元素的显示效果越好，此时设置的预设相似属性阈值越高，表征不相似程度越高，相似程度越低。例如，重要程度高的待检测元素所对应的预设相似属性阈值可以设置为0.2％；显示效果复杂的待检测元素所对应的预设相似属性阈值可以设置为0.3％。如果相似属性数值越低，表征相似程度越高，不相似程度越低。相应的，在实际应用中，待检测元素的相似属性数值越低，说明该元素的显示效果越差，此时设置的预设相似属性阈值越小，表征相似程度越高，不相似程度越低。例如，重要程度高的待检测元素所对应的预设相似属性阈值可以设置为98％；显示效果复杂的待检测元素所对应的预设相似属性阈值可以设置为97％。以基于预设相似属性阈值确定相似属性是否符合显示标准。

在实际应用中，可以在确定待检测元素的相似属性之后，将相似属性与该待检测元素所对应的预设相似属性阈值进行比对，如果相似属性大于预设相似属性阈值，则说明该待检测元素对应的两幅待处理图像之间存在的差异超出设定要求，该待检测元素未达到设定的显示标准。此时认为待检测页面存在异常，可以自动触发预警提示。例如，页面1中元素A的相似属性为3.41％，大于预设相似属性阈值0.3％，说明元素A的两幅图像差异大，元素A可能未正常显示，此时确定页面1存在异常。

示例性的，继续参见图2，判断相似属性是否大于预设相似属性阈值，如果是，则预警提示，如果否，本轮次比对结束。

在本实施例中，在预警提示时，可以在待检测页面中将预警区域突出显示。

其中，预警区域是基于相似属性大于预设相似属性阈值时所对应的像素点位置确定的。

具体的，可以在触发预警提示时，基于相似属性大于预设相似属性阈值的像素点位置标记出预警区域，此时的预警区域是两幅图像存在差异的区域。进一步的，可以将预警区域突出显示，突出显示方式可以是使用线条将预警区域框选出并显示，也可以是将预警区域中信息进行高亮显示，或者是以文字、图标等形式进行突出显示，具体的突出显示方式不做限定。例如，预警区域可以以红绿线条框选，以便查看区域中哪些元素存在异常，便于后续予以修复。

需要说明的是，为了使得工作用户可以清楚的从两幅待处理图像中突出显示的预警区域获知差异信息，进行信息的比对。还可以将突出显示了预警区域的两幅待处理图像进行拼接，得到拼接图像，以将拼接图像发送至用户终端设备。示例性的，参见图9，假设待处理图像1_1_1.jpg与待处理图像1_2_1.jpg之间的相似属性(如15％)大于预设相似属性阈值(如2％)，可以将两幅图像中000指向111的箭头和111指向222的箭头对应的预警区域，以及222所属线条框对应的预警区域以虚线框高亮标出。

还可以是将存在异常的待检测页面所包含的多个待处理图像进行拼接，分别得到相邻两个轮次的页面图像，此时的页面图像中可能包含了一个待检测元素的待处理图像，也可能包含了多个待检测元素的待处理图像。可以将页面图像中相似属性大于预设相似属性阈值的待处理图像中的预警区域进行突出显示，并将突出显示的两个页面图像进行拼接，得到拼接图像，以基于该拼接图像清楚的获知待检测页面中存在显示异常的所有待检测元素。

为了使得工作用户可以清楚获知待检测元素的两幅待处理图像之间的差异程度，方便用户确定是否需要进行修复操作。还可以在预警区域中显示相似属性，或者在待检测页面中预设第一位置显示相似属性，或者在拼接图像中预设第二位置显示相似属性。例如，可以在待检测页面的正中位置标注图像差异百分比(即相似属性)，如，相似属性为3.41％，表征两幅图像有百分之3.41的像素不一致。

示例性的，继续参加图9，可以将15％差异的相似属性显示在拼接图像中。

需要说明的是，在预警提示时，还可以将突出显示了预警区域以及相似属性的拼接图像发送至用户终端设备，以使用户终端设备所对应的工作人员在收到拼接图像之后，基于拼接图像确认页面是否出现异常，以在确认异常时，及时进行页面修复。

示例性的，可以以邮件、短信、消息、网页等方式进行发送，发送的信息中包含对待检测页面的检测任务、每个待检测元素的待处理图像、和/或相似属性大于预设相似属性阈值的待检测元素的前后对比图(即拼接图像)等，以使获知到预警提示的工作人员可以根据接收的信息判定css是否异常，以此进行后续的修复工作。实现通过人工确认css是否正确，提高检测的准确性，避免出现检测误差。

本发明实施例的技术方案，通过在存在至少一个待检测元素的相似属性大于预设相似属性阈值时，确定待检测页面存在异常，并预警提示，实现对异常待检测页面监测的及时性，便于后续修复工作的执行。

图10为本发明实施例所提供的一种网页元素的自动化检测装置的结构示意图，该装置包括：待处理图像获取模块610、相似属性确定模块620以及元素检测模块630。

其中，待处理图像获取模块610，用于轮询获取待检测页面中至少一个待检测元素的待处理图像；相似属性确定模块620，用于获取相邻两次轮询中同一待检测元素所对应的两幅待处理图像，并确定两幅所述待处理图像之间的相似属性；元素检测模块630，用于根据所述至少一个待检测元素的相似属性，对所述待检测页面中的待检测元素进行检测。

在上述装置的基础上，可选的，所述装置还包括设置模块。

所述设置模块，用于设置待检测页面、所述待检测页面中的至少一个待检测元素以及所述待检测元素所对应的检测顺序，以基于所述检测顺序依次获取所述至少一个待检测元素的待处理图像。

在上述装置的基础上，可选的，待处理图像获取模块610，具体用于基于预先配置的定时任务轮询获取所述待检测页面中至少一个待检测元素的待处理图像；

其中，所述定时任务中包括轮询频率。

在上述装置的基础上，可选的，相似属性确定模块620包括像素信息确定单元和相似属性确定单元。

像素信息确定单元，用于分别确定每幅待处理图像所对应的像素信息；

相似属性确定单元，用于基于各像素信息，确定两幅所述待处理图像的相似属性。

在上述装置的基础上，可选的，所述像素信息包括像素总数量，像素信息确定单元包括像素总数量确定子单元，所述像素总数量确定子单元，用于根据每幅待处理图像的长度和宽度，确定相应待处理图像的像素总数量。

相应的，相似属性确定单元，用于若所述像素总数量不同，则确定两个像素总数量的比值，以得到所述相似属性。

在上述装置的基础上，可选的，相似属性确定单元，还用于若所述像素总数量相同，则分别确定每幅待处理图像的灰度图。相应的，所述像素信息包括各像素点的灰度值，所述相似属性确定单元，还包括相异像素数量确定子单元和相似属性确定子单元。

相异像素数量确定子单元，用于通过对两幅所述灰度图中同一像素点的灰度值比较处理，确定灰度值不同的相异像素数量；

相似属性确定子单元，用于基于所述相异像素数量和所述像素总数量，确定所述相似属性。

在上述装置的基础上，可选的，元素检测模块630，具体用于若存在至少一个待检测元素的相似属性大于预设相似属性阈值，则确定所述待检测页面存在异常，并预警提示。

在上述装置的基础上，可选的，元素检测模块630，还用于在预警提示时，在所述待检测页面中将预警区域突出显示；其中，所述预警区域是基于相似属性大于预设相似属性阈值时所对应的像素点位置确定的。

在上述装置的基础上，可选的，元素检测模块630，还用于在所述预警区域中还显示相似属性。

本发明实施例的技术方案，通过轮询获取待检测页面中至少一个待检测元素的待处理图像；获取相邻两次轮询中同一待检测元素所对应的两幅待处理图像，并确定两幅待处理图像之间的相似属性；根据至少一个待检测元素的相似属性，对待检测页面中的待检测元素进行检测。本发明实施例的技术方案，解决了现有技术中基于人工主观经验对网页元素进行检查，导致元素漏检，以及检测准确性低、成本高的技术问题，实现通过自动化轮询获取待检测页面中各待检测元素的待处理图像，将相邻两次轮询中同一待检测元素所对应的两幅待处理图像比对确定相似属性，进而基于相似属性自动化对待检测元素进行检测，在降低检测成本的同时，达到提高元素检测的全面性和准确性的效果。

本发明实施例所提供的网页元素的自动化检测装置可执行本发明任意实施例所提供的网页元素的自动化检测方法，具备执行方法相应的功能模块和有益效果。

值得注意的是，上述系统所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明实施例的保护范围。

图11为本发明实施例所提供的一种电子设备的结构示意图。图11示出了适于用来实现本发明实施例实施方式的示例性电子设备70的框图。图11显示的电子设备70仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图11所示，电子设备70以通用计算设备的形式表现。电子设备70的组件可以包括但不限于：一个或者多个处理器或者处理单元701，系统存储器702，连接不同系统组件(包括系统存储器702和处理单元701)的总线703。

总线703表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。

电子设备70典型地包括多种计算机系统可读介质。这些介质可以是任何能够被电子设备70访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

系统存储器702可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)704和/或高速缓存存储器705。电子设备70可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统706可以用于读写不可移动的、非易失性磁介质(图11未显示，通常称为“硬盘驱动器”)。尽管图11中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM，DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线703相连。存储器702可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。

具有一组(至少一个)程序模块707的程序/实用工具708，可以存储在例如存储器702中，这样的程序模块707包括但不限于操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块707通常执行本发明所描述的实施例中的功能和/或方法。

电子设备70也可以与一个或多个外部设备709(例如键盘、指向设备、显示器810等)通信，还可与一个或者多个使得用户能与该电子设备70交互的设备通信，和/或与使得该电子设备70能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口711进行。并且，电子设备70还可以通过网络适配器712与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器712通过总线703与电子设备70的其它模块通信。应当明白，尽管图11中未示出，可以结合电子设备70使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

处理单元701通过运行存储在系统存储器702中的程序，从而执行各种功能应用以及数据处理，例如实现本发明实施例所提供的网页元素的自动化检测方法。

本发明实施例还提供一种包含计算机可执行指令的存储介质，计算机可执行指令在由计算机处理器执行时用于执行一种网页元素的自动化检测方法，该方法包括：

轮询获取待检测页面中至少一个待检测元素的待处理图像；

获取相邻两次轮询中同一待检测元素所对应的两幅待处理图像，并确定两幅所述待处理图像之间的相似属性；

根据所述至少一个待检测元素的相似属性，对所述待检测页面中的待检测元素进行检测。

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明实施例操作的计算机程序代码，程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言——诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (12)

1.一种网页元素的自动化检测方法，其特征在于，包括：

轮询获取待检测页面中至少一个待检测元素的待处理图像；

获取相邻两次轮询中同一待检测元素所对应的两幅待处理图像，并确定两幅所述待处理图像之间的相似属性；

根据所述至少一个待检测元素的相似属性，对所述待检测页面中的待检测元素进行检测。

2.根据权利要求1所述的方法，其特征在于，在所述轮询获取待检测页面中至少一个待检测元素的待处理图像之前，还包括：

设置待检测页面、所述待检测页面中的至少一个待检测元素以及所述待检测元素所对应的检测顺序，以基于所述检测顺序依次获取所述至少一个待检测元素的待处理图像。

3.根据权利要求1所述的方法，其特征在于，所述轮询获取待检测页面中至少一个待检测元素的待处理图像，包括：

基于预先配置的定时任务轮询获取所述待检测页面中至少一个待检测元素的待处理图像；

其中，所述定时任务中包括轮询频率。

4.根据权利要求1所述的方法，其特征在于，所述确定两幅所述待处理图像之间的相似属性，包括：

分别确定每幅待处理图像所对应的像素信息；

基于各像素信息，确定两幅所述待处理图像的相似属性。

5.根据权利要求4所述的方法，其特征在于，所述像素信息包括像素总数量，所述分别确定每幅待处理图像所对应的像素信息，包括：

根据每幅待处理图像的长度和宽度，确定相应待处理图像的像素总数量；

相应的，所述基于各像素信息，确定两幅所述待处理图像的相似属性，包括：

若所述像素总数量不同，则确定两个像素总数量的比值，以得到所述相似属性。

6.根据权利要求5所述的方法，其特征在于，还包括：

若所述像素总数量相同，则分别确定每幅待处理图像的灰度图；

相应的，所述像素信息包括各像素点的灰度值，所述基于各像素信息，确定两幅所述待处理图像的相似属性，包括：

通过对两幅所述灰度图中同一像素点的灰度值比较处理，确定灰度值不同的相异像素数量；

基于所述相异像素数量和所述像素总数量，确定所述相似属性。

7.根据权利要求1所述的方法，其特征在于，所述根据所述至少一个待检测元素的相似属性，对所述待检测页面中的待检测元素进行检测，包括：

若存在至少一个待检测元素的相似属性大于预设相似属性阈值，则确定所述待检测页面存在异常，并预警提示。

8.根据权利要求7所述的方法，其特征在于，在预警提示时，还包括：

在所述待检测页面中将预警区域突出显示；

其中，所述预警区域是基于相似属性大于预设相似属性阈值时所对应的像素点位置确定的。

9.根据权利要求8所述的方法，其特征在于，还包括：

在所述预警区域中还显示相似属性。

10.一种网页元素的自动化检测装置，其特征在于，包括：

待处理图像获取模块，用于轮询获取待检测页面中至少一个待检测元素的待处理图像；

相似属性确定模块，用于获取相邻两次轮询中同一待检测元素所对应的两幅待处理图像，并确定两幅所述待处理图像之间的相似属性；

元素检测模块，用于根据所述至少一个待检测元素的相似属性，对所述待检测页面中的待检测元素进行检测。

11.一种电子设备，其特征在于，所述电子设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-9任一项所述的网页元素的自动化检测方法。

12.一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行如权利要求1-9任一项所述的网页元素的自动化检测方法。

Images