CN110825651A

CN110825651A - 网页兼容性测试方法、装置、系统及存储介质

Info

Publication number: CN110825651A
Application number: CN201911264055.2A
Authority: CN
Inventors: 杨杨
Original assignee: Beijing Haiyi Tongzhan Information Technology Co Ltd
Current assignee: Beijing Haiyi Tongzhan Information Technology Co Ltd
Priority date: 2019-12-11
Filing date: 2019-12-11
Publication date: 2020-02-21

Abstract

本发明提供一种网页兼容性测试方法、装置、系统及存储介质，该方法，包括：获取待测试网页的基准图片；在不同浏览器中展示所述待测试网页，得到展示图片；将所述展示图片与所述基准图片进行比较，得到比较结果；若所有所述展示图片的比较结果均满足预设条件，则确定所述待测试网页不存在兼容问题。从而可以自动地进行网页的兼容性测试，整个过程无需人工干预，测试效率高，测试结果更加准确。

Description

网页兼容性测试方法、装置、系统及存储介质

技术领域

本发明涉及互联网技术领域，尤其涉及一种网页兼容性测试方法、装置、系统及存储介质。

背景技术

随着网络技术的快速发展，网页已经能够支持几乎所有媒体类型的信息发布。由于浏览器的版本和类型不同，网页在不同浏览器上进行展示时，可能会出现兼容问题，因此在网页信息发布之前，需要对网页的兼容性进行测试。

目前，一般是通过测试人员将网页在不同浏览器上分别进行测试。然而，这种方式需要花费大量的人工成本，测试效率低下。

发明内容

本发明提供一种网页兼容性测试方法、装置、系统及存储介质，可以自动地进行网页的兼容性测试，整个过程无需人工干预，测试效率高，测试结果更加准确。

第一方面，本发明实施例提供一种网页兼容性测试方法，包括：

获取待测试网页的基准图片；

在不同浏览器中展示所述待测试网页，得到展示图片；

将所述展示图片与所述基准图片进行比较，得到比较结果；

若所有所述展示图片的比较结果均满足预设条件，则确定所述待测试网页不存在兼容问题。

在一种可能的设计中，所述获取待测试网页的基准图片，包括：

将所述待测试网页正常显示的全局页面或者局部页面进行截图保存，得到所述待测试网页的基准图片；其中，所述基准图片包含有至少一个元素控件。

在一种可能的设计中，所述在不同浏览器中展示所述待测试网页，得到展示图片，包括：

通过自动化测试工具WebDriver启动不同的浏览器，并在不同的浏览器中展示所述待测试网页；

对不同的浏览器上展示的所述待测试网页进行截图，得到所述展示图片。

在一种可能的设计中，若所有所述展示图片的比较结果均满足预设条件，则确定所述待测试网页不存在兼容问题，包括：

若所有所述展示图片均与所述基准图片一致，或者所有所述展示图片均与所述基准图片的相似度阈值大于预设阈值，则确定所述待测试网页不存在兼容问题。

在一种可能的设计中，所述将所述展示图片与所述基准图片进行比较，得到比较结果，包括：

从所述展示图片中提取出待比较的元素控件；

将所述待比较的元素控件与所述基准图片上的元素控件进行相似度比较，得到相似度阈值；其中，所述元素控件包括：功能按钮、输入框。

通过开源的计算机视觉库OpenCV计算所述展示图片和所述基准图片的相似度阈值；所述相似度阈值包括：形状相似度阈值和颜色相似度阈值。

若所有所述展示图片和所述基准图片的形状相似度阈值、颜色相似度阈值均大于预设阈值，则确定所述待测试网页不存在兼容问题。

第二方面，本发明实施例提供一种网页兼容性测试装置，包括：

获取模块，用于获取待测试网页的基准图片；

展示模块，用于在不同浏览器中展示所述待测试网页，得到展示图片；

比较模块，用于将所述展示图片与所述基准图片进行比较，得到比较结果；

