网页兼容性自动化测试方法、装置、设备及介质与流程

本发明涉及软件应用系统的前端开发的自动化测试技术领域，尤其涉及一种网页兼容性自动化测试方法、装置、设备及介质

背景技术：

当前的应用系统以b/s(browser/server，浏览/服务器)架构为主。用户通过浏览器浏览服务器的上信息，浏览器从服务器上下载html(hypertextmarkuplanguage，超文本标记语言)、脚本、flash(动画)、图片等信息，并按照一定标准对服务器上的代码在用户浏览器上进行解析和渲染，以组装成可供用户浏览的界面。

安装在用户操作系统中的浏览器类型有很多选择，用户可以自行选择安装浏览器产品以及版本。目前主要的浏览器内核主要4种，主要为：trident内核代表产品internetexplorer，又称其为ie内核，trident(又称为mshtml)，是微软开发的一种排版引擎；gecko内核代表作品mozillafirefoxgecko是一套开放源代码的、以c++编写的网页排版引擎；webkit内核代表作品safari、chromewebkit是一个开源项目，它的特点在于源码结构清晰、渲染速度极快，缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示；presto内核代表作品operapresto是由operasoftware开发的浏览器排版引擎，供opera7.0及以上使用，它取代了旧版opera4至6版本使用的elektra排版引擎，包括加入动态功能，例如网页或其部分可随着dom(documentobjectmodel，文档对象模型)及script(脚本)语法的事件而重新排版。

不仅存在多种浏览器，即使是同一个产品，也会有多个版本，版本之间差别还很大。比如目前用户使用最多的ie浏览器，主用版本就从ie6到ie11，共6个版本，特别是ie8版本以后，对浏览器的渲染程序进行了重大的改变，支持了w3c标准，而ie8以下版本是不支持w3c标准。因此一个应用系统在不同的浏览器产品或不同版本的产品上可能显示不完整，布局不合理，功能无法使用。

综上所述，要解决网页浏览器的兼容性问题，保证用户在各种浏览器，各种版本上均能够正常使用应用服务，除了依赖的开发者对各浏览器渲染的熟悉程度，需要将在网页在各种浏览器，各种版本中进行全面测试，这无疑是一项非常复杂耗时的工作。

技术实现要素：

本发明实施例提供了网页兼容性自动化测试方法、装置、设备及介质。能够高效、高质量地进行网页兼容性的自动化测试，提高测试效率。

第一方面，本发明实施例提供了一种网页兼容性自动化测试方法，方法包括：配置步骤，配置测试网页兼容性的测试配置信息；网页拆解步骤，基于所述测试配置信息对待测试网页的网页元素以及网页模块层级进行拆解来构成多个测试单元；渲染步骤，基于所述测试配置信息设置的浏览器来对各个所述测试单元进行渲染，并将渲染结果截图保存；兼容性判断步骤，基于多张所述截图来自动地判断所述测试单元的兼容性，并针对不兼容的所述测试单元生成错误记录；以及错误定位步骤，基于所述错误记录获取判断为不兼容的所述测试单元的代码，向用户输出包含测试结果和错误代码的测试结果报告。

第二方面，本发明实施例提供了一种网页兼容性自动化测试装置，装置包括：配置模块，配置测试网页兼容性的测试配置信息；网页拆解模块，基于所述测试配置信息对待测试网页的网页元素以及网页模块层级进行拆解来构成多个测试单元；渲染模块，基于所述测试配置信息设置的浏览器来对各个所述测试单元进行渲染，并将渲染结果截图保存；兼容性判断模块，基于多张所述截图来自动地判断所述测试单元的兼容性，并针对不兼容的所述测试单元生成错误记录；以及错误定位模块，基于所述错误记录获取判断为不兼容的所述测试单元的代码，向用户输出包含测试结果和错误代码的测试结果报告。

本发明实施例提供了一种网页兼容性自动化测试设备，包括：至少一个处理器、至少一个存储器以及存储在存储器中的计算机程序指令，当计算机程序指令被处理器执行时实现如上述实施方式中第一方面的方法。

