CN103853656B - 网页测试方法和装置 - Google Patents

Abstract

本申请公开了一种网页测试方法和装置，其中，该方法包括：基于DIV标识将待测试网页在第一浏览器中显示的第一页面划分成多个第一网页块，并基于DIV标识将待测试网页在第二浏览器中显示的第二页面划分成多个第二网页块；对上述多个第一网页块执行以下操作，直到遍历每个上述第一网页块：从上述多个第一网页块中选择一个作为当前的第一网页块，获取上述多个第二网页块中与上述当前的第一网页块对应的当前的第二网页块；将上述当前的第一网页块的显示内容和上述当前的第二网页块的显示内容进行比较。本申请解决了现有技术直接进行网页的全比对而导致的难以将显示内容上的差异显示出来而导致的比对的准确性较低的技术问题，达到了提高网页测试准确性的技术效果。

Description

网页测试方法和装置

技术领域

本申请涉及互联网领域，具体而言，涉及一种网页测试方法和装置。

背景技术

目前，测试人员在进行涉及web(网页)项目测试时，需要对同一个网页在不同浏览器中的显示效果或者显示内容进行比对，以确定同一个网页在不同浏览器中显示的内容是否相同。为了保证项目的质量，在测试的时候测试内容需要覆盖该待测试网页在所有浏览器中显示的内容，然而在网页测试时候会出现较多的重复工作，例如，该待测试网页在不同的浏览器上的测试点是相同的，然而需要重复执行多次同样的测试内容。为了减少测试的工作量从而提高测试效率，现有的方式一般是将待测试的网页在不同浏览器或者不同环境下的显示内容的图片截取保存起来，然后进行全比对，即，从第一个像素点开始进行一一比对。

然而，不同浏览器在页面渲染上存在差异，同时不同浏览器对网页的缩放程度有时也是不同的。如果待比较的两个浏览器中对网页的缩放比例不同，这样就会导致网页显示的时候网页上的控件在一个浏览器上的显示效果相对于另外一个浏览器上的显示效果会出现整体的偏移。如果通过上述方式对这样的网页显示内容进行比对的话，因为是一个像素点一个像素点的比对就会导致比对结果显示两个网页有很多地方是不同的，主要原因就是对于这种整体偏移而导致的差异也认为是两个浏览器显示了不同的内容，然而对于真正的内容上的不同却不能有效地显示出来，从而导致对网页进行测试的准确性较低。

发明内容

本申请提供了一种网页测试方法和装置，以至少解决现有技术中直接进行网页的全比对而导致的难以将显示内容上的差异显示出来而导致的比对的准确性较低的技术问题。

根据本申请的一个方面，提供了一种网页测试方法，包括：基于DIV标识将待测试网页在第一浏览器中显示的第一页面划分成多个第一网页块，并基于DIV标识将上述待测试网页在第二浏览器中显示的第二页面划分成多个第二网页块；对上述多个第一网页块执行以下操作，直到遍历每个上述第一网页块：从上述多个第一网页块中选择一个作为当前的第一网页块，获取上述多个第二网页块中与上述当前的第一网页块对应的当前的第二网页块；将上述当前的第一网页块的显示内容和上述当前的第二网页块的显示内容进行比较。

优选地，获取上述第一页面在上述第一浏览器中完整加载之后的页面源代码；获取上述页面源代码中的DOM节点，其中，上述DOM节点中的每一个DOM节点对应一块网页显示内容；对上述的DOM节点执行以下操作直至遍历完上述DOM节点：判断当前的DOM节点的父节点所对应的网页显示内容是否已经被视为上述第一网页块、且上述当前的DOM节点的子节点中是否均为具有DIV标识的DOM节点；如果上述当前的DOM节点的父节点所对应的网页显示内容未被视为上述第一网页块、且上述当前的DOM节点的子节点中不是均为具有DIV标识的DOM节点，则将上述当前的DOM节点对应的网页显示内容作为上述第一网页块。

优选地，上述将上述当前的DOM节点对应的网页显示内容作为上述第一网页块的步骤包括：将对上述当前的DOM节点进行解码后得到的网页显示内容作为上述第一网页块。

优选地，基于DIV标识将待测试网页在第二浏览器中显示的第二页面划分成多个第二网页块的步骤包括：获取上述第一页面在上述第二浏览器中完整加载之后的页面源代码；获取上述页面源代码中的DOM节点，其中，上述DOM节点中的每一个DOM节点对应一块网页显示内容；对上述DOM节点执行以下操作直至遍历完上述DOM节点：判断当前的DOM节点的父节点所对应的网页显示内容是否已经被视为一个上述第二网页块、且上述当前的DOM节点的子节点中是否均为具有DIV标识的DOM节点；如果上述当前的DOM节点的父节点所对应的网页显示内容未被视为上述第二网页块、且上述当前的DOM节点的子节点中不是均为具有DIV标识的DOM节点，则将上述当前的DOM节点对应的网页显示内容作为上述第二网页块。