确定模块，用于在所有所述展示图片的比较结果均满足预设条件时，确定所述待测试网页不存在兼容问题。

在一种可能的设计中，所述获取模块，具体用于：

在一种可能的设计中，所述展示模块，具体用于：

在一种可能的设计中，所述确定模块，具体用于：

在一种可能的设计中，所述比较模块，具体用于：

从所述展示图片中提取出待比较的元素控件；

在一种可能的设计中，所述比较模块，具体用于：

在一种可能的设计中，所述确定模块，具体用于：

第三方面，本发明实施例提供一种网页兼容性测试系统，包括：存储器和处理器，存储器中存储有所述处理器的可执行指令；其中，所述处理器配置为经由执行所述可执行指令来执行第一方面中任一项所述的网页兼容性测试方法。

第四方面，本发明实施例提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现第一方面中任一项所述的网页兼容性测试方法。

第五方面，本发明实施例提供一种程序产品，所述程序产品包括：计算机程序，所述计算机程序存储在可读存储介质中，服务器的至少一个处理器可以从所述可读存储介质读取所述计算机程序，所述至少一个处理器执行所述计算机程序使得服务器执行第一方面中任一所述的网页兼容性测试方法。

本发明提供一种网页兼容性测试方法、装置、系统及存储介质，通过获取待测试网页的基准图片；在不同浏览器中展示所述待测试网页，得到展示图片；将所述展示图片与所述基准图片进行比较，得到比较结果；若所有所述展示图片的比较结果均满足预设条件，则确定所述待测试网页不存在兼容问题。从而可以自动地进行网页的兼容性测试，整个过程无需人工干预，测试效率高，测试结果更加准确。

附图说明

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

图1为本发明一应用场景的原理示意图；

图2为本发明实施例一提供的网页兼容性测试方法的流程图；

图3为本发明实施例二提供的网页兼容性测试装置的结构示意图；

图4为本发明实施例三提供的网页兼容性测试系统的结构示意图。

通过上述附图，已示出本公开明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本公开构思的范围，而是通过参考特定实施例为本领域技术人员说明本公开的概念。

具体实施方式

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

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

为了便于理解技术方案，对本发明中出现的专业术语进行解释。

1)兼容性：指某个软件能稳定地工作在某个操作系统/硬件设备/软件版本之中，就说这个软件对这个操作系统/机型/浏览器是兼容的。

2)HTML：超文本标记语言，标准通用标记语言下的一个应用。

3)CSS：层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

4)JS：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。

5)OpenCV(Open Source Computer Vision Library)：是一个开源的计算机视觉库，它提供了很多函数，这些函数非常高效地实现了计算机视觉算法(最基本的滤波到高级的物体检测皆有涵盖)。

6)Web(World Wide Web)：即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。

7)WebDriver：是一个干净、快速的web应用自动测试框架，针对各个浏览器而开发，与浏览器的紧密集成支持创建更高级的测试。

下面以具体地实施例对本发明的技术方案进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例不再赘述。

随着网络技术的快速发展，网页已经能够支持几乎所有媒体类型的信息发布。由于浏览器的版本和类型不同，网页在不同浏览器上进行展示时，可能会出现兼容问题，因此在网页信息发布之前，需要对网页的兼容性进行测试。目前，一般是通过测试人员将网页在不同浏览器上分别进行测试。然而，这种方式需要花费大量的人工成本，测试效率低下。