第四方面，本发明实施例提供了一种计算机可读存储介质，其上存储有计算机程序指令，当计算机程序指令被处理器执行时实现如上述实施方式中第一方面的方法。

本发明实施例提供的网页兼容性自动化测试方法、装置、设备及介质，提高网页兼容性的测试的效率以及修正的效率。

附图说明

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

图1示出了本发明实施例的网页兼容性自动化测试方法的流程图；

图2示出了本发明实施例的网页兼容性自动化测试装置的框图；

图3示出了本发明实施例的网页兼容性自动化测试装置的一例的工作流图；

图4是示出了本发明实施例提供的网页兼容自动化测试设备的硬件结构示意图。

具体实施方式

下面将详细描述本发明的各个方面的特征和示例性实施例，为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细描述。应理解，此处所描述的具体实施例仅被配置为解释本发明，并不被配置为限定本发明。对于本领域技术人员来说，本发明可以在不需要这些具体细节中的一些细节的情况下实施。下面对实施例的描述仅仅是为了通过示出本发明的示例来提供对本发明更好的理解。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本发明的发明人发现，在网页兼容性测试中，由于网页的兼容性较为复杂，一般出现兼容性问题的原因主要包含以下几点：各浏览器对网页的设计语言解释不一致，导致显现出来的显示界面不一致；开发人员没有考虑到各浏览器之间的差别，也有可能是由于开发人员经验不足，没有针对每种浏览器的特殊属性进行差别性处理；页面语法有错误。一些浏览器的容差性较好，可以忽略掉这些错误，而一些浏览器的容差性不好，不能较好处理错误而导致应用异常。

目前进行兼容性测试的主要测试方法有两种。

一种测试方式是人工测试。对于一些中小型应用系统，主要采用人工测试的方法。人工在多浏览器中同时打开相同的网页，观察对比页面显示的差异，例如布局是否错乱、代码是否有错误等。另一种测试方式是图像比较技术，在多个浏览器上打开相同网页，对整个网页进行截图，然后通过图像比较技术，比较各个图像的差别，从而粗略的计算图像的差别的概率，然后得出兼容性的结果。

但是，本发明的发明人还发现：在采用人工测试的测试方式时，需要测试的浏览器上逐一打开测试网页，通过人工比对各个网页的兼容性情况，工作量大、效率低。同时如果出现不兼容的问题，也无法判断具体兼容性问题出在哪个模块，哪个层级，只能由开发人员逐一检查修改，修正效率低。而在采用图像比较技术的测试方式时，只能对整个网页进行截取，将截取后的整个网页的图形与基准图像进行比较。一般网页上的元素、模块、层次比较多，对整个网页的图形进行比较，准确率不高，容易出现误报，同时兼容性出现问题的时候，也无法知道是哪个具体模块出现问题，无法定位问题。

本发明的发明人为了解决上述问题，弥补上述缺陷，提出一种网页兼容性自动化测试的方法和装置，该装置作为一个独立的软件或模块而独立运行，只需要输入需要测试的网页地址，即可以对网页的各个元素、各个内置行、网页中的div(划分)、组合div、整体进行测试，同时对于出现兼容性问题的具体位置进行定位，能够较大提高测试与问题定位的效率和准确性。

下面，结合图1来详细说明本发明实施例涉及的网页兼容自动化测试方法。图1示出了本发明实施例的网页兼容性自动化测试方法的流程图。网页兼容性自动化测试方法包含配置步骤s1、网页拆解步骤s2、渲染步骤s3、兼容性判断步骤s4以及错误定位步骤s5。在从外部接收到需要测试的网页网址时，开始执行网页兼容性自动化测试方法的各个步骤。下面对各个步骤进行详细说明。

步骤s1，配置步骤，配置测试网页兼容性的测试配置信息。

测试配置信息还可以指示需要在哪些浏览器、哪些版本上进行兼容性测试。

另外，测试配置信息还可以指示基准浏览器和版本，以在后续测试的时候用于基准进行比较。