优选地，上述将上述当前的DOM节点对应的网页显示内容作为上述第二网页块的步骤包括：将对上述当前的DOM节点进行解码后得到的网页显示内容作为上述第二网页块。

优选地，将上述当前的第一网页块的显示内容和上述当前的第二网页块的显示内容进行比较的步骤包括：确定上述当前的第一网页块与上述第二网页块之间的位置信息之间的差别是否小于预定的位置阈值；如果是，则将上述当前的第一网页块的显示内容和上述当前的第二网页块的显示内容进行比较，否则，直接返回上述显示内容不同标识。

优选地，上述当前的第一网页块与上述当前的第二网页块对应相同的路径标识。

优选地，在将上述当前的第一网页块的显示内容和上述当前的第二网页块的显示内容进行比较之后，上述方法还包括：如果显示内容不同，则返回显示内容不同标识，其中，上述显示内容不同标识用于指示上述当前的第一网页块与上述当前的第二网页块的显示内容是不相同的。

根据本申请的另一个方面，提供了一种网页测试装置，包括：划分单元，用于基于DIV标识将待测试网页在第一浏览器中显示的第一页面划分成多个第一网页块，并基于DIV标识将上述待测试网页在第二浏览器中显示的第二页面划分成多个第二网页块；获取单元，用于对上述多个第一网页块执行以下操作，直到遍历每个上述第一网页块：从上述多个第一网页块中选择一个作为当前的第一网页块，获取上述多个第二网页块中与上述当前的第一网页块对应的当前的第二网页块；

比对单元，用于将上述当前的第一网页块的显示内容和上述当前的第二网页块的显示内容进行比较。

优选地，上述划分单元包括：第一获取模块，用于获取上述第一页面在上述第一浏览器中完整加载之后的页面源代码；第二获取模块，用于获取上述页面源代码中的DOM节点，其中，上述DOM节点中的每一个DOM节点对应一块网页显示内容；第一划分模块，用于对DOM节点执行以下操作直至遍历完上述的DOM节点：判断当前的DOM节点的父节点所对应的网页显示内容是否已经被视为上述第一网页块、且上述当前的DOM节点的子节点中是否均为具有DIV标识的DOM节点；如果上述当前的DOM节点的父节点所对应的网页显示内容未被视为上述第一网页块、且上述当前的DOM节点的子节点中不是均为具有DIV标识的DOM节点，则将上述当前的DOM节点对应的网页显示内容作为上述第一网页块。

优选地，上述划分单元包括：第三获取模块，用于获取上述第一页面在上述第二浏览器中完整加载之后的页面源代码；第四获取模块，用于获取上述页面源代码中的DOM节点，其中，上述DOM节点中的每一个DOM节点对应一块网页显示内容；第二划分模块，用于对DOM节点执行以下操作直至遍历完所有的DOM节点：判断当前的DOM节点的父节点所对应的网页显示内容是否已经被视为一个上述第二网页块、且上述当前的DOM节点的子节点中是否均为具有DIV标识的DOM节点；如果上述当前的DOM节点的父节点所对应的网页显示内容未被视为上述第二网页块、且上述当前的DOM节点的子节点中不是均为具有DIV标识的DOM节点，则将上述当前的DOM节点对应的网页显示内容作为上述第二网页块。

优选地，上述装置还包括：显示单元，用于在确定出上述显示内容不同的情况下，返回显示内容不同标识，其中，上述显示内容不同标识用于指示上述当前的第一网页块与上述当前的第二网页块的显示内容是不相同的。

在本申请中，基于DIV标识将待测试网页在不同浏览器中的显示内容切分为多个网页块，然后基于切分后的网页块进行比对，以确定该待测试网页在两个浏览器中显示的内容是否相同。因为DIV是一个层的概念，在组织网页时候就定义了在每个层中所放置的控件的位置，这样基于DIV划分后的网页块之间就已经有了一个相对位置的概念，在比对的时候就按照划分的网页块进行比对即可，从而解决了现有技术中直接进行网页的全比对而导致的难以将显示内容上的差异显示出来而导致的比对的准确性较低的技术问题，达到了提高网页测试准确性的技术效果。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例的网页测试系统的一种优选结构框图；

图2是根据本申请实施例的网页测试装置的一种优选结构框图；

图3是根据本申请实施例的网页测试装置的另一种优选结构框图；

图4是根据本申请实施例的网页测试装置的又一种优选结构框图；

图5是根据本申请实施例的进行网页测试后得到的网页测试结果的一种优选示意图；

图6是根据本申请实施例的进行网页测试后得到的网页测试结果的另一种优选示意图；

图7是根据本申请实施例的网页测试方法的一种优选流程图；

图8是根据本申请实施例的网页测试方法的另一种优选流程图。

具体实施方式

下文中将参考附图并结合实施例来详细说明本申请。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

