CN103136094A - 一种页面测试方法及装置 - Google Patents

Abstract

本申请公开了一种页面测试方法及装置，在设定的多种类型的浏览器中加载同一测试页面，得到对应的显示页面；分别对显示页面进行区块对比测试和/或布局对比测试；输出在各种类型的浏览器中显示页面的区块对比测试和/或布局对比测试的结果。使用本申请实施例提供的方法能够实现在多种类型的浏览器中自动测试同一测试页面，相比于现有的手动测试，由于使用自动化测试，避免了大量的手工测试工作，并且由于在测试时能够并行地对各种类型的浏览器中的显示页面进行测试，有效地提高了页面测试的效率；并且由于使用自动化测试，避免了人为因素遗漏测试项的可能性，提高了测试结果的可靠性。

Description

一种页面测试方法及装置

技术领域

本申请涉及信息发布领域，尤其涉及一种页面测试方法及装置。

背景技术

目前，市面上存在着Windows、Mac以及Linux等操作系统，并且每个操作系统还包括有不同的版本。针对每种操作系统都有对应的浏览器，例如：IE6/7/8、Firefox，Chrome、Safari等。在不同的浏览器下同一页面展现的效果往往不尽相同，在不同操作系统和浏览器的组合下，页面可能会出现样式上错乱等问题。

为了避免上述问题，通常在页面发布上线之前，会将页面运行在不同浏览器环境下进行兼容性测试。目前，一般通过手工测试完成对页面在不同浏览器下的测试，但手工测试由于工作量大、人为因素遗漏测试项等原因，导致测试效率低、测试质量不高等问题。因此，迫切需要一种在不同浏览器下自动测试页面样式的方法，以提高页面测试的效率和测试结果的可靠性。

发明内容

本申请实施例提供了一种页面测试方法及装置，用以提高页面测试的可靠性和质量。

本申请实施例提供的一种页面测试方法，包括：

在设定的多种类型的浏览器中加载同一测试页面，得到对应的显示页面；

分别对所述显示页面进行区块对比测试和/或布局对比测试；

输出在各种类型的浏览器中所述显示页面的区块对比测试和/或布局对比测试的结果。

本申请实施例提供的一种页面测试装置，包括：加载模块、测试模块和输出模块；其中，

所述加载模块，用于在设定的多种类型的浏览器中加载同一测试页面，得到对应的显示页面；

所述测试模块具体包括：区块对比测试模块和/或布局对比测试模块；

所述区块对比测试模块，用于在各种类型的浏览器中分别对所述显示页面进行区块对比测试；

所述布局对比测试模块，用于在各种类型的浏览器中分别对所述显示页面进行布局对比测试；

所述输出模块，用于输出在各种类型的浏览器中所述显示页面的区块对比测试和/或布局对比测试的结果。

本申请实施例的有益效果包括：

本申请实施例提供的一种页面测试方法及装置，在设定的多种类型的浏览器中加载同一测试页面，得到对应的显示页面；分别对显示页面进行区块对比测试和/或布局对比测试；输出在各种类型的浏览器中显示页面的区块对比测试和/或布局对比测试的结果。使用本申请实施例提供的方法能够实现在多种类型的浏览器中自动测试同一测试页面，相比于现有的手动测试，由于使用自动化测试，避免了大量的手工测试工作，并且由于在测试时能够并行地对各种类型的浏览器中的显示页面进行测试，有效地提高了页面测试的效率；并且由于使用自动化测试，避免了人为因素遗漏测试项的可能性，提高了测试结果的可靠性。

附图说明

图1为本申请实施例提供的页面测试方法的流程图；

图2为本申请实施例提供的对显示页面进行区块对比测试的流程图；

图3为本申请实施例提供的对显示页面进行截图的流程图；

图4为本申请实施例提供的对显示页面进行布局对比测试的流程图；

图5为本申请实施例提供的对显示图片进行抹黑操作的具体示意图；

图6为本申请实施例提供的页面测试装置的结构示意图。

具体实施方式

下面结合附图，对本申请实施例提供的页面测试方法及装置的具体实施方式进行详细地说明。