另外，测试配置信息还可以指示对于网页元素是否比较的配置，如是否对网页中的图片进行测试、是否对字体大小进行测试、是否对字体类型进行测试、是否对背景颜色进行测试等，不同的配置，测试的效率不同。这里，网页元素是指组成网页内容的基本元素，例如文字、图片、表格、flash、按钮等。

测试配置信息还可以指示兼容性测试的容错阈值，如网页模块或层级位移在超过多少时报错、元素在哪个差错级别报错等，这样可以在进行网页兼容性测试的时候，使网页兼容性在一定错误范围内可以接受。

这里，网页模块和层级例如是div(块级元素)、span(内联元素)、body(内容元素)，模块或层级可理解为一种容器，用于在容器内放置网页元素，并控制该容器元素的布局、显示效果等。如容器文字居中展示，图片大小等。模块或层级可以内嵌和组合，如模块中可以嵌套模块或层级，一个模块也可以由多个模块或层级组合而成。

步骤s2：网页拆解步骤，基于所述测试配置信息对待测试网页的网页元素以及网页模块层级进行拆解来构成多个测试单元。

首先获取在步骤s1中设置的测试配置信息，测试配置信息指示了对哪些部分进行兼容性测试，针对需要进行兼容性测试的部分进行拆解，形成各个测试单元。

网页拆解步骤包括元素拆解步骤以及网页模块层级拆解步骤。

元素拆解步骤根据测试配置信息所指示的测试内容对需要进行测试的网页元素进行拆解，拆解成独立的元素。每一个元素均构成一个测试单元。

另外，在网页模块层级拆解步骤中对网页模块和层级进行拆解。

可选地，在所述网页模块层级中采用内嵌方式时，在所述网页拆解步骤中进行递归拆解，所述递归拆解方式为：将最内层的模块拆解来形成测试单元，并逐层向外扩展叠加模块，每一次叠加形成一个测试单元。例如在一个模块或层级内嵌模块或层级，从上层(外模块)到下层(内模块)依次表示为：3层、2层、1层，则拆解和叠加后形成的测试单元分别为1层、1+2层、1+2+3层。

另外，可选地，在网页模块采用组合方式时，在所述网页拆解步骤中进行平行拆解，所述平行拆解为：将组合的模块分别拆解为独立的测试单元，并逐层向外扩展来叠加模块，每一次叠加形成一个测试单元。例如一个模块(2层)下有两个平行的模块(1层、1层)组合而成，为2层、1层、1层，则拆解和叠加后形成的测试单元为1层、1层、1+1+2层。

另外，可选地，针对上述拆解出来的所述测试单元追加原网页的页面描述语言来形成功能完整的子网页来进行测试。例如对于拆解出来的测试单元均增加原网页的css(cascadingstylesheets，层叠样式表)、javascript(一种直译式脚本语言)等网页描述语言组成一个独立的功能完整的子网页，也就是一个完整的测试单元。

步骤s3：渲染步骤，基于所述测试配置信息设置的浏览器来对各个所述测试单元进行渲染，并将渲染结果截图保存。

在进行网页测试时，需要在多个浏览器中进行测试。根据测试配置信息，确定进行测试的浏览器以及版本等，将测试单元在测试配置信息所指定的多个浏览器中进行渲染。在每一种配置的需要的测试浏览器中，对每一个测试单元进行渲染，并对渲染结果进行截图并保存。

另外，测试配置信息指示基准浏览器和版本，基于该浏览器和版本进行渲染，作为比较的基准。

步骤s4：兼容性判断步骤，基于多张所述截图来自动地判断所述测试单元的兼容性，并针对不兼容的所述测试单元生成错误记录。

在兼容性判断步骤中，可以采用图形比较方法将各浏览器中生成的相同测试单元的截图与基准浏览器中生成的截图进行比较来判断兼容性。

可选地，兼容性判断步骤包括图形位移比较步骤以及元素比较步骤。