在描述本申请的各实施例的进一步细节之前，将参考图1来描述可用于实现本申请的原理的一个合适的计算体系结构。在以下描述中，除非另外指明，否则将参考由一个或多个计算机执行的动作和操作的符号表示来描述本申请的各实施例。由此，可以理解，有时被称为计算机执行的这类动作和操作包括计算机的处理单元对以结构化形式表示数据的电信号的操纵。这一操纵转换了数据或在计算机的存储器系统中的位置上维护它，这以本领域的技术人员都理解的方式重配置或改变了计算机的操作。维护数据的数据结构是具有数据的格式所定义的特定属性的存储器的物理位置。然而，尽管在上述上下文中描述本申请，但它并不意味着限制性的，如本领域的技术人员所理解的，后文所描述的动作和操作的各方面也可用硬件来实现。

转向附图，其中相同的参考标号指代相同的元素，本申请的原理被示为在一个合适的计算环境中实现。以下描述基于所述的本申请的实施例，并且不应认为是关于此处未明确描述的替换实施例而限制本申请。

图1示出了可用于这些设备的一个示例计算机体系结构的示意图。出于描述的目的，所绘的体系结构仅为合适环境的一个示例，并非对本申请的使用范围或功能提出任何局限。也不应将该计算系统解释为对图1所示的任一组件或其组合具有任何依赖或需求。

本申请的原理可以使用其它通用或专用计算或通信环境或配置来操作。适用于本申请的众所周知的计算系统、环境和配置的示例包括但不限于，个人计算机、服务器，多处理器系统、基于微处理的系统、小型机、大型计算机、以及包括任一上述系统或设备的分布式计算环境。

在其最基本的配置中，图1中的网页测试系统100至少包括：多个浏览器的服务器102以及一个或多个终端104。服务器102可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置、用于存储数据的存储装置以及与客户端通信的传输装置；终端104可以包括：微处理器MCU、与服务器通信的传输装置、与用户交互的显示装置。在本说明书和权利要求书中，“系统”也可以被定义为能够执行软件、固件或微码来实现功能的任何硬件组件或硬件组件的组合网页测试系统100甚至可以是分布式的，以实现分布式功能。

如本申请所使用的，术语“模块”、“组件”或“单元”可以指在配置信息的更新系统100上执行的软件对象或例程。此处所描述的不同组件、模块、单元、引擎和服务可被实现为在网页测试系统100上执行（例如，作为单独的线程）的对象或进程。尽管此处所描述的系统和方法较佳地以软件来实现，但是硬件或软件和硬件的组合的实现也是可能并被构想的。

实施例1

图2是根据本申请实施例网页测试装置的一种优选的结构示意图，优选的，本实施例中的网页测试装置200位于图1的网页测试系统的终端104上。

优选的，如图2所示的网页测试装置可以包括划分单元202和处理单元204，下面对这两个单元进行具体描述：

划分单元202，用于基于DIV标识将待测试网页在第一浏览器中显示的第一页面划分成多个第一网页块，并基于DIV标识将所述待测试网页在第二浏览器中显示的第二页面划分成多个第二网页块；

考虑到相关技术中，在对网页进行显示效果的测试和比对时，一般是直接将该网页在两个浏览器中显示的画面一个像素点一个像素点地进行整体的比对。这样就容易出现由于位置上的差异而导致的相同的显示效果却会被测试为不同的情况出现。为了解决上述问题，在测试某个特定的网页在第一浏览器和第二浏览器中的显示是否相同时，可以基于网页的DIV标识将待测试的网页进行分块处理，然后按照所分的块进行一一比较，以确定每一块的显示效果或者是内容是否相同。

优选的，在基于DIV标识进行页面分块时，首先需要获取待测试网页在不同浏览器中的页面源代码，因不同的浏览器中对页面进行解析的方式存在差异，因此其对应的页面源代码也是不同的，正是由于这种不同才导致有时候同一个网页在不同的浏览器会显示出不同的内容。在获取页面源代码后就可以对页面进行DIV切分，为了可以使得切分后的网页块可以包含待测试网页的需要显示的所有内容，可以按照以下规则进行切分，当页面源代码中当前待判断的DOM节点满足以下两个条件就可以将该DOM节点对应的代码作为一个网页块：

1）当前待判断的DOM节点的父节点对应的代码进行解码后得到的网页显示内容未被视为第一网页块。

2）当前的DOM节点的所有直接子节点中不是均为具有DIV标识的DOM节点。

优选的，在判断页面源代码中的各个节点是否是DIV节点的时候，可以按照tagname（标签名）来确定某个节点的类型，从而确定当前的节点是否是DIV节点。

例如，某个待测试网页对应的页面源代码中有如下的一段代码：

如果按照上述的分块规则进行划分的话，因为<div id="J_Page">的直接子节点仅有<divid="site-nav">，其中，<div id="site-nav">是div节点，因此不满足成块规则继续判断；<divid="site-nav">的直接子节点仅有：<div id="site-nav-bd">，而<div id="site-nav-bd">也是div节点，也不满足成块规则继续判断；<div id="site-nav-bd">的直接子节点有：<pclass="sitenav-mobile">、<p class="login-info">和<ul class="quick-menu">，由此可知，<divid="site-nav-bd">的直接子节点中存在非div节点，因此<div id="site-nav-bd">满足成块的规则，可以将<div id="site-nav-bd">分为一个网页块。