本申请实施例提供的一种页面测试方法，如图1所示，具体包括以下步骤：

S101、在设定的多种类型的浏览器中加载同一测试页面，得到对应的显示页面；

S102、分别对该显示页面进行区块对比测试和/或布局对比测试；

S103、输出在各种类型的浏览器中显示页面的区块对比测试和/或布局对比测试的结果。

其中，在具体实现本申请实施例提供的上述方法对测试页面进行自动化测试时，可以仅对浏览器中的显示页面进行区块对比测试，也可以仅对浏览器中的显示页面进行布局对比测试，还可以对显示页面既进行区块对比测试又进行布局对比测试，且同时进行区块对比测试和布局测试时，两个测试过程在时间上无先后顺序，可根据测试需要决定，在此不作限定。

相对于现有的手动测试，使用本申请实施例提供的上述方法能够实现在多种类型的浏览器中自动测试同一测试页面，由于使用自动化测试，避免了大量的手工测试工作，并且由于在测试时能够并行地对各种类型的浏览器中的显示页面进行测试，有效地提高了页面测试的效率；并且由于使用自动化测试，避免了人为因素遗漏测试项的可能性，提高了测试结果的可靠性。

下面对上述各步骤的具体实现方式进行详细的说明。

具体地，本申请实施例提供的上述方法中步骤S102中对显示页面进行区块对比测试，如图2所示，针对每种类型浏览器中的显示页面都可以通过以下步骤实现：

S201、按照预设的截图范围对显示页面进行截图，得到截图图片；

S202、根据浏览器的类型，确定与截图图片对应的基准截图图片；

较佳地，在确定与截图图片对应的基准截图图片之前，还可以先判断是否存在与截图图片对应的基准截图图片，若否，直接保存截图图片作为标准截图图片，以便下次进行测试时使用。

S203、根据预设的图片对比算法，将截图图片与其对应的基准截图图片进行比较，得到区块对比成功或区块对比失败的结果。

具体地，上述步骤S201按照预设的截图范围对显示页面进行截图，得到截图图片，如图3所示，可以通过以下步骤实现：

S2011、判断截图范围中的截图高度是否大于浏览器显示窗口的高度；若是，执行步骤S2012，若否，执行步骤S2014；

S2012、按照截图范围，在浏览器显示窗口中滚动显示页面，并在各屏中对显示页面分别进行截图，得到截图图片的各个部分；

S2013、合并截图图片的各个部分得到截图图片；

S2014、在浏览器显示窗口中，按照截图范围对显示页面进行截图，得到截图图片。

其中，使用上述步骤S2011～S2014对在不同种浏览器中的显示页面进行截图，可以通过Ruby语言中相关功能实现，也可以使用其他本领域常用的编程语言中的相关功能实现，在此不作限定。

具体地，上述步骤S203根据预设的图片对比算法，可以将截图图片的像素点与基准截图图片的像素点进行比较，例如，在截图图片采用红(r)、绿(g)、蓝(b)的颜色空间的情况下，可以通过下述流程实现：

通过下述公式计算截图图片中的像素点与基准截图图片中的像素点的累积方差值：

∑(P1.r_i-P2.r_i)²+(P1.g_i-P2.g_i)²+(P1.b_i-P2.b_i)²；

上式中，P1.r_i、P1.g_i和P1.b_i分别为截图图片中的第i个像素点的红、绿、蓝值；P2.r_i、P2.g_i和P2.b_i分别为基准截图图片中的第i个像素点的红、绿、蓝值；

判断累积方差值是否小于预设的第一误差数值乘以截图图片中像素点总个数，若是，得到区块对比成功的结果；若否，得到区块对比失败的结果。

以上是以r、g、b的颜色空间为例进行说明的，本申请实施例并不限定截图图片的像素的颜色空间，本领域的普通技术人员，可以在上述计算公式的基础上，很容易地推知在截图图片的像素采用其他颜色空间下的具体对比方法。

较佳地，第一误差数值可以设定为1200，当然，具体数据还可依据具体的显示效果需要根据经验值进行调整。