在图形位移比较步骤中，将网页模块或层级构成的所述测试单元的截图与在基准浏览器中生成的截图进行比较，基于比较的结果以及测试配置信息指示的位移错误允许阈值，来判断截图中图像的相对位移是否错误。这里，基准浏览器通过测试配置信息而被预先指定。例如测试配置信息中指示模块位移允许在10px像素内，该情况下对于微小的偏差就不计入测试报告的错误列表中。在模块位移大于10px像素时，形成错误记录。

通过位移图形比较步骤，能够判断模块或层级是否存在布局异常或者错位的情况。由于在测试配置信息中指示兼容性测试的位移错误允许阈值，因此在判断为错误的情况下，将测试结果记录到错误记录中。

在元素比较步骤中，对网页元素构成的测试单元的截图与在基于基准浏览器中生成的截图进行比较，基于比较的结果与测试配置信息指示的位移错误允许阈值，来判断网页元素是否被正常显示。

在元素比较步骤中，基于测试配置信息中的测试内容对每个测试单元的渲染结果与基准浏览器生成的图像进行比较，例如比较每个元素的大小、文字内容、背景颜色、图片内容等，从而来判断元素是否正常显示。

步骤s5：错误定位步骤，基于错误记录获取判断为不兼容的所述测试单元的代码，向用户输出包含测试结果和错误代码的测试结果报告。

在错误定位步骤中，根据测试的错误记录，找到原始的形成该测试单元的代码并标记。最后，根据测试结果和标识的错误代码形成测试结果报告，提供用户。

根据本发明实施例的网页兼容性自动化测试方法，对网页兼容性进行完全自动化测试，提高测试的效率。另外，可以按元素、模块、层级、整体等多个维度进行全面的测试。对于兼容性问题，可以准确的定位到是哪个元素、哪个模块或者哪个层级，供开发人员修改分析，提高修正效率。

图2示出了本发明实施例的网页兼容性自动化测试装置的框图，该网页兼容性自动化测试装置执行上述的网页兼容性自动化测试方法。图3示出了本发明实施例的网页兼容性自动化测试装置的一例的工作流图。下面结合图2和图3来进行详细说明。

网页兼容自动化测试装置1包括配置模块10、网页拆解模块11、渲染模块12、兼容性判断模块13以及错误定位模块14。

首先向网页兼容自动化测试装置1输入需要自动测试的网页地址。配置模块10配置测试网页兼容性的测试配置信息，该测试配置信息如前面在网页兼容自动化测试方法中描述那样，这里不再赘述。

网页拆解模块11从配置模块10中读取测试配置信息，基于所述测试配置信息对待测试网页的网页元素以及网页模块层级进行拆解来构成多个测试单元。测试配置信息指示了对哪些部分进行兼容性测试，针对需要进行兼容性测试的部分进行拆解，形成各个测试单元。

网页拆解模块11包括元素拆解模块以及网页模块层级拆解模块，并将拆解后的各个测试单元提交给渲染模块。

元素拆解模块根据测试配置信息所指示的测试内容对需要进行测试的网页元素进行拆解，拆解成独立的元素。每一个元素均构成一个测试单元。

另外，网页模块层级拆解模块对网页的模块和层级进行拆解。

可选地，在所述网页模块层级采用内嵌方式时，在所述网页拆解模块的网页模块层级拆解模块中进行递归拆解，所述递归拆解方式为：将最内层的模块拆解来形成测试单元，并逐层向外扩展叠加模块，每一次叠加形成一个测试单元。例如一个模块或层级内嵌模块或层级，从上层(外模块)到下层(内模块)依次表示为：3层、2层、1层，则拆解和叠加后形成的测试单元分别为1层、1+2层、1+2+3层。

另外，可选地，在网页模块采用组合方式时，在所述网页拆解模块的网页模块层级拆解模块中进行平行拆解，所述平行拆解为：将组合的模块分别拆解为独立的测试单元，并逐层向外扩展来叠加模块，每一次叠加形成一个测试单元。例如一个模块(2层)下有两个平行的模块(1层、1层)组合而成，为2层、1层、1层，则拆解和叠加后形成的测试单元为1层、1层、1+1+2层。

