CN114116440A - 一种页面显示结果测试方法、装置、存储介质及设备 - Google Patents

Abstract

本发明公开了一种页面显示结果测试方法、装置、存储介质及设备，所述方法包括获取目标页面地址；通过无界面浏览器访问所述目标页面地址，得到访问结果；在所述无界面浏览器中对访问结果进行截屏，得到截屏图片；获取所述目标页面地址对应的基准图片，所述基准图片为所述目标页面地址对应的设计页面的图片；对所述截屏图片和所述基准图片进行像素比对，得到像素比对结果；根据所述像素比对结果确定所述页面显示结果的测试结果。本发明基准图片的更新以及待测试的代码的更新不会影响测试方法的复用，从而使得页面显示结果的测试方法与页面设计解耦，并且与页面开发过程解耦，不再需要频繁修改测试脚本，显著提升了测试效果，降低测试人员的压力。

Description

一种页面显示结果测试方法、装置、存储介质及设备

技术领域

本说明书涉及页面测试领域，尤其涉及一种页面显示结果测试方法、装置、存储介质及设备。

背景技术

在互联网行业中，一个网站通常由几十乃至几百个具体的页面组成。由于需求不断更新，开发人员会频繁修改页面的结构、样式、内容等元素；而另一方面测试的自动化程度有限，通常自动化测试的侧重点更多是偏向对用户操作的测试。对页面的检测通常只有元素定位、CSS样式的属性检测，对页面的整体样式的监控不足，难以保证质量。待测试的页面的频繁更新以及测试的自动化程度不足导致了测试的人工成本过高，测试脚本的频繁修改，为测试人员带来了沉重负担，也降低了测试环节的稳定性。

进一步地，现有的自动化测试对于测试脚本的要求较高，比如，针对页面元素样式的检测，需要测试人员熟悉相关的代码，组织测试用例，才能得到相应的产出结果。每次页面更新也需要同步修改测试脚本，对于开发者和测试者而言都会增加额外的工作量。

发明内容

为了提升对于页面显示效果进行自动化测试的效率，并且提供一种能够适应多种执行环境的页面显示效果的测试方案，本说明书实施例公开一种页面显示结果测试方法、装置、存储介质及设备。

一方面，本说明书提供了一种页面显示结果测试方法，所述方法包括：

获取目标页面地址；

通过无界面浏览器访问所述目标页面地址，得到访问结果；

在所述无界面浏览器中对访问结果进行截屏，得到截屏图片；

对所述截屏图片和基准图片进行像素比对，得到像素比对结果，其中，所述基准图片为所述目标页面地址对应的设计页面所对应的图片；

根据所述像素比对结果确定所述页面显示结果的测试结果。

另一方面，本说明书提供一种页面显示结果测试装置，所述装置包括：

目标页面地址获取模块，用于获取目标页面地址；

访问结果获取模块，用于通过无界面浏览器访问所述目标页面地址，得到访问结果；

截屏模块，用于在所述无界面浏览器中对访问结果进行截屏，得到截屏图片；

像素比对模块，用于对所述截屏图片和基准图片进行像素比对，得到像素比对结果，其中，所述基准图片为所述目标页面地址对应的设计页面所对应的图片；

测试结果确定模块，用于根据所述像素比对结果确定所述页面显示结果的测试结果。

另一方面，本说明书提供了一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有至少一条指令或至少一段程序，所述至少一条指令或至少一段程序由处理器加载并执行以实现上述的一种页面显示结果测试方法。

另一方面，本说明书提供了一种页面显示结果测试设备，其特征在于，包括至少一个处理器，以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述至少一个处理器通过执行所述存储器存储的指令实现上述的一种页面显示结果测试方法。