上述图片对比算法只是举例说明如何判断截图图片和基准截图图片是否相符，本领域技术人员也可以通过其他现有算法实现图片对比的功能，在此不做限定。

较佳地，在上述步骤S203中，得到区块对比失败的结果后，还可以保存并上传截图图片至区块对比结果中，方便测试人员查看。

具体地，本申请实施例提供的上述方法中步骤S102中对显示页面进行布局对比测试，如图4所示，可以通过以下步骤实现：

S401、对每种类型浏览器中的显示页面转换成显示图片；

具体地，实现显示页面转换成显示图片的具体过程，可以按照布局对比的需要，通过将显示页面直接整体转成显示图片的方式实现，也可以仅转换显示页面的部分以生成显示图片，例如，使用上述区块对比测试中的分屏截图后合并得到显示图片的方式实现，还可以通过本领域其他公知技术手段实现，在此不作限定。

S402、对显示图片执行抹黑操作，得到抹黑后的显示图片，该抹黑操作为将显示图片的布局中每个块设置为设定的颜色；

在具体实施时，抹黑操作可以设置显示图片的布局中各块的颜色均相同；或，

设置显示图片的布局中各块的颜色均不相同；或，

设置显示图片的布局中各块的颜色部分相同。

较佳地，在设置显示图片的布局中各块的颜色部分相同时，可以按照从左至右，从上至下的顺序，循环使用设定的颜色序列设置布局中的各块的颜色，该颜色序列中至少包含两个不同颜色。

例如，如图5所示，使用红、黄、绿三个颜色按照从左至右，从上至下的顺序，循环设置显示图片布局中的各块的颜色，这样的设置使得显示图片的布局中的各块便于辨别。

S403、根据浏览器的类型，确定与抹黑后的显示图片对应的基准布局图片；

其中，基准布局图片中各块的颜色的设置应该和该抹黑后的显示图片中各块的颜色的设置相同，以保证后续能够正常得到布局对比的结果。

较佳地，在确定与抹黑后的显示图片对应的基准布局图片之前，还可以先判断是否存在与抹黑后的显示图片对应的标准布局图片，若否，直接保存抹黑后的显示图片作为标准布局图片，以便下次进行测试时使用。

S404、根据预设的图片对比算法，将抹黑后的显示图片与标准布局图片进行比较，得到布局对比成功或布局对比失败的结果。

较佳地，上述步骤S404可以将截图图片的像素点与基准截图图片的像素点进行比较来实现图片对比。例如，在截图图片采用r、g、b的颜色空间的情况下，可以通过下述过程实现：

通过下述公式计算抹黑后的显示图片中的像素点与标准布局图片中的像素点的累积方差值：

∑(P1.r_i-P2.r_i)²+(P1.g_i-P2.g_i)²+(P1.b_i-P2.b_i)²；

上式中，P1.r_i、P1.g_i和P1.b_i分别为抹黑后的显示图片中的第i个像素点的红、绿、蓝值；P2.r_i、P2.g_i和P2.b_i分别为标准布局图片中的第i个像素点的红、绿、蓝值；

判断累积方差值是否小于预设的第二误差数值乘以抹黑后的显示图片中像素点总个数，若是，得到布局对比成功的结果；若否，得到布局对比失败的结果。

与前述步骤S203类似，以上是以r、g、b的颜色空间为例进行的说明，本申请实施例并不限定截图图片的像素的颜色空间，本领域的普通技术人员，可以在上述计算公式的基础上，很容易地推知在截图图片的像素采用其他颜色空间下的具体对比方法。

较佳地，第二误差数值可以设定为1200，当然，具体数据还可依据具体的显示效果需要根据经验值进行调整。

上述图片对比算法只是举例说明如何判断抹黑后的显示图片和基准布局图片是否相符，本领域技术人员也可以通过其他现有算法实现图片对比的功能，在此不做限定。

较佳地，在步骤S404中，得到布局对比失败的结果后，还可以保存并上传抹黑后的显示图片至布局测试结果中，方便测试人员查看。