另外，可选地，网页拆解模块针对上述拆解出来的所述测试单元追加原网页的页面描述语言来形成功能完整的子网页来进行测试。例如对于拆解出来的测试单元均增加原网页的css(cascadingstylesheets，层叠样式表)、javascript(一种直译式脚本语言)等网页描述语言组成一个独立的功能完整的子网页，也就是一个完整的测试单元。

渲染模块12基于所述测试配置信息设置的浏览器来对各个所述测试单元进行渲染，并将渲染结果截图保存。

在进行网页测试时，需要在多个浏览器中进行测试。在网页兼容自动化测试装置1中安装有多个浏览器，渲染模块12从配置模块10获取测试配置信息，确定进行测试的浏览器以及版本等，将测试单元在测试配置信息所指定的多个浏览器中进行渲染。在每一种配置的需要的测试浏览器中，对每一个测试单元进行渲染，并对渲染结果进行截图并保存。

另外，测试配置信息指示基准浏览器和版本，基于该浏览器和版本进行渲染，作为后面比较的基准。

兼容性判断模块13基于多张所述截图来自动地判断各个测试单元的兼容性，并针对不兼容的测试单元生成错误记录。

兼容性判断模块可以采用图形比较方法将各浏览器中生成的相同测试单元的截图与基准浏览器中生成的截图进行比较来判断兼容性。

可选地，兼容性判断模块包括图形位移比较模块以及元素比较模块。

在图形位移比较模块中，将网页模块层级构成的所述测试单元的截图与在基准浏览器中生成的截图进行比较，基于所述比较的结果以及所述测试配置信息指示的位移错误允许阈值，来判断截图中图像的相对位移是否错误。这里，基准浏览器通过所述测试配置信息而被预先指定。图形位移比较模块从配置模块10读取测试配置信息。例如测试配置信息中指示模块位移允许在10px像素内，该情况下对于微小的偏差就不计入测试报告的错误列表中。在模块位移大于10px像素时，形成错误记录和定位的错误代码，并向错误定位模块16进行输出。

通过位移图形比较模块，能够判断模块或层级是否存在布局异常或者错位的情况。由于在测试配置信息中指示兼容性测试的位移错误允许阈值，因此在判断为错误的情况下，将测试结果记录到错误记录，并发送给错误定位模块14。

在元素比较模块中，对所述网页元素构成的测试单元的截图与在基于基准浏览器中生成的截图进行比较，基于比较的结果与测试配置信息指示的位移错误允许阈值来判断所述网页元素是否被正常显示。

元素比较模块从配置模块10读取测试配置信息中的元素比较配置信息，基于测试配置信息中的测试内容对每个测试单元的渲染结果与基准浏览器生成的图像进行比较，例如比较每个元素的大小、文字内容、背景颜色、图片内容等，从而来判断元素是否正常显示。

基于比较的结果与测试配置信息指示的元素错误允许阈值，来判断所述网页元素是否被正常显示。在判断为未被正常显示的情况下，记录到错误记录中，并发送给错误定位模块14。

错误定位模块14基于所述错误记录获取判断为不兼容的所述测试单元的代码，向用户输出包含测试结果和错误代码的测试结果报告。

在错误定位模块中，根据测试的错误记录，找到原始的形成该测试单元的代码并标记。最后，根据测试结果和标识的错误代码形成测试报告，并提供用户。

根据本发明实施例的网页兼容性自动化测试装置，对网页兼容性进行完全自动化测试，提高测试的效率。另外，可以按元素、模块、层级、整体等多个维度进行全面的测试。对于兼容性问题，可以准确的定位到是哪个元素、哪个模块或者哪个层级，供开发人员修改分析，提高修正效率。

另外，结合图1描述的本发明实施例的网页兼容自动化测试方法可以由网页兼容自动化测试设备来实现。图4示出了本发明实施例提供的网页兼容自动化测试设备的硬件结构示意图。

网页兼容自动化测试设备可以包括处理器401以及存储有计算机程序指令的存储器402。

