浏览器兼容性测试分析方法及浏览器兼容性测试分析系统

摘要

本发明涉及浏览器兼容性测试分析方法和测试分析系统。该浏览器兼容性测试分析方法包括下述步骤：待测系统显示步骤，以相同的显示方式在不同的浏览器上，使得显示待测试的软件系统的交互界面并且对每个交互界面的显示保存截图；图片编码索引表建立步骤，对保存的截图进行图片预处理以提取多纬度的特征值，根据提取的多维度的特征值，对每张截图建立图片编码索引表，图片比对步骤，根据所述图片编码索引表对各交互界面在不同浏览器上的显示结果进行批量比对并生成比对结果；以及测试报告生成步骤，根据比对结果生成测试报告。利用本发明，能够提高浏览器兼容性测试的效率和准确性。

说明书

技术领域

本发明涉及浏览器兼容性测试技术领域，特别地涉及软件用户界面的浏览器兼容测试方法和系统。

背景技术

目前的软件系统一般需要支持多种浏览器，由于不同浏览器的内核、呈现引擎、JavaScript 解释器以及数据存储之间存在差别，导致软件系统在不同浏览器之间的存在兼容性的问题。针对浏览器的兼容性测试目前一般以手工测试为主，需要对不同浏览器的显示结果人工进行比对分析。

同一款软件的用户界面设计会在不同浏览器之间存在显示的差异，如何准确测试不同浏览器之间的兼容性，一直是困扰测试人员的难题。目前对浏览器兼容性的测试，一般依赖于测试人员的手工检查和肉眼识别，普遍存在三个问题：

1.测试界面比对元素易遗漏；

2.测试比对效率低，并且过度依赖特定测试人员的素质； 

3.测试准确性不高，测试过程中的比对基准不明确。

同时随着互联网经济不断发展，为紧跟市场脚步软件系统的界面设计会经常发生修改，这对于软件系统界面的测试提出了更高的要求。

 

发明内容

鉴于上述问题，本发明旨在提供一种能够提高用户界面的兼容性测试效率和准确性的浏览器兼容性测试分析方法及浏览器兼容性测试分析系统。

本发明的浏览器兼容性测试分析方法，其特征在于，包括下述步骤：

待测系统显示步骤，以相同的显示方式在不同的浏览器上，使得显示待测试的软件系统的交互界面并且对每个交互界面的显示保存截图；

图片编码索引表建立步骤，对保存的截图进行图片预处理以提取多纬度的特征值，根据提取的多维度的特征值，对每张截图建立图片编码索引表；

图片比对步骤，根据所述图片编码索引表对各交互界面在不同浏览器上的显示结果进行批量比对并生成比对结果；以及

测试报告生成步骤，根据比对结果生成测试报告。

优选地，在所述待测系统显示步骤中，所述以相同的显示方式在不同的浏览器上是指，选择尺寸和分辨率相同的多个显示器并安装不同的浏览器或者在一台显示器上安装不同的浏览器，同时剔除浏览器的第三方插件。

优选地，在所述图片编码索引表建立步骤中，对保存的截图进行图片预处理，以提取颜色特征值、纹理特征值、空间关系特征值，并且根据这三个特征值对每张截图建立图片编码索引表。

优选地，所述图片编码索引表建立步骤包括下述子步骤：

颜色特征提取步骤，对保存的截图进行图片预处理以提取表示颜色分布的颜色矩；

纹理特征提取步骤，对保存的截图中包含多个像素点进行统计计算，以获取表述图像的表面性质的纹理特征；以及

空间关系特征提取步骤，对保存的截图中的多个目标之间的相互的空间位置或相对方向关系进行计算得到空间关系特征。

优选地，所述颜色矩包括下述特征：一阶矩、二阶矩、三阶矩，

所述纹理特征包括下述特征：纹理粗细度、方向性，

所述空间关系特征包括下述特征：连接关系、邻接关系、交叠关系、重叠关系、包含关系、包容关系。

优选地，在所述图片比对步骤中，以规定的浏览器为比对基准，按照图片编号查找图片编码索引表，对各交互界面在不同浏览器上的显示结果进行批量比对并生成比对结果。

优选地，在所述图片比对步骤中，能够以根据需要摒弃上述项目中的规定项目的方式进行批量比对并生成比对结果。

优选地，在所述图片比对步骤中，进行图片特征索引位匹配。

优选地，所述图片特征索引位匹配包括下述子步骤：

对于两个浏览器的某个特征值，读取预先设定的规定数值范围；

判断两个浏览器的某个特征值之差是否在该预设的规定数值范围内；

如果在该规定范围内，则判断为两个浏览器的该特征值为相同，否则，判断为两个浏览器的该特征值为不相同。

本发明的浏览器兼容性测试分析系统，其特征在于，包括：

显示方式相同的不同的浏览器，用于显示待测试的软件系统的交互界面并且对每个交互界面的显示保存截图；

图片编码索引表建立模块，对保存的截图进行图片预处理以提取多纬度的特征值，根据提取的多维度的特征值，对每张截图建立图片编码索引表；

