页面兼容性检测方法、装置、设备及存储介质

技术领域

本申请涉及互联网技术领域，尤其涉及一种页面兼容性检测方法、装置、设备及存储介质。

背景技术

对于页面兼容性检测，已存在的检测方案有图像识别匹配方案，根据预先配置的数据模型获取所述多张图片对应的相似度，其中，所述数据模型为根据多个预先配置的数据集合训练得到的，每个数据集合均包括相似度为预定值的多张图片；将所述多张图片对应的相似度与预先设置的阈值进行比较；在所述多张图片对应的相似度超过所述阈值的情况下，确定所述多张图片对应的网页的兼容性测试通过。因页面复杂性不同，对于相对复杂的页面，常规图像识别检测准确率较低；需要进行图像识别模型训练，依赖较多的图像源。

对于异形屏页面的检测以及页面国际化的检测，目前暂无较有效的自动化测试方案，均是通过人工进行验证测试，检测效率较低。

因此，有必要提供一种页面兼容性检测方法、装置、设备及存储介质，以提高页面兼容性检测准确率和检测效率。

发明内容

本申请提供了一种页面兼容性检测方法、装置、设备及存储介质，可以提高页面兼容性检测准确率和检测效率，并降低了检测成本。

一方面，本申请提供了一种页面兼容性检测方法，所述方法包括：

展示用于输入页面地址信息的目标区域；

响应于对所述目标区域的触发指令，确定待测页面地址信息；

获取待检测终端的目标机型标识信息；

在与所述目标机型标识信息匹配的测试浏览器中，展示与所述待测页面地址信息匹配的目标页面；

对所述目标页面中元素进行标记，构建节点树；

确定所述节点树中第一节点所占的第一矩阵区域以及对应的第二节点所占的第二矩阵区域；所述对应的第二节点为所述第一节点的父节点；

当所述第一矩阵区域在所述第二矩阵区域内时，确定所述目标页面与所述待检测终端兼容。

另一方面提供了一种页面兼容性检测装置，所述装置包括：

目标区域输入模块，用于展示用于输入页面地址信息的目标区域；

待测页面地址信息确定模块，用于响应于对所述目标区域的触发指令，确定待测页面地址信息；

标识信息获取模块，用于获取待检测终端的目标机型标识信息；

目标页面展示模块，用于在与所述目标机型标识信息匹配的测试浏览器中，展示与所述待测页面地址信息匹配的目标页面；

节点树构建模块，用于对所述目标页面中元素进行标记，构建节点树；

矩阵区域确定模块，用于确定所述节点树中第一节点所占的第一矩阵区域以及对应的第二节点所占的第二矩阵区域；所述对应的第二节点为所述第一节点的父节点；

兼容性确定模块，用于当所述第一矩阵区域在所述第二矩阵区域内时，确定所述目标页面与所述待检测终端兼容。

另一方面提供了一种页面兼容性检测设备，所述设备包括处理器和存储器，所述存储器中存储有至少一条指令或至少一段程序，所述至少一条指令或所述至少一段程序由所述处理器加载并执行以实现如上所述的页面兼容性检测方法。

另一方面提供了一种计算机存储介质，所述计算机存储介质存储有至少一条指令或至少一段程序，所述至少一条指令或至少一段程序由处理器加载并执行以实现如上所述的页面兼容性检测方法。

另一方面提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行如上所述的页面兼容性检测方法。

本申请提供的页面兼容性检测方法、装置、设备及存储介质，具有如下技术效果：

本申请通过展示目标区域，响应于对目标区域的触发指令，确定待测页面地址信息；并在与目标机型标识匹配的测试浏览器中，展示与待测页面地址信息匹配的目标页面；从而可以快速展示目标页面；通过对目标页面中元素进行标记，构建节点树，从而得到节点数中每个节点所占的矩阵区域，当第一节点所占的第一矩阵区域在对应的第二节点所占的第二矩阵区域内时，确定目标页面与待检测终端兼容；从而通过两个矩阵区域的重叠情况来确定页面的兼容性，不需要进行模型训练，提高了页面兼容性检测准确率和检测效率。

附图说明

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

图1是本申请实施例提供的一种页面兼容性检测系统的示意图；

图2是本申请实施例提供的一种页面兼容性检测方法的流程示意图；

图3是本申请实施例提供的一种确定更新节点树中第一更新节点所占的第一矩阵区域以及对应的第二更新节点所占的第二矩阵区域的方法的流程示意图；

图4是本申请实施例提供的一种确定更新节点树的方法的流程示意图；

图5是本申请实施例提供的节点树中body节点示意图；

图6是本申请实施例提供的确定过滤后节点树的方法的流程示意图；

图7是本申请实施例提供的节点树中非页面渲染元素示意图；