具体地，上述处理器401可以包括中央处理器(cpu)，或者特定集成电路(applicationspecificintegratedcircuit，asic)，或者可以被配置成实施本发明实施例的一个或多个集成电路。

存储器402可以包括用于数据或指令的大容量存储器。举例来说而非限制，存储器402可包括硬盘驱动器(harddiskdrive，hdd)、软盘驱动器、闪存、光盘、磁光盘、磁带或通用串行总线(universalserialbus，usb)驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器402可包括可移除或不可移除(或固定)的介质。在合适的情况下，存储器402可在数据处理装置的内部或外部。在特定实施例中，存储器402是非易失性固态存储器。在特定实施例中，存储器402包括只读存储器(rom)。在合适的情况下，该rom可以是掩模编程的rom、可编程rom(prom)、可擦除prom(eprom)、电可擦除prom(eeprom)、电可改写rom(earom)或闪存或者两个或更多个以上这些的组合。

处理器401通过读取并执行存储器402中存储的计算机程序指令，以实现上述实施例中的任意一种网页兼容自动化测试方法。

在一个示例中，网页兼容自动化测试设备还可包括通信接口403和总线410。其中，如图4所示，处理器401、存储器402、通信接口403通过总线410连接并完成相互间的通信。

通信接口403，主要用于实现本发明实施例中各模块、装置、单元和/或设备之间的通信。

总线410包括硬件、软件或两者，将网页兼容自动化测试设备的部件彼此耦接在一起。举例来说而非限制，总线可包括加速图形端口(agp)或其他图形总线、增强工业标准架构(eisa)总线、前端总线(fsb)、超传输(ht)互连、工业标准架构(isa)总线、无限带宽互连、低引脚数(lpc)总线、存储器总线、微信道架构(mca)总线、外围组件互连(pci)总线、pci-express(pci-x)总线、串行高级技术附件(sata)总线、视频电子标准协会局部(vlb)总线或其他合适的总线或者两个或更多个以上这些的组合。在合适的情况下，总线410可包括一个或多个总线。尽管本发明实施例描述和示出了特定的总线，但本发明考虑任何合适的总线或互连。

另外，结合上述实施例中的网页兼容自动化测试方法，本发明实施例可提供一种计算机可读存储介质来实现。该计算机可读存储介质上存储有计算机程序指令；该计算机程序指令被处理器执行时实现上述实施例中的任意一种网页兼容自动化测试方法。

需要明确的是，本发明并不局限于上文所描述并在图中示出的特定配置和处理。为了简明起见，这里省略了对已知方法的详细描述。在上述实施例中，描述和示出了若干具体的步骤作为示例。但是，本发明的方法过程并不限于所描述和示出的具体步骤，本领域的技术人员可以在领会本发明的精神后，作出各种改变、修改和添加，或者改变步骤之间的顺序。

以上所述的结构框图中所示的功能块可以实现为硬件、软件、固件或者它们的组合。当以硬件方式实现时，其可以例如是电子电路、专用集成电路(asic)、适当的固件、插件、功能卡等等。当以软件方式实现时，本发明的元素是被用于执行所需任务的程序或者代码段。程序或者代码段可以存储在机器可读介质中，或者通过载波中携带的数据信号在传输介质或者通信链路上传送。“机器可读介质”可以包括能够存储或传输信息的任何介质。机器可读介质的例子包括电子电路、半导体存储器设备、rom、闪存、可擦除rom(erom)、软盘、cd-rom、光盘、硬盘、光纤介质、射频(rf)链路，等等。代码段可以经由诸如因特网、内联网等的计算机网络被下载。

还需要说明的是，本发明中提及的示例性实施例，基于一系列的步骤或者装置描述一些方法或系统。但是，本发明不局限于上述步骤的顺序，也就是说，可以按照实施例中提及的顺序执行步骤，也可以不同于实施例中的顺序，或者若干步骤同时执行。

以上所述，仅为本发明的具体实施方式，所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的系统、模块和单元的具5体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。应理解，本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。