针对上述技术问题，本发明提供一种网页兼容性测试方法、装置、系统及存储介质，可以自动地进行网页的兼容性测试，整个过程无需人工干预，测试效率高，测试结果更加准确。图1为本发明一应用场景的原理示意图，如图1所示，兼容性问题一般是由CSS或者JS在不同的浏览器支持效果不一致引起的。CSS引起的问题可以通过待测页面与基准图片对比是否一致或者相似度符合预期进行验证，JS引起的问题可以通过操作页面功能按钮，输入框等元素控件进行验证。因此，首先需要准备基准图片，即设计测试用例，将一张正常显示的页面图片进行截图保留，可以是一张完整页面，也可以是页面的局部元素的截图，用于后续对比测试。网页兼容性测试，实质上包括三个维度的兼容性测试，即操作系统/平台兼容性、浏览器兼容性、屏幕尺寸/分辨率兼容性。因此，可以通过Webdriver启动不同浏览器，例如启动Chrome浏览器、Firefox浏览器、IE浏览器、360浏览器、QQ浏览器。为提高测试效率，还可以采取多线程启动方式，同时启动多个浏览器，在不同的浏览器中展示待测试网页。然后，对不同的浏览器上展示的待测试网页进行截图，得到展示图片。以Chrome浏览器为例说明测试过程(其他浏览器测试过程类似)：启动Chrome浏览器，执行测试用例访问指定的页面，将该页面进行截图，得到展示图片。然后，通过图片对比进行兼容性测试，是指通过对比图片相似度和操作页面元素进行验证。兼容问题常见于样式异常，文字重叠，元素展示不完整等，这些问题可以通过与基准图片对比是否一致来进行测试。通过OpenCV计算出图片的相似度阈值。相似度阈值包括：形状相似度阈值和颜色相似度阈值两个维度指标。若所有展示图片均与基准图片一致，或者所有展示图片均与基准图片的相似度阈值大于预设阈值，则确定待测试网页不存在兼容问题，测试通过。反之，则存在兼容问题，测试不通过。

应用上述方法可以通过将图像识别和自动化测试相结合，能够自动地进行网页的兼容性测试，整个过程无需人工干预，测试效率高，测试结果更加准确。

下面以具体地实施例对本发明的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本发明的实施例进行描述。

图2为本发明实施例一提供的网页兼容性测试方法的流程图，如图2所示，本实施例中的方法可以包括：

S101、获取待测试网页的基准图片。

本实施例中，将待测试网页正常显示的全局页面或者局部页面进行截图保存，得到待测试网页的基准图片；其中，基准图片包含有至少一个元素控件。

具体地，兼容性问题一般是由CSS或者JS在不同的浏览器支持效果不一致引起的。CSS引起的问题可以通过待测页面与基准图片对比是否一致或者相似度符合预期进行验证，JS引起的问题可以通过操作页面功能按钮，输入框等元素控件进行验证。因此，首先需要准备基准图片，即设计测试用例，将一张正常显示的页面图片进行截图保留，可以是一张完整页面，也可以是页面的局部元素的截图，用于后续对比测试。

S102、在不同浏览器中展示待测试网页，得到展示图片。

本实施例中，可以通过自动化测试工具WebDriver启动不同的浏览器，并在不同的浏览器中展示待测试网页；对不同的浏览器上展示的待测试网页进行截图，得到展示图片。

具体地，网页兼容性测试，实质上包括三个维度的兼容性测试，即操作系统/平台兼容性、浏览器兼容性、屏幕尺寸/分辨率兼容性。因此，可以通过Webdriver启动不同浏览器，例如启动Chrome浏览器、Firefox浏览器、IE浏览器、360浏览器、QQ浏览器。为提高测试效率，还可以采取多线程启动方式，同时启动多个浏览器，在不同的浏览器中展示待测试网页。然后，对不同的浏览器上展示的待测试网页进行截图，得到展示图片。以Chrome浏览器为例说明测试过程(其他浏览器测试过程类似)：启动Chrome浏览器，执行测试用例访问指定的页面，将该页面进行截图，得到展示图片。

S103、将展示图片与基准图片进行比较，得到比较结果。

本实施例中，可以通过开源的计算机视觉库OpenCV计算展示图片和基准图片的相似度阈值；相似度阈值包括：形状相似度阈值和颜色相似度阈值。

具体地，图片对比进行兼容性测试是通过对比图片相似度和操作页面元素进行验证。兼容问题常见于样式异常，文字重叠，元素展示不完整等，这些问题可以通过与基准图片对比是否一致来进行测试。通过OpenCV计算出图片的相似度阈值。相似度阈值包括：形状相似度阈值和颜色相似度阈值两个维度指标。