具体地，本申请实施例提供的上述方法的步骤S103中，输出在各种类型的浏览器中显示页面的区块对比测试和/或局部对比测试的结果，可以分别针对每种类型浏览器中显示页面的区块对比和/或局部对比测试输出测试报告的方式实现，还可以通过其他已知的现有技术输出测试结果，在此不作限定。

本申请实施例提供的上述方法，在具体实施时，可以通过运行不同浏览器的测试集的方式来实现，其过程如下：

首先，根据本申请实施例提供的页面测试方法中的步骤S101～S102，对各种类型的浏览器中的显示页面编写测试脚本；

然后，建立在不同种浏览器下运行的测试集，该测试集包括：所需调用的上述测试脚本的名称、指定运行此测试脚本浏览器的标识(其中，在具体实施时，以在一台机器上加载多种类型的浏览器，也可以在多台机器上加载不同种类的浏览器，直接指定运行各个测试脚本的机器的标识即可，在此不作限定)、测试脚本运行的时间、以及测试脚本运行结果的报告接收人等；

最后，运行测试集，输出测试报告给测试集中指定的报告接收人。

基于同一发明构思，本申请实施例还提供了一种页面测试装置，由于该装置解决问题的原理与前述一种页面测试方法相似，因此该装置的实施可以参见方法的实施，重复之处不再赘述。

本申请实施例提供的一种页面测试装置，如图6所示，包括：加载模块601、测试模块602和输出模块603；其中，

加载模块601，用于在设定的多种类型的浏览器中加载同一测试页面，得到对应的显示页面；

测试模块602具体包括：区块对比测试模块6021和/或布局对比测试模块6022；

区块对比测试模块6021，用于在各种类型的浏览器中分别对显示页面进行区块对比测试；

布局对比测试模块6022，用于在各种类型的浏览器中分别对显示页面进行布局对比测试；

输出模块603，用于输出在各种类型的浏览器中显示页面的区块对比测试和/或布局对比测试的结果。

较佳地，本申请实施例提供的上述装置中的区块对比测试模块6021，如图6所示，具体包括：

截图子模块60211，用于针对每种类型浏览器中的显示页面，按照预设的截图范围进行截图，得到截图图片；

基准截图图片确定子模块60212，用于根据浏览器的类型，确定与截图图片对应的基准截图图片；

图片对比子模块60213，用于根据预设的图片对比算法，将截图图片与其对应的基准截图图片进行比较，得到区块对比成功或区块对比失败的结果。

进一步地，上述截图子模块60211，具体用于判断截图范围中的截图高度是否大于浏览器显示窗口的高度；若是，按照截图范围，在浏览器显示窗口中滚动显示页面，并在各屏中对显示页面分别进行截图，得到截图图片的各个部分，合并各个部分得到截图图片；若否，在浏览器显示窗口中，按照截图范围对显示页面进行截图，得到截图图片。

进一步地，上述图片对比子模块60213，具体用于通过下述公式计算截图图片中的像素点与基准截图图片中的像素点的累积方差值：

∑(P1.r_i-P2.r_i)²+(P1.g_i-P2.g_i)²+(P1.b_i-P2.b_i)²；上式中，P1.r_i、P1.g_i和P1.b_i分别为截图图片中的第i个像素点的红、绿、蓝值；P2.r_i、P2.g_i和P2.b_i分别为基准截图图片中的第i个像素点的红、绿、蓝值；判断累积方差值是否小于预设的第一误差数值乘以截图图片中像素点总个数，若是，得到区块对比成功的结果；若否，得到区块对比失败的结果。

进一步地，上述基准截图图片确定子模块60212，还用于在确定与截图图片对应的基准截图图片之前，判断是否存在与截图图片对应的基准截图图片，如果不存在，保存截图图片为基准截图图片。

较佳地，本申请实施例提供的上述装置中的布局对比测试模块6022，如图6所示，具体包括：

转换子模块60221，用于对每种类型浏览器中的显示页面转换成显示图片；

抹黑操作子模块60222，用于对显示图片执行抹黑操作，得到抹黑后的显示图片，该抹黑操作为将显示图片的布局中每个块设置为设定的颜色；