本说明书提供了一种页面显示结果测试方法、装置、存储介质及设备。本说明书通过使用无界面浏览器对于待测试页面进行访问和截屏，再将截屏结果与基准图片进行像素比对的方式实现了页面显示效果的测试；基准图片与测试代码无关，因此，基准图片的更新以及相应的待测试的代码的更新都不会影响测试方法的复用，从而使得页面显示结果的测试方法与页面设计解耦，并且与页面开发过程解耦，不再需要频繁修改测试脚本，显著提升了测试效果，降低测试人员的压力。

附图说明

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

图1是本说明书提供的一种页面显示结果测试方法流程示意图；

图2是本说明书提供的通过无界面浏览器访问所述目标页面地址流程示意图；

图3是本说明书提供的根据测试需求，配置所述无界面浏览器运行的设备环境流程示意图；

图4是本说明书提供的页面显示效果示意图；

图5是本说明书提供的在所述标签页中访问所述目标页面地址指向的页面，得到访问结果流程示意图；

图6是本说明书提供的对所述截屏图片和所述基准图片进行像素比对，得到像素比对结果流程示意图；

图7是本说明书提供的根据所述像素比对结果确定所述页面显示结果的测试结果流程示意图；

图8是本说明书提供的像素比对的第一个目标示意图；

图9是本说明书提供的像素比对的第二个目标示意图；

图10是本说明书提供的像素比对结果示意图；

图11是本说明书提供的一种页面显示结果测试装置框图；

图12是本说明书提供的一种用于实现本说明书实施例所提供的方法的设备的硬件结构示意图。

具体实施方式

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

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

为了使本说明书实施例公开的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本说明书实施例进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本说明书实施例，并不用于限定本说明书实施例。

以下，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。在本实施例的描述中，除非另有说明，“多个”的含义是两个或两个以上。为了便于理解本说明书实施例所述的技术方案及其产生的技术效果，本说明书实施例首先对于相关专业名词进行解释：

无界面浏览器：即无需图形界面环境的浏览器，也称无头浏览器。无头浏览器可以使用脚本来执行各种界面浏览器的操作，能模拟各种有界面的真实的浏览器的使用场景。

PhantomJs：一种无界面浏览器，不仅作为一个隐形浏览器提供诸如CSS选择器、支持Web标准、DOM操作、JSON、HTML5、Canvas、SVG等功能，同时还提供了处理文件I/O的操作功能。

Puppeteer：一种无界面浏览器，是Google Chrome团队官方的无界面工具，提供高级的应用程序接口来控制无界面浏览器。用户在浏览器中手动完成的大部分事情都可以在Puppeteer中通过命令完成。

resemble.js：一个开源的图片像素对比工具。调用方法可以被简单理解为，传入两张图，返回一张合成图并附带对比参数如差别度等。

CSS：Cascading Style Sheets，层叠样式表；是一种样式表语言，用来描述页面HTML文档的呈现。CSS描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

RTF：Rich Text Format，富文本格式；是一种跨平台的文档格式，富文本作为一种非常流行的文件结构，多种文字编辑器都支持它。一般的格式设置，比如字体和段落设置，页面设置等等信息都可以存在RTF格式中，富文本中可以包括公式、字体、图片、排版、特殊字符等。

自动化测试：自动化测试是让程序代替人为去验证程序功能的过程，通过编写测试用例，可以让程序自动执行一些事件，例如模拟用户点击操作，获得相应的产出结果，并和预期结果进行比对。常用的页面自动化测试框架有Selenium，Jmeter等。

JMeter：Apache组织开发的基于Java的压力测试工具，可以对HTTP和FTP进行性能测试和接口测试.

Selenium：基于Web的自动化测试工具，它提供了一系列测试函数，用于支持Web自动化测试，这些函数能够通过许多方式定位界面元素。当Selenium2.x提出了WebDriver的概念之后，可以支持完全另外的一种方式与浏览器交互。那就是利用浏览器原生的应用程序接口，封装成一套更加面向对象的Selenium WebDriver应用程序接口，直接操作浏览器页面里的元素，甚至操作浏览器本身(截屏，窗口大小，启动，关闭，安装插件，配置证书之类的)。由于使用的是浏览器原生的应用程序接口，速度大大提高，而且调用的稳定性交给了浏览器厂商本身，显然是更加科学。