这个时候就可以将<div id="site-nav-bd">所对应的网页显示内容作为一个网页块。通过这种划分原则可以保证划分后得到的网页块可以尽量包括待测试网页显示的内容，而不会遗漏非div节点所对应的显示内容。进一步的，对于某个节点而言，如果其对应的所有直接子节点全部为div节点，就需要将该div节点进行继续再分，直至确定其子节点对应的直接子节点中存在非div节点为止，通过这种方式可以将页面尽可能地分为小的网页块，从而提高测试的准确性。当然待测试页面在第一浏览器和第二浏览器中都应遵循相同的拆分原则进行拆分，这样才能保证后续得到的网页块是相同的，以便进行一一比对。

在一个优选实施方式中，如图3所示，划分单元202包括：第一获取模块302，用于获取第一页面在第一浏览器中的页面源代码；第二获取模块304，与第一获取模块302耦合，用于获取页面源代码中的所有DOM节点，其中，DOM节点中的每一个DOM节点对应一块网页显示内容；第一划分模块306，与第二获取模块304耦合，用于对所有DOM节点中的DOM节点执行以下操作直至遍历完所有的DOM节点：判断当前的DOM节点的父节点所对应的网页显示内容是否已经被视为第一网页块、且当前的DOM节点的所有子节点中是否均为具有DIV标识的DOM节点；如果当前的DOM节点的父节点所对应的网页显示内容未被视为第一网页块、且当前的DOM节点的所有子节点中不是均为具有DIV标识的DOM节点，则将当前的DOM节点对应的网页显示内容作为第一网页块。

在一个优选实施方式中，如图4所示，上述划分单元202还可以包括：第三获取模块402，用于获取所述第一页面在所述第二浏览器中的页面源代码；第四获取模块404，与第三获取模块402耦合，用于获取所述页面源代码中的所有DOM节点，其中，所述DOM节点中的每一个DOM节点对应一块网页显示内容；第二划分模块406，与第四获取模块404耦合，用于对所有DOM节点中的DOM节点执行以下操作直至遍历完所有的DOM节点：判断当前的DOM节点的父节点所对应的网页显示内容是否已经被视为一个所述第二网页块、且所述当前的DOM节点的所有子节点中是否均为具有DIV标识的DOM节点；如果所述当前的DOM节点的父节点所对应的网页显示内容未被视为所述第二网页块、且所述当前的DOM节点的所有子节点中不是均为具有DIV标识的DOM节点，则将所述当前的DOM节点对应的网页显示内容作为所述第二网页块。

处理单元204，与划分单元202耦合，用于对上述多个第一网页块执行以下操作，直到遍历每个上述第一网页块：从上述多个第一网页块中选择一个作为当前的第一网页块，获取上述多个第二网页块中与上述当前的第一网页块对应的当前的第二网页块；将上述当前的第一网页块的显示内容和上述当前的第二网页块的显示内容进行比较。优选地，上述的第一网页块与第二网页块对应可以是当前的第一网页块与当前的第二网页块对应于相同的路径标识。

优选地，上述装置还可以包括返回单元，用于在确定出上述显示内容不同的情况下，返回显示内容不同标识，其中，上述显示内容不同标识用于指示上述当前的第一网页块与上述当前的第二网页块的显示内容是不相同的。

即，在完成待测试网页在第一浏览器和第二浏览器中的拆分操作后，就可以进行网页块之间的比对。因为是基于DIV进行分块的，可以先根据div标识对两个待比较的网页块进行位置比较，如果两个网页块对应的位置之间的差别在预定的位置阈值以内，则可以继续比较这两个网页块的显示内容，以确定两者之间的显示效果是否相同；如果两者之间的位置之间的差别大于预定阈值，则可以直接显示两者是不同的。

优选地，对于上述的路径标识，可以是该网页块对应的DIV标识，值得注意是，div标识仅是作为底层的标识，当在同一个网页中对应着两个或两个以上相同的div标识时，在将div标识作为路径标识进行返回时，需要同时返回该标识所对应的上层节点的标识，以对div标识进行区分，也可以进一步返回该div标识所对应的table或者是URL之间的层级关系。

在一个优选实施方式中，将当前的DOM节点对应的网页显示内容作为第一网页块就是将与当前的DOM节点对应的<DIV>与</DIV>之间的代码所对应的网页显示内容作为第一网页块，将当前的DOM节点对应的网页显示内容作为第二网页块就是将与当前的DOM节点对应的<Div>与</DIV>之间的代码所对应的网页显示内容作为第二网页块。

为了使得测试者可以知道显示内容不同的地方所对应的div标识，在一个优选实施方式中也可以将与当前的第一网页块对应的DIV标识和与当前的第二网页块对应的DIV标识作为网页测试结果进行返回。