图8是本申请实施例提供的节点树中font标签示意图；

图9是本申请实施例提供的确定目标页面与待检测终端兼容的方法的流程示意图；

图10是本申请实施例提供的页面兼容性检测方法的流程示意图；

图11是本申请实施例提供的设置异形屏矢量图分辨率的方法的流程示意图；

图12是本申请实施例提供的异形屏中异形区域的矢量图；

图13是本申请实施例提供的确定目标异形屏与待检测终端的适配关系的方法的流程示意图；

图14是本申请实施例提供的目标异形屏与待检测终端的适配关系检测方法的流程示意图；

图15是本申请实施例提供的一种确定待测试语种与待检测终端的适配关系的方法的流程示意图；

图16是本申请实施例提供的一种语种与终端的适配测试方法的流程示意图；

图17是本申请实施例提供的另一种页面兼容性检测方法的流程示意图；

图18是本申请实施例提供的页面地址、待测试语言以及分辨率的设置界面示意图；

图19是本申请实施例提供的待测试机型的设置界面示意图；

图20是本申请实施例提供的待测试语言的预览界面示意图；

图21是本申请实施例提供的执行测试的提示框图；

图22是本申请实施例提供的输出的检测结果示意图；

图23是本申请实施例提供的一种区块链系统的示意图；

图24是本申请实施例提供的一种区块结构示意图；

图25是本申请实施例提供的一种页面兼容性检测装置的结构示意图；

图26是本申请实施例提供的一种服务器的结构示意图。

具体实施方式

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

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或服务器不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

请参阅图1，图1是本申请实施例提供的一种页面兼容性检测系统的示意图，如图1所示，该页面兼容性检测系统可以至少包括服务器01和客户端02。

具体的，本说明书实施例中，所述服务器01可以包括一个独立运行的服务器，或者分布式服务器，或者由多个服务器组成的服务器集群，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN(ContentDelivery Network，内容分发网络)、以及大数据和人工智能平台等基础云计算服务的云服务器。服务器01可以包括有网络通信单元、处理器和存储器等等。具体的，所述服务器01可以用于进行页面兼容性检测。

具体的，本说明书实施例中，所述客户端02可以包括智能手机、台式电脑、平板电脑、笔记本电脑、数字助理、智能可穿戴设备、车载终端等类型的实体设备，也可以包括运行于实体设备中的软体，例如一些服务商提供给用户的网页页面，也可以为该些服务商提供给用户的应用。具体的，所述客户端02可以用于在线查询待检测页面与待检测终端的兼容性。

以下介绍本申请的一种页面兼容性检测方法，图2是本申请实施例提供的一种页面兼容性检测方法的流程示意图，本说明书提供了如实施例或流程图所述的方法操作步骤，但基于常规或者无创造性的劳动可以包括更多或者更少的操作步骤。实施例中列举的步骤顺序仅仅为众多步骤执行顺序中的一种方式，不代表唯一的执行顺序。在实际中的系统或服务器产品执行时，可以按照实施例或者附图所示的方法顺序执行或者并行执行(例如并行处理器或者多线程处理的环境)。具体的如图2所示，上述方法可以包括：

S201：展示用于输入页面地址信息的目标区域。

在本说明书实施例中，可以通过目标区域接收用户输入的页面地址信息。上述目标区域可以但不限于通过客户端的形式展示，例如：用户打开安装在网页兼容性测试的控制端上的客户端，在该客户端中选择打开目标区域，客户端将目标区域展示在控制端的屏幕上。

S203：响应于对目标区域的触发指令，确定待测页面地址信息。

在本说明书实施例中，对目标区域的触发指令可以为语音指令或文字指令，例如，用户可以在目标区域手动输入待测页面地址信息。待测页面地址信息可以为IP地址，也可以为域名地址。

S205：获取待检测终端的目标机型标识信息。

在本说明书实施例中，每个终端都有对应的唯一机型标识信息，在页面兼容性检测过程中，可以对一种或多种机型进行检测；相应的，目标机型标识信息可以为一个或多个。对于苹果移动终端，机型标识信息可以为iPhone6/7/8、iPhone6/7/8Plus、iPhoneX、iPad等。

在实际应用中，可以批量检测同一品牌的多种机型，也可以检测不同品牌的多种机型。当目标机型标识信息有多个时，可以遍历各个目标机型标识信息，并进行页面兼容性测试。

在本说明书实施例中，获取待检测终端的目标机型标识信息之后，上述方法还可以包括：

获取与目标机型标识信息匹配的测试浏览器。

具体的，在本说明书实施例中，不同的机型对应不同的浏览器，可以预先存储机型标识信息与浏览器的映射关系，一种机型对应一个浏览器，即一个机型标识信息对应一个浏览器。