DOM：Document Object Model，文档对象模型；是一套标准。它定义了访问HTML文档对象的一套属性、方法和事件。

HTML：Hyper Text Markup Language，超文本标记语言；是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一，使分散的网络资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

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

现有技术中对于页面显示效果的自动化测试对于人工的要求较高，需要测试人员在充分了解页面的渲染代码以及用户的操作习惯的基础上编写测试脚本，进而通过测试用例的运行实现页面显示效果的自动化测试，这种测试方法对于测试人员的要求较高，并且页面代码的修改、用户操作路径以及操作指令的修改都可能导致测试脚本的修改，测试脚本的复用率较低，为测试人员带来了沉重的负担。

为了提升对于页面显示效果的自动化测试的效率，降低测试人员的负担，现有技术提供了一种图片对比测试的方案，比如，可以基于自动化测试框架Selenium WebDriver实施图片对比从而进行自动化测试，从而达到测试页面显示效果的目的。具体地，这种方案通过启动真实的有界面浏览器后进行页面截图，再根据页面截图进行图片对比，从而达到测试页面显示效果的目的。但是这种方案依托于有界面浏览器，执行环境较复杂，且耗时较长；在页面过长，超过一个屏幕的长度时，无法截取屏幕未显示的部分，也就无法对未显示部分的页面显示效果进行测试。

有鉴于此，为了提升对于页面显示效果进行自动化测试的效率，并且提供一种能够适应多种执行环境的页面显示效果的测试方案，本说明书实施例提供一种页面显示结果测试方法。

以下介绍本说明书的一种页面显示结果测试方法，图1是本说明书实施例提供的一种页面显示结果测试方法的流程示意图，本说明书提供了如实施例或流程图所述的方法操作步骤，但基于常规或者无创造性的劳动可以包括更多或者更少的操作步骤。实施例中列举的步骤顺序仅仅为众多步骤执行顺序中的一种方式，不代表唯一的执行顺序。在实际中的系统或服务器产品执行时，可以按照实施例或者附图所示的方法顺序执行或者并行执行(例如并行处理器或者多线程处理的环境)。具体的如图1所示，所述方法可以包括：

S101.获取目标页面地址。

具体地，所述目标页面地址可以记录在配置文件或者测试用脚本文件中，所述目标页面地址可以是网站的首地址，或者在对所述网站进行各种可行的操作时被确定的任意地址，所述目标页面地址指向待渲染的页面，所述页面可以基于CSS布局，也可以表达富文本格式的各种数据。本说明书实施例对于页面的具体结构和具体内容不做特殊限定。

S103.通过无界面浏览器访问所述目标页面地址，得到访问结果。

在一个实施例中，所述无界面浏览器可以为PhantomJs或Puppeteer，无界面浏览器可以模拟真实的有界面浏览器的运行环境。

所述通过无界面浏览器访问所述目标页面地址，如图2所示，包括：

S1031.启动无界面浏览器。

以所述无界面浏览器为Puppeteer为例，可以通过pupperteer.launch()方法启动Puppeteer。

在一个实施例中，可以通过为所述无界面浏览器设置其对应的设备环境，以达到基于所述无界面浏览器测试多种设备的目的，具体地，所述设备环境可以包括：设备型号、设备类型、尺寸信息、设备的可视区域以及可视区域的分辨率中的至少一种。比如，目前的常见的终端设备的尺寸信息可以被理解为目前市面上售卖的终端设备的尺寸信息，尺寸信息比如375px、534px、768px，这些终端设备的尺寸信息即可用于形成设备环境。

例如，在所述启动无界面浏览器之前，包括：根据测试需求，配置所述无界面浏览器运行的设备环境。