举例而言，如图5和图6所示，在两个浏览器中打开同一个网页的显示效果示意图。

其中，图5是该待测试网页在第一浏览器中的显示内容，其对应的在第一浏览器中的页面源代码为：

图6是该待测试网页在第二浏览器中的显示内容，其对应的在第二浏览器中的页面源代码为：

由图5和图6显示的内容可以发现，在第一个浏览器中显示的订单号是：20771909，在第二浏览器中显示的订单号是：20771069。因此，可以判断两者是不同的，这个时候就可以将这两个部分标识出来，优选的，可以如图5和6所示也显示该部分对应的div标识。

然而，如果通过相关技术中的网页比对方式进行比对的话，仅仅会指出显示内容是不同的，并不能定位出具体是代码中的哪部分代码导致的不同，也就不能指出显示内容不同的地方的在页面上的对应的位置和路径标识。

在上述优选实施方式中，基于DIV标识将待测试网页在不同浏览器中的显示内容切分为多个网页块，然后基于切分后的网页块进行比对，以确定该待测试网页在两个浏览器中显示的内容是否相同。因为DIV是一个层的概念，在组织网页时候就定义了在每个层中所放置的控件的位置，这样基于DIV划分后的网页块之间就已经有了一个相对位置的概念，在比对的时候就按照划分的网页块进行比对即可，从而解决了现有技术中直接进行网页的全比对而导致的难以将显示内容上的差异显示出来而导致的比对的准确性较低的技术问题，达到了提高网页测试准确性的技术效果。

实施例2

在图2-图4所示的装置的基础上，本申请提供了一种优选的网页测试方法。如图7所示，该方法可以包括如下步骤（步骤S702至步骤S704）：

步骤S702：基于DIV标识将待测试网页在第一浏览器中显示的第一页面划分成多个第一网页块，并基于DIV标识将所述待测试网页在第二浏览器中显示的第二页面划分成多个第二网页块；

考虑到相关技术中，在对网页进行显示效果的测试和比对时，一般是直接将该网页在两个浏览器中显示的画面一个像素点一个像素点地进行整体的比对。这样就容易出现由于位置上的差异而导致的相同的显示效果却会被测试为不同的情况出现。为了解决上述问题，在测试某个特定的网页在第一浏览器和第二浏览器中的显示是否相同时，可以基于网页的DIV标识将待测试的网页进行分块处理，然后按照所分的块进行一一比较，以确定每一块的显示效果或者是内容是否相同。

优选的，在基于DIV标识进行页面分块时，首先需要获取待测试网页在不同浏览器中的页面源代码，其中，不同的浏览器中对页面进行解析的方式存在差异，这种差异可能使得其对应的页面源代码也是不同的，正是由于这种不同才导致有时候同一个网页在不同的浏览器会显示出不同的内容。在获取页面源代码后就可以对页面进行DIV切分，为了可以使得切分后的网页块可以包含待测试网页的需要显示的所有内容，可以按照以下规则进行切分，当页面源代码中当前待判断的DOM节点满足以下两个条件就可以将该DOM节点对应的代码作为一个网页块：

1）当前待判断的DOM节点的父节点对应的代码进行解码后得到的网页显示内容未被视为第一网页块。

2）当前的DOM节点的所有直接子节点中不是均为具有DIV标识的DOM节点。

优选的，在判断页面源代码中的各个节点是否是DIV节点的时候，可以按照tagname来确定某个节点的类型，从而确定当前的节点是否是DIV节点。

例如，某个待测试网页对应的页面源代码中有如下的一段代码：

如果按照上述的分块规则进行划分的话，因为<div id="J_Page">的直接子节点仅有<divid="site-nav">，其中，<div id="site-nav">是div节点，因此不满足成块规则继续判断；<divid="site-nav">的直接子节点仅有：<div id="site-nav-bd">，而<div id="site-nav-bd">也是div节点，也不满足成块规则继续判断；<div id="site-nav-bd">的直接子节点有：<pclass="sitenav-mobile">、<p class="login-info">和<ul class="quick-menu">，由此可知，<divid="site-nav-bd">的直接子节点中存在非div节点，因此<div id="site-nav-bd">满足成块的规则，可以将<div id="site-nav-bd">分为一个网页块。

这个时候就可以将<div id="site-nav-bd">所对应的网页显示内容作为一个网页块。通过这种划分原则可以保证划分后得到的网页块可以包括待测试网页显示的所有内容，而不会遗漏非div节点所对应的显示内容。进一步的，对于某个节点而言，如果其对应的所有直接子节点全部为div节点，就需要将该div节点进行继续再分，直至确定其子节点对应的直接子节点中存在非div为止，通过这种方式可以将页面尽可能地分为小的网页块，从而提高测试的准确性。当然待测试页面在第一浏览器和第二浏览器中都应遵循相同的拆分原则进行拆分，这样才能保证后续得到的网页块是相同的，以便进行一一比对。