S207：在与目标机型标识信息匹配的测试浏览器中，展示与待测页面地址信息匹配的目标页面。

在本说明书实施例中，在测试浏览器中显示与待测页面地址信息匹配的目标页面，目标页面中可以包括多个元素，例如文本、图片等。

S209：对目标页面中元素进行标记，构建节点树。

在本说明书实施例中，在获取到目标页面之后，可以对目标页面中所有元素进行标记构建节点树，节点树可以为HTML DOM(Document Object Mode)树。节点树中包括第一节点和第二节点，第二节点为第一节点的父节点，第一节点和第二节点都可以为多个；通过节点树可以构建每个节点所占区域的坐标矩阵，从而便于通过子节点与对应父节点所占矩阵区域的重叠情况来检测目标页面的兼容性。

S2011：确定节点树中第一节点所占的第一矩阵区域以及对应的第二节点所占的第二矩阵区域；对应的第二节点为第一节点的父节点。

在本说明书实施例中，如图3所示，确定更新节点树中第一更新节点所占的第一矩阵区域以及对应的第二更新节点所占的第二矩阵区域，包括：

S20111：根据每个第一更新节点的属性信息，确定每个第一更新节点所占的第一矩阵区域；

S20113：根据每个第一更新节点对应的第二更新节点的属性信息，确定每个第一更新节点对应的第二更新节点所占的第二矩阵区域。

在本说明书实施例中，如图4所示，确定节点树中第一节点所占的第一矩阵区域以及对应的第二节点所占的第二矩阵区域之前，上述方法还包括：

S20101：遍历节点树中各层级的节点，确定文本节点；

在本说明书实施例中，从节点树中body节点开始进行递归遍历；如图5所示，body节点03是整个页面内容区域的起始节点，定义了这个页面的主体，包含了页面的所有展示内容；递归遍历是对body节点下的子节点及更多层的嵌套节点进行逐层遍历。

在本说明书实施例中，文本节点的判断方法是判断dom节点的nodeType是否为3，如果为3，则是文本节点；文本矩阵区域的计算方法是通过dom获取文本节点的左上角x，y坐标，再获取文本节点的高和宽，进而得到文本节点占据的区域。

其中，nodeType的映射关系表如下表1所示：

表1

在本说明书实施例中，如图6所示，遍历节点树中各层级的节点，确定文本节点之前，上述方法还包括：

S201001：确定节点树中的非页面渲染元素；

S201003：过滤节点树中的非页面渲染元素，得到过滤后节点树。

具体的，在本说明书实施例中，非页面渲染元素为脚本标签、注释文本等；在一个具体的实施例中，非页面渲染元素如图7中04、05所示，其中04为注释文本，05为脚本标签；通过对这些元素进行过滤处理，可以提高后续确定文本节点的速度。

相应的，遍历节点树中各层级的节点，确定文本节点，包括：

遍历过滤后节点树中各层级的节点，确定文本节点。

S20103：对文本节点添加目标标签，得到更新节点树。

在本说明书实施例中，目标标签为font标签，标签是一个设置文本文字样式的标签，可以设置文本的字体样式、字体的尺寸、字体的颜色。如图8所示，图8中06为font标签。对文本节点添加font标签便于计算文本的矩阵区域，如果不添加该标签，则无法计算矩阵坐标；但是对于空字符串不需要添加该标签。

在本说明书实施例中，对文本节点添加目标标签，得到更新节点树，包括：

S201031：对文本节点进行克隆，得到克隆节点；

S201033：基于克隆节点与目标标签，构建更新文本节点；

S201035：将所述文本节点替换成所述更新文本节点，得到更新节点树。

在本说明书实施例中，对于要添加font标签的节点进行克隆拷贝，克隆后的对象追加到新建的font节点下，然后使用创建处理后的新节点替换掉原节点。进行克隆拷贝而不是直接在原节点上进行直接操作，一方面可以避免污染原节点结构，导致节点显示错乱；另一方面，执行复杂度更低，不需要再去查找定位上级节点，替换的目的是将font标签进行注入。

在本说明书实施例中，确定节点树中第一节点所占的第一矩阵区域以及对应的第二节点所占的第二矩阵区域，包括：

确定更新节点树中第一更新节点所占的第一矩阵区域以及对应的第二更新节点所占的第二矩阵区域，对应的第二更新节点为第一更新节点的父节点。

在本说明书实施例中，更新节点树中包括多个第一更新节点和多个对应的第二更新节点，确定更新节点树中第一更新节点所占的第一矩阵区域以及对应的第二更新节点所占的第二矩阵区域之前，上述方法还包括：

遍历更新节点树，获取每个第一更新节点的属性信息，以及获取与每个第一更新节点对应的第二更新节点的属性信息。

在本说明书实施例中，遍历更新节点树中所有节点，如，，，