具体地，所述根据测试需求，配置所述无界面浏览器运行的设备环境，如图3所示，包括：

S1.设置无界面浏览器中的标签页所适配的可视区域参数，所述可视区域参数用于表征设备可视区域的范围信息，如：大小、位置等信息。

在一个实施例中，可以通过可视区域类实现参数设置。可视区域类可以缺省设置，也根据具体的测试需求进行变更。比如，在Puppeteer中可以通过defaultViewport可视区域类来表征初始的可视区域相关参数，在实际设置过程中，可以通过setViewport()方法来设置所述可视区域类的具体数据。比如通过执行下述指令来设置宽1080*高1920的可视区域：

await page.setViewport({

width:1080,

height:1920,

})；

其中page表征所述无界面浏览器打开的标签页。

S2.设置无界面浏览器中的标签页所适配的设备，所述无界面浏览器以所述设备作为访问所述标签页的运行设备来模拟标签页的访问过程。

相应的，在所述启动无界面浏览器之后，可以将所述设备环境作为所述无界面浏览器访问标签页时的运行环境。

示例性的，可以将设备设置为iPhone 6，在打开无界面浏览器后，将所述设备引入无界面浏览器中，在所述无界面浏览器中即可模拟所述设备打开标签页。以Puppeteer为例，可以通过DeviceDescriptors工具引入设备，使用emulate()方法方法模拟设备打开标签页。具体地，可以执行下述指令：

本说明书实施例可以通过设置可视区域类和设备使得无界面浏览器可以模拟在各种设备环境中运行的效果，从而提升测试场景的覆盖能力，便于测试页面在不同的设备环境中的显示效果。

S1033.在所述无界面浏览器中打开标签页。

具体地，所述标签页可以为空白的新标签页，在Puppeteer中可以通过newPage()方法打开一个新标签页。

S1035.在所述标签页中访问所述目标页面地址指向的页面。

具体地，在Puppeteer中可以通过goto()方法操作Puppeteer访问目标页面地址指向的页面并等待页面渲染完成。

进一步地，在标签页打开所述目标页面地址指向的页面的场景中，会存在不需要测试的范围、内容或对象，例如用户个人数据。若页面中包含有用户的个人数据，则不同用户的个人数据渲染部分的显示结果可能存在不一致的现象，也就是说，页面中个人数据的显示是千人千面的，而页面显示效果的测试应该需要滤除千人千面的效果而专注于页面本身要素的显示是否合理。比如，排版以及非用户个人数据的显示内容即属于页面本身要素。示例性的，对页面显示效果的测试包括但不限于对非用户个人数据的显示内容中的文字渲染、公式渲染、格式处理、字体渲染、段落渲染等是否合理的测试。而所述非用户个人数据的显示内容可以是富文本的形式，也可以是简单的文字内容，本说明书实施例并不进行特殊限定。

如图4所示，以用户个人数据为例，被方框框出的部分属于用户个人数据，显然，不同的用户的个人数据的内容、数据量都不同，因此有可能造成方框框出部分的显示不同，但是这种不同并不属于错误，因此，在对页面显示效果进行测试时应该排除这种干扰。

示例性的，在一个实施例中，所述在所述标签页中访问所述目标页面地址指向的页面，得到访问结果，如图5所示，包括：

S10351.在所述标签页中获取所述页面对应的脚本代码。

S10353.提取所述脚本代码中的至少一个目标节点，所述目标节点所对应的页面元素不参与像素比对。

具体地，本说明书实施例中通过像素比对来评估页面显示效果，步骤S10353中通过将目标节点对应的页面元素排除在像素比对的环节之外使得目标节点的页面元素的显示结果不影响像素比对结果，也就不会影响到测试的结果，从而排除了无需测试的范围、内容或对象对于页面显示效果的干扰。

具体地，所述目标节点可以通过html class属性进行标注。示例性的，可以由开发人员在进行页面编程时将不需要参与页面显示测试的页面元素标记出来，在S10353中根据所述标记即可将所述页面元素提取出来，得到目标节点。