在一个优选实施方式中，可以按照如下方式对待测试网页在第一浏览器中的第一页面进行分块，包括如下步骤：

S1：获取第一页面在第一浏览器中的页面源代码，即，正是由于解析的方式不同就可能导致同样的一个网页在不同的浏览器中显示了不同的内容。

S2：获取页面源代码中所有的DOM节点，其中，DOM节点中的每一个DOM节点对应一块网页显示内容；网页代码中的每段代码都是一个DOM节点，如果需要对网页进行比较，也就需要获取待测试网页的所有的DOM节点，这样才能实现待测试网页的一个完整的测试过程。

S3：对所有DOM节点中的DOM节点执行以下操作直至遍历完所有的DOM节点：

S4：判断当前的DOM节点的父节点所对应的网页显示内容是否被视为第一网页块、且当前的DOM节点的所有子节点中是否均为具有DIV标识的DOM节点；

S5：如果当前的DOM节点的父节点所对应的网页显示内容未被视为第一网页块、且当前的DOM节点的所有子节点中不是均为具有DIV标识的DOM节点，则将当前的DOM节点对应的网页显示内容作为第一网页块。

在一个优选实施方式中，可以按照如下方式对待测试网页在第二浏览器中的第二页面进行分块，包括如下步骤：

S1：获取第一页面在第二浏览器中的页面源代码；

S2：获取页面源代码中的所有DOM节点，其中，DOM节点中的每一个DOM节点对应一块网页显示内容；

S3：对所有DOM节点中的DOM节点执行以下操作直至遍历完所有的DOM节点：

1）判断当前的DOM节点的父节点所对应的网页显示内容是否被视为第二网页块、且当前的DOM节点的所有子节点中是否均为具有DIV标识的DOM节点；

2）如果当前的DOM节点的父节点所对应的网页显示内容未被视为第二网页块、且当前的DOM节点的所有子节点中不是均为具有DIV标识的DOM节点，则将当前的DOM节点对应的网页显示内容作为第二网页块。

步骤S704：对多个第一网页块执行以下操作，直到遍历每个第一网页块：从多个第一网页块中选择一个作为当前的第一网页块，获取多个第二网页块中与当前的第一网页块对应的当前的第二网页块将当前的第一网页块的显示内容和当前的第二网页块的显示内容进行比较。其中，上述的第一网页块与第二网页块对应可以是当前的第一网页块与当前的第二网页块对应于相同的路径标识。

优选地，在上述步骤S706之后，还可以包括：如果显示内容不同，则返回显示内容不同标识，其中，所述显示内容不同标识用于指示所述当前的第一网页块与所述当前的第二网页块的显示内容是不相同的。

在一个优选实施方式中，将所述当前的第一网页块的显示内容和所述当前的第二网页块的显示内容进行比较的步骤包括：确定所述当前的第一网页块与所述第二网页块之间的位置信息之间的差别是否小于预定的位置阈值；如果是，则将所述当前的第一网页块的显示内容和所述当前的第二网页块的显示内容进行比较，否则，直接返回所述显示内容不同标识。

即，在完成待测试网页在第一浏览器和第二浏览器中的拆分操作后，就可以进行网页块之间的比对。因为是基于DIV进行分块的，可以先根据div标识对两个待比较的网页块进行位置比较，如果两个网页块对应的位置之间的差别在预定的位置阈值以内，则可以继续比较这两个网页块的显示内容，以确定两者之间的显示效果是否相同；如果两者之间的位置之间的差别大于预定阈值，则可以直接显示两者是不同的。

优选地，对于上述的路径标识，可以是该网页块对应的DIV标识，值得注意是，div标识仅是作为底层的标识，当在同一个网页中对应着两个或两个以上相同的div标识时，在将div标识作为路径标识进行返回时，需要同时返回该标识所对应的上层节点的标识，以对div标识进行区分，也可以进一步返回该div标识所对应的table或者是URL之间的层级关系。

在一个优选实施方式中，将当前的DOM节点对应的网页显示内容作为第一网页块就是将与当前的DOM节点对应的<DIV>与</DIV>之间的代码所对应的网页显示内容作为第一网页块，将当前的DOM节点对应的网页显示内容作为第二网页块就是将与当前的DOM节点对应的<Div>与</DIV>之间的代码所对应的网页显示内容作为第二网页块。

为了使得测试者可以知道显示内容不同的地方所对应的div标识，在一个优选实施方式中也可以将与当前的第一网页块对应的DIV标识和与当前的第二网页块对应的DIV标识作为网页测试结果进行返回。

举例而言，如图5和图6所示，在两个浏览器中打开同一个网页的显示效果示意图。

其中，图5是该待测试网页在第一浏览器中的显示内容，其对应的在第一浏览器中的页面源代码为：

图6是该待测试网页在第二浏览器中的显示内容，其对应的在第二浏览器中的页面源代码为：