可选地，还可以从展示图片中提取出待比较的元素控件；将待比较的元素控件与基准图片上的元素控件进行相似度比较，得到相似度阈值；其中，元素控件包括：功能按钮、输入框。

具体地，还可以从JS在不同的浏览器支持效果来进行兼容性测试，通过从展示图片中提取出待比较的元素控件，并与基准图片上的元素控件进行相似度比较，得到相似度阈值。

S104、若所有展示图片的比较结果均满足预设条件，则确定待测试网页不存在兼容问题。

本实施例中，若所有展示图片均与基准图片一致，或者所有展示图片均与基准图片的相似度阈值大于预设阈值，则确定待测试网页不存在兼容问题。

可选地，若所有展示图片和基准图片的形状相似度阈值、颜色相似度阈值均大于预设阈值，则确定待测试网页不存在兼容问题。

具体地，展示图片与基准图片的进行相似度对比，设置了图片形状相似度阈值、颜色相似度阈值两个维度指标，同时满足这两个阈值则认为两图片不存在兼容问题。反之，则存在兼容问题。因此，可以通过将图像识别和自动化测试相结合，能够自动地进行页面兼容性测试，以解决测试人员在该类型测试时重复工作量大和效率低下的问题。

本实施例，通过获取待测试网页的基准图片；在不同浏览器中展示待测试网页，得到展示图片；将展示图片与基准图片进行比较，得到比较结果；若所有展示图片的比较结果均满足预设条件，则确定待测试网页不存在兼容问题。从而可以自动地进行网页的兼容性测试，整个过程无需人工干预，测试效率高，测试结果更加准确。

图3为本发明实施例二提供的网页兼容性测试装置的结构示意图，如图3所示，本实施例的网页兼容性测试装置可以包括：

获取模块31，用于获取待测试网页的基准图片；

展示模块32，用于在不同浏览器中展示待测试网页，得到展示图片；

比较模块33，用于将展示图片与基准图片进行比较，得到比较结果；

确定模块34，用于在所有展示图片的比较结果均满足预设条件时，确定待测试网页不存在兼容问题。

在一种可能的设计中，获取模块31，具体用于：

将待测试网页正常显示的全局页面或者局部页面进行截图保存，得到待测试网页的基准图片；其中，基准图片包含有至少一个元素控件。

在一种可能的设计中，展示模块32，具体用于：

通过自动化测试工具WebDriver启动不同的浏览器，并在不同的浏览器中展示待测试网页；

对不同的浏览器上展示的待测试网页进行截图，得到展示图片。

在一种可能的设计中，确定模块34，具体用于：

若所有展示图片均与基准图片一致，或者所有展示图片均与基准图片的相似度阈值大于预设阈值，则确定待测试网页不存在兼容问题。

在一种可能的设计中，比较模块33，具体用于：

从展示图片中提取出待比较的元素控件；

将待比较的元素控件与基准图片上的元素控件进行相似度比较，得到相似度阈值；其中，元素控件包括：功能按钮、输入框。

在一种可能的设计中，比较模块33，具体用于：

通过开源的计算机视觉库OpenCV计算展示图片和基准图片的相似度阈值；相似度阈值包括：形状相似度阈值和颜色相似度阈值。

在一种可能的设计中，确定模块34，具体用于：

若所有展示图片和基准图片的形状相似度阈值、颜色相似度阈值均大于预设阈值，则确定待测试网页不存在兼容问题。

本实施例的网页兼容性测试装置，可以执行图2所示方法中的技术方案，其具体实现过程和技术原理参见图2所示方法中的相关描述，此处不再赘述。

图4为本发明实施例三提供的网页兼容性测试系统的结构示意图，如图4所示，本实施例的网页兼容性测试系统40可以包括：处理器41和存储器42。