图片比对模块，根据所述图片编码索引表对各交互界面在不同浏览器上的显示结果进行批量比对并生成比对结果；以及

测试报告生成模块，根据比对结果生成测试报告。

优选地，所述显示方式相同的不同的浏览器是指，选择尺寸和分辨率相同的多个显示器并安装不同的浏览器或者在一台显示器上安装不同的浏览器，同时剔除浏览器的第三方插件。

根据本发明的浏览器兼容性测试分析方法及浏览器兼容性测试分析系统，能够对待测软件系统在不同浏览器上的显示结果进行批量自动分析比对，并能够通过配置文件灵活控制比对的信息位图摒弃不敏感的比对信息，比对完成后将比对结果自动生成测试报告。因此，利用本发明，能够提高浏览器兼容性测试的效率和准确性。

 

附图说明

图1是本发明的浏览器兼容性测试分析方法的流程示意图。

图2是表示本发明的浏览器兼容性测试分析方法中图片编码索引表建立步骤的具体流程图。

图3是表示本发明的浏览器兼容性测试分析方法中基于图片编码索引表进行比对的流程图。

 

具体实施方式

下面介绍的是本发明的多个实施例中的一些，旨在提供对本发明的基本了解。并不旨在确认本发明的关键或决定性的要素或限定所要保护的范围。

在本发明的主要技术方案是，首先将待测软件系统的交互界面设计中所有存在的界面在不同的浏览器上进行显示，显示前保证浏览器的分辨率和尺寸大小一致，并剔除浏览器第三方插件，降低对测试结果的影响。然后，对每种浏览器显示的图片截图后保持分析，提取图片的特征值，建立特征值索引表。接着，以指定的浏览器显示结果为比对基准分别对其余浏览器的显示结果进行批量比对并生成测试报告，在比对的过程中允许通过配置文件达到差异域的阀值控制，达到相似度的比对预期。

下面首先对于本发明的浏览器兼容性测试分析方法进行说明。

图1是本发明的浏览器兼容性测试分析方法的流程图示意图。

如图1所示，本发明的浏览器兼容性测试分析方法主要包括下述步骤：

待测系统显示步骤：选择尺寸和分辨率相同的N个显示器（在图1中示为浏览器1、浏览器2、浏览器3、浏览器N）并且安装不同的浏览器，或者在同一台显示器上安装不同的浏览器。将待测的界面系统即待测试的软件系统的交互界面输入到浏览器1、浏览器1、浏览器2、浏览器3、浏览器N并且对每个交互界面的显示保存截图；

图片编码索引表建立步骤：对保存的截图进行图片预处理以提取多纬度的特征值，根据提取的多维度的特征值，对每张截图建立图片编码索引表（图1中未图示）；

图片比对步骤：指定浏览器1～N中的一款浏览器（例如主流浏览）为基准，根据所述图片编码索引表对各交互界面在不同浏览器上的显示结果进行批量比对并生成比对结果；以及

测试报告生成步骤：根据比对结果生成测试报告。

图2是表示本发明的浏览器兼容性测试分析方法中图片编码索引表建立步骤的具体流程图。

如图2所示，在所述图片编码索引表建立步骤中，首先对保存的截图进行图片预处理，然后分别对界面图片的颜色特征、纹理特征、空间关系特征这三个纬度进行匹配，最后将图片特征值汇总，建立图片编码索引表。

其中，颜色特征描述了图像基于像素点的性质。图像中任何的颜色分布均可以用它的矩来表示。颜色分布信息主要集中在低阶矩中，采用颜色的一阶矩（mean）、二阶矩（variance）和三阶矩（skewness）以表达图像的颜色分布。获取图片的颜色矩并进行颜色编码，得到软件界面系统背景、前景色以及阴影的颜色层次的信息。

纹理特征是一种全局特征，描述的是图像的表面性质。对包含多个像素点的区域中进行统计计算，以获取图片纹理的粗细度及方向性等特征参数的信息。

空间关系是指图像中分割出来的多个目标之间的相互的空间位置或相对方向关系，这些关系也可分为连接、邻接、交叠、重叠、包含、包容等关系。通过分析图片中的空间关系可以得到软件界面中的录入框、信息展示、下拉框等之间的布局信息。

接着，对于颜色特征、纹理特征、空间关系特征这三个纬度分别建立的特征值索引表进行说明。

表1是表示颜色特征的索引表。

表1

颜色特征一阶矩二阶矩三阶矩浏览器1A1A2A3浏览器2B1B2B3……X1X2X3浏览器NN1N2N3

A1、A2、A3表示一张图片在浏览器1上显示的特征值，B1、B2、B3表示一张图片在浏览器2上显示的特征值，N1、 N2 、N3表示一张图片在浏览器N上显示的特征值。

如下述这样比较浏览器1~N的颜色特征的数值：

比较一阶矩的特征值：对A1、 B1、 X1…N1进行比较；

比较二阶矩的特征值：对A2 、B2、 X2 …N2进行比较；