基准布局图片确定子模块60223，用于根据浏览器的类型，确定与抹黑后的显示图片对应的基准布局图片；

布局对比子模块60224，用于根据预设的图片对比算法，将抹黑后的显示图片与标准布局图片进行比较，得到布局对比成功或布局对比失败的结果。

进一步地，上述抹黑操作子模块60222，具体用于设置显示图片的布局中各块的颜色均相同；或，设置显示图片的布局中各块的颜色均不相同；或，设置显示图片的布局中各块的颜色部分相同。

进一步地，上述抹黑操作子模块60222，具体用于按照从左至右，从上至下的顺序，循环使用设定的颜色序列设置布局中的各块的颜色，该颜色序列中至少包含两个不同颜色。

进一步地，上述布局对比子模块60224，具体用于通过下述公式计算抹黑后的显示图片中的像素点与标准布局图片中的像素点的累积方差值：

∑(P1.r_i-P2.r_i)²+(P1.g_i-P2.g_i)²+(P1.b_i-P2.b_i)²；上式中，P1.r_i、P1.g_i和P1.b_i分别为抹黑后的显示图片中的第i个像素点的红、绿、蓝值；P2.r_i、P2.g_i和P2.b_i分别为标准布局图片中的第i个像素点的红、绿、蓝值；判断累积方差值是否小于预设的第二误差数值乘以抹黑后的显示图片中像素点总个数，若是，得到布局对比成功的结果；若否，得到布局对比失败的结果。

进一步地，上述基准布局图片确定子模块60223，还用于在确定与抹黑后的显示图片对应的基准布局图片之前，判断是否存在与抹黑后的显示图片对应的标准布局图片，若否，保存抹黑后的显示图片为标准布局图片。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本申请实施例可以通过硬件实现，也可以借助软件加必要的通用硬件平台的方式来实现。基于这样的理解，本申请实施例的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述的方法。

本领域技术人员可以理解附图只是一个优选实施例的示意图，附图中的模块或流程并不一定是实施本申请所必须的。

本领域技术人员可以理解实施例中的装置中的模块可以按照实施例描述进行分布于实施例的装置中，也可以进行相应变化位于不同于本实施例的一个或多个装置中。上述实施例的模块可以合并为一个模块，也可以进一步拆分成多个子模块。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

本申请实施例提供的一种页面测试方法及装置，在设定的多种类型的浏览器中加载同一测试页面，得到对应的显示页面；分别对显示页面进行区块对比测试和/或布局对比测试；输出在各种类型的浏览器中显示页面的区块对比测试和/或布局对比测试的结果。使用本申请实施例提供的方法能够实现在多种类型的浏览器中自动测试同一测试页面，相比于现有的手动测试，由于使用自动化测试，避免了大量的手工测试工作，并且由于在测试时能够并行地对各种类型的浏览器中的显示页面进行测试，有效地提高了页面测试的效率；并且由于使用自动化测试，避免了人为因素遗漏测试项的可能性，提高了测试结果的可靠性。

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (10)

1.一种页面测试方法，其特征在于，包括：

在设定的多种类型的浏览器中加载同一测试页面，得到对应的显示页面；

分别对所述显示页面进行区块对比测试和/或布局对比测试；

输出在各种类型的浏览器中所述显示页面的区块对比测试和/或布局对比测试的结果。

2.如权利要求1所述的方法，其特征在于，分别对所述显示页面进行区块对比测试，具体包括：

针对每种类型浏览器中的所述显示页面，按照预设的截图范围进行截图，得到截图图片；

根据浏览器的类型，确定与所述截图图片对应的基准截图图片；

根据预设的图片对比算法，将所述截图图片与其对应的基准截图图片进行比较，得到区块对比成功或区块对比失败的结果。

3.如权利要求2所述的方法，其特征在于，所述按照预设的截图范围进行截图，得到截图图片，具体包括：

判断所述截图范围中的截图高度是否大于所述浏览器显示窗口的高度；

若是，按照所述截图范围，在所述浏览器显示窗口中滚动所述显示页面，并在各屏中对所述显示页面分别进行截图，得到所述截图图片的各个部分，合并所述各个部分得到所述截图图片；