由图5和图6显示的内容可以发现，在第一个浏览器中显示的订单号是：20771909，在第二浏览器中显示的订单号是：20771069。因此，可以判断两者是不同的，这个时候就可以将这两个部分标识出来，优选的，可以如图5和6所示也显示该部分对应的div标识。

然而，如果通过相关技术中的网页比对方式进行比对的话，仅仅会指出显示内容是不同的，并不能定位出具体是代码中的哪部分代码导致的不同，也就不能指出显示内容不同的地方的在页面上的对应的位置和路径标识。

在上述优选实施方式中，基于DIV标识将待测试网页在不同浏览器中的显示内容切分为多个网页块，然后基于切分后的网页块进行比对，以确定该待测试网页在两个浏览器中显示的内容是否相同。因为DIV是一个层的概念，在组织网页时候就定义了在每个层中所放置的控件的位置，这样基于div划分后的网页块之间就已经有了一个相对位置的概念，在比对的时候就按照划分的网页块进行比对即可，从而解决了现有技术中直接进行网页的全比对而导致的难以将显示内容上的差异显示出来而导致的比对的准确性较低的技术问题，达到了提高网页测试准确性的技术效果。

本优选实施例还提供了一种优选的网页显示内容的比对方法，如图8所示，包括以下步骤：

步骤S802：由用户指定待访问的URL，即确定待测试的网页地址以及确定待测试的浏览器类型。

步骤S804：使用selenium在指定的浏览器的打开上述的URL，即，在对网页进行测试的时候，可以通过selenium在指定的浏览器的打开待测试的网页，其中，selenium是一种程序测试工具。

步骤S806：使用selenium执行页面切块的js程序，优选的，在执行js程序时方式就是获取该网页在浏览器中的页面源代码，然后对页面源代码中的每个DOM节点进行解析，以确定每个DOM节点是否满足预定的规则，首先该节点需要是div节点，其次该div需要满足的规则有两个：

1）该div节点的所有可见的直接子节点中存在非div节点；

2）该div节点的直接父节点为不满足切块的规则，即，父节点为非块节点。

步骤S808：读取切块后返回的结果，即读取在待测试网页在大于或等于两个浏览器中的切块结果，然后基于切分完的网页块进行页面的比对，以确定同一网页在不同浏览器中显示的内容是否相同。

在本优选实施方式中，对待测试网页在不同浏览器中的页面源代码中的所有DOM节点进行解析，以判断当前的节点是否满足预定的分块规则，将满足分块规则的节点所对应的网页显示内容作为一个网页块，从而将整个待测试网页切分为多个满足一定规则的网页块。因为分成了多个网页块，自然也就确定了各个网页块所对应的：路径信息、位置坐标以及该网页块的范围等。在完成切块操作之后，就按照一一对应的关系进行显示内容比对即可，由于比对的是网页块的相对位置以及该位置对应的显示内容，这样就可以有效地避免因为不同浏览器的渲染差异而导致的控件偏移等问题，同时又可以将差异块显性地标示出来。

值得注意的是，上述是以DIV作为切分网页的方式，然而本申请不限于此，还可以采用其它方式进行切分，例如，可以遍历待测试网页中的所有元素，将相邻之间没有间隙的控件进行空间合并，然后将没有间隙的网页内容作为一个网页块。或者还可以采用其他的拆分方式，例如采用section、header以及footer等；

显然，本领域的技术人员应该明白，上述的本申请的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请不限制于任何特定的硬件和软件结合。

以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (12)

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

基于DIV标识将待测试网页在第一浏览器中显示的第一页面划分成多个第一网页块，并基于DIV标识将所述待测试网页在第二浏览器中显示的第二页面划分成多个第二网页块；

对所述多个第一网页块执行以下操作，直到遍历每个所述第一网页块：从所述多个第一网页块中选择一个作为当前的第一网页块，获取所述多个第二网页块中与所述当前的第一网页块对应的当前的第二网页块；将所述当前的第一网页块的显示内容和所述当前的第二网页块的显示内容进行比较。

2.根据权利要求1所述的方法，其特征在于，基于DIV标识将待测试网页在第一浏览器中显示的第一页面划分成多个第一网页块的步骤包括：

获取所述第一页面在所述第一浏览器中完整加载之后的页面源代码；

获取所述页面源代码中的DOM节点，其中，所述DOM节点中的每一个DOM节点对应一块网页显示内容；

对所述DOM节点执行以下操作直至遍历完所述DOM节点：

判断当前的DOM节点的父节点所对应的网页显示内容是否已经被视为所述第一网页块，并且判断所述当前的DOM节点的子节点中是否均为具有DIV标识的DOM节点；

如果所述当前的DOM节点的父节点所对应的网页显示内容未被视为所述第一网页块、且所述当前的DOM节点的子节点中不是均为具有DIV标识的DOM节点，则将所述当前的DOM节点对应的网页显示内容作为所述第一网页块。