存储器42，用于存储程序；存储器42，可以包括易失性存储器(英文：volatilememory)，例如随机存取存储器(英文：random-access memory，缩写：RAM)，如静态随机存取存储器(英文：static random-access memory，缩写：SRAM)，双倍数据率同步动态随机存取存储器(英文：Double Data Rate Synchronous Dynamic Random Access Memory，缩写：DDR SDRAM)等；存储器也可以包括非易失性存储器(英文：non-volatile memory)，例如快闪存储器(英文：flash memory)。存储器42用于存储计算机程序(如实现上述方法的应用程序、功能模块等)、计算机指令等，上述的计算机程序、计算机指令等可以分区存储在一个或多个存储器42中。并且上述的计算机程序、计算机指令、数据等可以被处理器41调用。

上述的计算机程序、计算机指令等可以分区存储在一个或多个存储器42中。并且上述的计算机程序、计算机指令、数据等可以被处理器41调用。

处理器41，用于执行存储器42存储的计算机程序，以实现上述实施例涉及的方法中的各个步骤。

具体可以参见前面方法实施例中的相关描述。

处理器41和存储器42可以是独立结构，也可以是集成在一起的集成结构。当处理器41和存储器42是独立结构时，存储器42、处理器41可以通过总线43耦合连接。

本实施例的网页兼容性测试系统可以执行图2所示方法中的技术方案，其具体实现过程和技术原理参见图2所示方法中的相关描述，此处不再赘述。

此外，本申请实施例还提供一种计算机可读存储介质，计算机可读存储介质中存储有计算机执行指令，当用户设备的至少一个处理器执行该计算机执行指令时，用户设备执行上述各种可能的方法。

其中，计算机可读介质包括计算机存储介质和通信介质，其中通信介质包括便于从一个地方向另一个地方传送计算机程序的任何介质。存储介质可以是通用或专用计算机能够存取的任何可用介质。一种示例性的存储介质耦合至处理器，从而使处理器能够从该存储介质读取信息，且可向该存储介质写入信息。当然，存储介质也可以是处理器的组成部分。处理器和存储介质可以位于ASIC中。另外，该ASIC可以位于用户设备中。当然，处理器和存储介质也可以作为分立组件存在于通信设备中。

本申请还提供一种程序产品，程序产品包括计算机程序，计算机程序存储在可读存储介质中，服务器的至少一个处理器可以从可读存储介质读取计算机程序，至少一个处理器执行计算机程序使得服务器实施上述本发明实施例任一的方法。

本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或对其中部分或全部技术特征进行等同替换；而这些修改或替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims

1.一种网页兼容性测试方法，其特征在于，包括：

获取待测试网页的基准图片；

在不同浏览器中展示所述待测试网页，得到展示图片；

将所述展示图片与所述基准图片进行比较，得到比较结果；

2.根据权利要求1所述的方法，其特征在于，所述获取待测试网页的基准图片，包括：

3.根据权利要求1所述的方法，其特征在于，所述在不同浏览器中展示所述待测试网页，得到展示图片，包括：

4.根据权利要求1所述的方法，其特征在于，若所有所述展示图片的比较结果均满足预设条件，则确定所述待测试网页不存在兼容问题，包括：

5.根据权利要求2所述的方法，其特征在于，所述将所述展示图片与所述基准图片进行比较，得到比较结果，包括：

从所述展示图片中提取出待比较的元素控件；

6.根据权利要求1所述的方法，其特征在于，所述将所述展示图片与所述基准图片进行比较，得到比较结果，包括：

7.根据权利要求6所述的方法，其特征在于，若所有所述展示图片的比较结果均满足预设条件，则确定所述待测试网页不存在兼容问题，包括：

8.一种网页兼容性测试装置，其特征在于，包括：

获取模块，用于获取待测试网页的基准图片；

9.一种网页兼容性测试系统，其特征在于，包括：存储器、处理器，存储器中存储有所述处理器的可执行指令；其中，所述处理器配置为经由执行所述可执行指令来执行权利要求1-7所述的网页兼容性测试方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1-7所述的网页兼容性测试方法。