示例性的，可以将页面的脚本代码对应的DOM中不需要进行像素比对的节点的html class标注为not-compare；相应的，在步骤S10353中提取被标注为not-compare的节点即可得到目标节点。

S10355.将所述脚本代码在所述标签页中的执行结果与所述至少一个目标节点构成的目标节点集一并作为访问结果。

S105.在所述无界面浏览器中对访问结果进行截屏，得到截屏图片。

具体地，以无界面浏览器Puppeteer为例，可以通过screenshot()方法对页面进行截屏操作，还可以将截屏结果保存为图片形式。示例性的，可以执行下述代码进行截屏保存：

await page.screenshot({path:test.png'})；//在page这个标签页中进行截屏，保存为PNG格式的图片。

具体地，若所述访问结果对应的页面的显示结果过长，超过标签页所适配的设备限定的屏幕的显示长度，则未显示部分也被截屏，与显示部分一起作为完整的截屏图片，从而使得截屏图片可以体现完整的显示结果，而不受限于屏幕的物理尺寸。

S107.获取所述目标页面地址对应的基准图片，所述基准图片为所述目标页面地址对应的设计页面的图片。

具体地，所述基准图片可以为页面设计工程师实际设计的对应于所述目标页面地址的表现效果的图片格式的设计稿。具体地，所述设计页面可以与具体的设备环境有关，也可以与具体的设备环境无关。所述设计页面与对所述目标页面地址的历史访问行为无关。

S109.对所述截屏图片和所述基准图片进行像素比对，得到像素比对结果。

在一个实施例中，若访问结果包括目标节点集，则所述对所述截屏图片和所述基准图片进行像素比对，得到像素比对结果，如图6所示，包括：

S1091.基于所述截屏图片确定第一比对图像，所述第一比对图像不包含所述目标节点集命中的页面元素；

S1093.基于所述基准图片确定第二比对图像，所述第二比对图像不包含所述目标节点集命中的页面元素；

S1095.将所述第一比对图像与第二比对图像进行像素比对，得到像素比对结果。

在一个实施例中，可以基于图片像素对比工具进行像素比对，具体地，可以利用resemble.js的compareTo()方法进行像素比对。

S1011.根据所述像素比对结果确定所述页面显示结果的测试结果。

具体地，所述根据所述像素比对结果确定所述页面显示结果的测试结果，如图7所示，包括：

S10111.根据所述像素比对结果得到差异相似度。

具体地，若使用resemble.js的compareTo()方法进行像素比对，可以通过misMatchPercentage属性得到差异相似度，所述差异相似度表征像素比对结果中差异部分占比，差异相似度越高表征参与像素比对的对象差异越大，差异相似度为1表征参与像素比对的对象完全不同。

S10113.若所述差异相似度小于预设阈值，则判定所述页面显示结果正常。

S10115.若所述差异相似度大于等于预设阈值，则判定所述页面显示结果异常。

在一个实施例中，若所述页面显示结果异常，则输出异常告警。

在另一个实施例中，还可以将所述像素比对结果直接输出，并将所述像素比对结果中的差异部分进行标注。请参考图8，其示出了像素比对的第一个目标；请参考图9，其示出了像素比对的第二个目标；请参考图10，其示出了像素比对结果，在图10中对其差异部分进行了标注，黑色部分为第一个目标与第二个目标的差别之处，白色部分为第一个目标与第二个目标的相同之处。

本说明书实施例公开了一种页面显示结果测试方法，通过使用无界面浏览器对于待测试页面进行访问和截屏，再将截屏结果与基准图片进行像素比对的方式实现了页面显示效果的测试；基准图片与测试代码无关，因此，基准图片的更新以及相应的待测试的代码的更新都不会影响测试方法的复用，从而使得页面显示结果的测试方法与页面设计解耦，并且与页面开发过程解耦，不再需要频繁修改测试脚本，显著提升了测试效果，降低测试人员的压力。显然，本说明书实施例中测试方法尤其能够适用于设计环节或开发环节迭代频繁的场景，能够显著节省测试时间、保障开发质量，减少样式错误，从而有效提升用户访问质量，带给用户更好的视觉体验。

进一步地，相较于现有技术中使用真实的有界面浏览器，无界面浏览器更加便于使用脚本进行自动化测试，执行环境简单，测试效率高；通过与基准图片进行像素比对得到像素比对结果，并基于像素比对结果得到测试结果，可靠程度和自动化程度均显著提升。

本说明书实施例还公开了一种页面显示结果测试装置，如图11所示，所述装置包括：

目标页面地址获取模块201，用于获取目标页面地址；

访问结果获取模块203，用于通过无界面浏览器访问所述目标页面地址，得到访问结果；

截屏模块205，用于在所述无界面浏览器中对访问结果进行截屏，得到截屏图片；

像素比对模块207，用于对所述截屏图片和所述基准图片进行像素比对，得到像素比对结果，其中，所述基准图片为所述目标页面地址对应的设计页面所对应的图片；

测试结果确定模块209，用于根据所述像素比对结果确定所述页面显示结果的测试结果。

具体地，本说明书实施例公开一种页面显示结果测试装置与上述对应的方法实施例均基于相同发明构思。详情请参见方法实施例，在此不再赘述。

本说明书实施例还提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述一种页面显示结果测试方法。

本说明书实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质可以存储有多条指令。所述指令可以适于由处理器加载并执行本说明书实施例所述的一种页面显示结果测试方法。

进一步地，图12示出了一种用于实现本说明书实施例所提供的方法的设备的硬件结构示意图，所述设备可以参与构成或包含本说明书实施例所提供的装置或系统。如图12所示，设备10可以包括一个或多个(图中采用102a、102b，……，102n来示出)处理器102(处理器102可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置)、用于存储数据的存储器104、以及用于通信功能的传输装置106。除此以外，还可以包括：显示器、输入/输出接口(I/O接口)、通用串行总线(USB)端口(可以作为I/O接口的端口中的一个端口被包括)、网络接口、电源和/或相机。本领域普通技术人员可以理解，图12所示的结构仅为示意，其并不对上述电子装置的结构造成限定。例如，设备10还可包括比图12中所示更多或者更少的组件，或者具有与图12所示不同的配置。

应当注意到的是上述一个或多个处理器102和/或其他数据处理电路在本文中通常可以被称为“数据处理电路”。该数据处理电路可以全部或部分的体现为软件、硬件、固件或其他任意组合。此外，数据处理电路可为单个独立的处理模块，或全部或部分的结合到设备10(或移动设备)中的其他元件中的任意一个内。如本说明书实施例中所涉及到的，该数据处理电路作为一种处理器控制(例如与接口连接的可变电阻终端路径的选择)。

存储器104可用于存储应用软件的软件程序以及模块，如本说明书实施例中所述的方法对应的程序指令/数据存储装置，处理器102通过运行存储在存储器104内的软件程序以及模块，从而执行各种功能应用以及数据处理，即实现上述的一种页面显示结果测试方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器102远程设置的存储器，这些远程存储器可以通过网络连接至设备10。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

传输装置106用于经由一个网络接收或者发送数据。上述的网络具体实例可包括设备10的通信供应商提供的无线网络。在一个实例中，传输装置106包括一个网络适配器(NetworkInterfaceController，NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输装置106可以为射频(RadioFrequency，RF)模块，其用于通过无线方式与互联网进行通讯。

显示器可以例如触摸屏式的液晶显示器(LCD)，该液晶显示器可使得用户能够与设备10(或移动设备)的用户界面进行交互。

需要说明的是：上述本说明书实施例先后顺序仅仅为了描述，不代表实施例的优劣。且上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置和服务器实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本说明书的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种页面显示结果测试方法，其特征在于，所述方法包括：

获取目标页面地址；

通过无界面浏览器访问所述目标页面地址，得到访问结果；

在所述无界面浏览器中对访问结果进行截屏，得到截屏图片；

对所述截屏图片和基准图片进行像素比对，得到像素比对结果，其中，所述基准图片为所述目标页面地址对应的设计页面所对应的图片；

根据所述像素比对结果确定所述页面显示结果的测试结果。

2.根据权利要求1所述的方法，其特征在于，所述通过无界面浏览器访问所述目标页面地址，包括：

启动无界面浏览器；

在所述无界面浏览器中打开标签页；

在所述标签页中访问所述目标页面地址指向的页面。

3.根据权利要求1所述的方法，其特征在于，所述方法还包括：

根据测试需求，配置所述无界面浏览器运行的设备环境，其中，所述设备环境作为所述无界面浏览器访问标签页时的运行环境；

其中，所述根据测试需求，配置所述无界面浏览器运行的设备环境包括：

设置无界面浏览器中的标签页所适配的可视区域参数，所述可视区域类用于表征设备可视区域的范围信息；

设置无界面浏览器中的标签页所适配的设备，所述无界面浏览器以所述设备作为访问所述标签页的运行设备来模拟标签页的访问过程。

4.根据权利要求1所述的方法，其特征在于，所述在所述标签页中访问所述目标页面地址指向的页面，得到访问结果，包括：

在所述标签页中获取所述页面对应的脚本代码；

提取所述脚本代码中的至少一个目标节点，所述目标节点所对应的页面元素不参与像素比对；

将所述脚本代码在所述标签页中的执行结果与所述至少一个目标节点构成的目标节点集一并作为访问结果。

5.根据权利要求4中所述的方法，其特征在于，若所述访问结果包括目标节点集，则所述对所述截屏图片和所述基准图片进行像素比对，得到像素比对结果，包括：

基于所述截屏图片确定第一比对图像、基于所述基准图片确定第二比对图像，所述第一比对图像、第二比对图像不包含所述目标节点集命中的页面元素；

将所述第一比对图像与第二比对图像进行像素比对，得到像素比对结果。

6.根据权利要求1-5中任意一项所述的方法，其特征在于，所述在所述无界面浏览器中对访问结果进行截屏，得到截屏图片，包括：

若所述访问结果对应的页面的显示结果过长，超过标签页所适配的设备限定的屏幕的显示长度，则未显示部分也被截屏，与显示部分一起作为完整的截屏图片。

7.根据权利要求1-5中任意一项所述的方法，其特征在于，所述根据所述像素比对结果确定所述页面显示结果的测试结果，包括：

根据所述像素比对结果得到差异相似度；

若所述差异相似度小于预设阈值，则判定所述页面显示结果正常；

若所述差异相似度大于等于预设阈值，则判定所述页面显示结果异常。

8.一种页面显示结果测试装置，其特征在于，包括：

目标页面地址获取模块，用于获取目标页面地址；

访问结果获取模块，用于通过无界面浏览器访问所述目标页面地址，得到访问结果；

截屏模块，用于在所述无界面浏览器中对访问结果进行截屏，得到截屏图片；

像素比对模块，用于对所述截屏图片和基准图片进行像素比对，得到像素比对结果，其中，所述基准图片为所述目标页面地址对应的设计页面所对应的图片；

测试结果确定模块，用于根据所述像素比对结果确定所述页面显示结果的测试结果。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有至少一条指令或至少一段程序，所述至少一条指令或至少一段程序由处理器加载并执行以实现如权利要求1-7中任一所述的一种页面显示结果测试方法。

10.一种页面显示结果测试设备，其特征在于，包括至少一个处理器，以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述至少一个处理器通过执行所述存储器存储的指令实现如权利要求1-7中任一所述的一种页面显示结果测试方法。

Images