若否，在所述浏览器显示窗口中，按照截图范围对所述显示页面进行截图，得到所述截图图片。

4.如权利要求2所述的方法，其特征在于，根据预设的图片对比算法，将所述截图图片与其对应的基准截图图片进行比较，得到区块对比成功或区块对比失败的结果，具体包括：

通过下述公式计算所述截图图片中的像素点与所述基准截图图片中的像素点的累积方差值：

∑(P1.r_i-P2.r_i)²+(P1.g_i-P2.g_i)²+(P1.b_i-P2.b_i)²；

上式中，P1.r_i、P1.g_i和P1.b_i分别为所述截图图片中的第i个像素点的红、绿、蓝值；P2.r_i、P2.g_i和P2.b_i分别为所述基准截图图片中的第i个像素点的红、绿、蓝值；

判断所述累积方差值是否小于预设的第一误差数值乘以所述截图图片中像素点总个数，若是，得到区块对比成功的结果；若否，得到区块对比失败的结果。

5.如权利要求2-4任一项所述的方法，其特征在于，在确定与所述截图图片对应的基准截图图片之前，还包括：

判断是否存在与所述截图图片对应的基准截图图片，如果不存在，保存所述截图图片为基准截图图片。

6.如权利要求1所述的方法，其特征在于，分别对所述显示页面进行布局对比测试，具体包括：

对每种类型浏览器中的显示页面转换成显示图片；

对所述显示图片执行抹黑操作，得到抹黑后的显示图片，所述抹黑操作为将所述显示图片的布局中每个块设置为设定的颜色；

根据浏览器的类型，确定与所述抹黑后的显示图片对应的基准布局图片；

根据预设的图片对比算法，将所述抹黑后的显示图片与所述标准布局图片进行比较，得到布局对比成功或布局对比失败的结果。

7.如权利要求6所述的方法，其特征在于，所述抹黑操作为将所述显示图片的布局中每个块设置为设定的颜色，具体包括：

设置所述显示图片的布局中各块的颜色均相同；或，

设置所述显示图片的布局中各块的颜色均不相同；或，

设置所述显示图片的布局中各块的颜色部分相同。

8.如权利要求7所述的方法，其特征在于，设置所述显示图片的布局中各块的颜色部分相同，具体包括：

按照从左至右，从上至下的顺序，循环使用设定的颜色序列设置布局中的各块的颜色，所述颜色序列中至少包含两个不同颜色。

9.如权利要求6-8任一项所述的方法，其特征在于，根据预设的图片对比算法，将所述抹黑后的显示图片与所述标准布局图片进行比较，得到布局对比成功或布局对比失败的结果，具体包括：

通过下述公式计算所述抹黑后的显示图片中的像素点与所述标准布局图片中的像素点的累积方差值：

∑(P1.r_i-P2.r_i)²+(P1.g_i-P2.g_i)²+(P1.b_i-P2.b_i)²；

上式中，P1.r_i、P1.g_i和P1.b_i分别为所述抹黑后的显示图片中的第i个像素点的红、绿、蓝值；P2.r_i、P2.g_i和P2.b_i分别为所述标准布局图片中的第i个像素点的红、绿、蓝值；

判断所述累积方差值是否小于预设的第二误差数值乘以所述抹黑后的显示图片中像素点总个数，若是，得到布局对比成功的结果；若否，得到布局对比失败的结果。

10.一种页面测试装置，其特征在于，包括：加载模块、测试模块和输出模块；其中，

所述加载模块，用于在设定的多种类型的浏览器中加载同一测试页面，得到对应的显示页面；

所述测试模块包括：区块对比测试模块和/或布局对比测试模块；

所述区块对比测试模块，用于在各种类型的浏览器中分别对所述显示页面进行区块对比测试；

所述布局对比测试模块，用于在各种类型的浏览器中分别对所述显示页面进行布局对比测试；

所述输出模块，用于输出在各种类型的浏览器中所述显示页面的区块对比测试和/或布局对比测试的结果。

Images