比较三阶矩的特征值：对A3 、B3、 X3…N3进行比较。

 

表2是表示纹理特征的索引表。在表2中作为纹理特征仅仅示例性地表示了纹理粗细度、方向性，还可以包含其余特征，在此不一一列举。

 

表2

纹理特征纹理粗细度方向性其余特征浏览器1Aa1Aa2…..浏览器2Bb1Bb2…..……Xx1Xx2…..浏览器NNn1Nn2……

如下述这样比较浏览器1~N的纹理特征的数值：

比较纹理粗细度的特征值：对Aa1 、Bb1、 Xx1、 Nn1进行比较了；

比较方向性的特征值：对Aa2、 Bb2、 Xx2、 Nn2进行比较。

表3是表示空间关系特征的索引表。在表3中作为空间关系特征仅仅示例性地表示了连接关系、邻接关系、交叠关系、包含关系、包容关系，还可以包含其余特征，在此不一一列举。

表3

空间关系特征连接关系邻接关系交叠关系重叠关系包含关系包容关系其余关系浏览器1Aaa1Aaa2Aaa3Aaa4Aaa5Aaa6….浏览器2Bbb1Bbb2Bbb3Bbb4Bbb5Bbb6………Xxx1Xxx2Xxx3Xxx4Xxx5Bbb6…浏览器NNnn1Nnn2Nnn3Nnn4Nnn5Nnn6…

如下述这样比较浏览器1~N的空间关系特征的数值：

对于连接关系的特征值：对Aaa1 、Bbb1、 Xxx1 、Nnn1进行比较；

对于邻近关系的特征值：对Aaa2、 Bbb2 、Xxx2、 Nnn2进行比较；

……

对于包容关系的特征值：对Aaa6、 Bbb6 、Xxx6 、Nnn6进行比较。

根据上述的表1～表3中的三个维度的特征值处理可以得到一张软件交互界面的主要显示要素。得到特征信息后，对每张图片的特征值进行汇总，并按照软件系统界面设计的所有交互图片建立一张图片编码索引表。

图3是表示本发明的浏览器兼容性测试分析方法中基于图片编码索引表进行比对的流程图。

在图片编码索引表中，包含的各交互界面以编号i表示，j表示所有存在的交互界面数量。指定一款支持的主流浏览器为比对基准，将所有交互界面在不同浏览器上的显示结果进行批量比对分析。具体比对过程如图3所示。

其中，图3中的“读取比对配置文件进行索引位图匹配”的具体过程如下所述进行。

假设对于颜色特征中的一阶矩进行比较。在比对配置文件中对一阶矩设置了一个浮动接受区间，例如，在比对配置文件中预先设置了一阶矩数值浮动为10，即表示如果数值差为10以内的话该图片在两个浏览器之间的一阶矩相等：

如在表1中，A1=100 B1=110，则经比较后认为A1=B1；

如在表1中，A1= 80 B1=120，则经比较后认为A1不等于B1。

另外，在比对过程中可根据测试要求，对系统显示界面不是十分敏感的信息进行相似匹配，即在比对过程中摒弃该段位图中个别信息的匹配。

例如，某张图片的连接关系，测试过程中列为非重要信息，可以不进行表3中的Aaa1、Bbb1、 Xxx1、 Nnn1的比较，即摒弃该段位图中个别信息的匹配。

以上，对于本发明的浏览器兼容性测试分析方法进行了说明。下面对于本发明的浏览器兼容性测试分析系统进行简单说明。

本发明的浏览器兼容性测试分析系包括：显示方式相同的不同的浏览器，用于显示待测试的软件系统的交互界面并且对每个交互界面的显示保存截图；图片编码索引表建立模块，对保存的截图进行图片预处理以提取多纬度的特征值，根据提取的多维度的特征值，对每张截图建立图片编码索引表；图片比对模块，根据所述图片编码索引表对各交互界面在不同浏览器上的显示结果进行批量比对并生成比对结果；以及测试报告生成模块，根据比对结果生成测试报告。

其中，所述显示方式相同的不同的浏览器是指选择尺寸和分辨率相同的多个显示器并安装不同的浏览器或者在一台显示器上安装不同的浏览器，同时剔除浏览器的第三方插件。

根据本发明的浏览器兼容性测试分析方法及浏览器兼容性测试分析系统，能够对待测软件系统在不同浏览器上的显示结果进行批量自动分析比对，并能够通过配置文件灵活控制比对的信息位图摒弃不敏感的比对信息，比对完成后将比对结果自动生成测试报告。因此，利用本发明，能够提高浏览器兼容性测试的效率和准确性。

以上例子主要说明了本发明的浏览器兼容性测试分析方法及浏览器兼容性测试分析系统。尽管只对其中一些本发明的具体实施方式进行了描述，但是本领域普通技术人员应当了解，本发明可以在不偏离其主旨与范围内以许多其他的形式实施。因此，所展示的例子与实施方式被视为示意性的而非限制性的，在不脱离如所附各权利要求所定义的本发明精神及范围的情况下，本发明可能涵盖各种的修改与替换。