3.根据权利要求2所述的方法，其特征在于，所述将所述当前的DOM节点对应的网页显示内容作为所述第一网页块的步骤包括：

将对所述当前的DOM节点进行解码后得到的网页显示内容作为所述第一网页块。

4.根据权利要求1所述的方法，其特征在于，基于DIV标识将待测试网页在第二浏览器中显示的第二页面划分成多个第二网页块的步骤包括：

获取所述第一页面在所述第二浏览器中完整加载之后的页面源代码；

获取所述页面源代码中的DOM节点，其中，所述DOM节点中的每一个DOM节点对应一块网页显示内容；

对所述DOM节点执行以下操作直至遍历完所述DOM节点：

判断当前的DOM节点的父节点所对应的网页显示内容是否已经被视为一个所述第二网页块，并且判断所述当前的DOM节点的子节点中是否均为具有DIV标识的DOM节点；

如果所述当前的DOM节点的父节点所对应的网页显示内容未被视为一个所述第二网页块、且所述当前的DOM节点的子节点中不是均为具有DIV标识的DOM节点，则将所述当前的DOM节点对应的网页显示内容作为所述第二网页块。

5.根据权利要求4所述的方法，其特征在于，所述将所述当前的DOM节点对应的网页显示内容作为所述第二网页块的步骤包括：

将对所述当前的DOM节点进行解码后得到的网页显示内容作为所述第二网页块。

6.根据权利要求1至5中任一项所述的方法，其特征在于，将所述当前的第一网页块的显示内容和所述当前的第二网页块的显示内容进行比较的步骤包括：

确定所述当前的第一网页块与所述第二网页块之间的位置信息之间的差别是否小于预定的位置阈值；

如果是，则将所述当前的第一网页块的显示内容和所述当前的第二网页块的显示内容进行比较，否则，直接返回所述显示内容不同标识。

7.根据权利要求1至5中任一项所述的方法，其特征在于，所述当前的第一网页块与所述当前的第二网页块对应相同的路径标识。

8.根据权利要求1至5中任一项所述的方法，其特征在于，在将所述当前的第一网页块的显示内容和所述当前的第二网页块的显示内容进行比较之后，所述方法还包括：

如果显示内容不同，则返回显示内容不同标识，其中，所述显示内容不同标识用于指示所述当前的第一网页块与所述当前的第二网页块的显示内容是不相同的。

9.一种网页测试装置，其特征在于，包括：

划分单元，用于基于DIV标识将待测试网页在第一浏览器中显示的第一页面划分成多个第一网页块，并基于DIV标识将所述待测试网页在第二浏览器中显示的第二页面划分成多个第二网页块；

处理单元，用于对所述多个第一网页块执行以下操作，直到遍历每个所述第一网页块：从所述多个第一网页块中选择一个作为当前的第一网页块，获取所述多个第二网页块中与所述当前的第一网页块对应的当前的第二网页块；将所述当前的第一网页块的显示内容和所述当前的第二网页块的显示内容进行比较。

10.根据权利要求9所述的装置，其特征在于，所述划分单元包括：

第一获取模块，用于获取所述第一页面在所述第一浏览器中完整加载之后的页面源代码；

第二获取模块，用于获取所述页面源代码中的DOM节点，其中，所述DOM节点中的每一个DOM节点对应一块网页显示内容；

第一划分模块，用于对所述DOM节点执行以下操作直至遍历完所述DOM节点：判断当前的DOM节点的父节点所对应的网页显示内容是否已经被视为所述第一网页块，并且判断所述当前的DOM节点的子节点中是否均为具有DIV标识的DOM节点；如果所述当前的DOM节点的父节点所对应的网页显示内容未被视为所述第一网页块、且所述当前的DOM节点的子节点中不是均为具有DIV标识的DOM节点，则将所述当前的DOM节点对应的网页显示内容作为所述第一网页块。

11.根据权利要求9所述的装置，其特征在于，所述划分单元包括：

第三获取模块，用于获取所述第一页面在所述第二浏览器中完整加载之后的页面源代码；

第四获取模块，用于获取所述页面源代码中的DOM节点，其中，所述DOM节点中的每一个DOM节点对应一块网页显示内容；

第二划分模块，用于对所述DOM节点执行以下操作直至遍历完所述DOM节点：判断当前的DOM节点的父节点所对应的网页显示内容是否已经被视为一个所述第二网页块，并且判断所述当前的DOM节点的子节点中是否均为具有DIV标识的DOM节点；如果所述当前的DOM节点的父节点所对应的网页显示内容未被视为一个所述第二网页块、且所述当前的DOM节点的子节点中不是均为具有DIV标识的DOM节点，则将所述当前的DOM节点对应的网页显示内容作为所述第二网页块。

12.根据权利要求9至11中任一项所述的装置，其特征在于，还包括：

返回单元，用于在确定出所述显示内容不同的情况下，返回显示内容不同标识，其中，所述显示内容不同标识用于指示所述当前的第一网页块与所述当前的第二网页块的显示内容是不相同的。