CN112711526A - Ui测试方法、装置、设备及存储介质 - Google Patents

Abstract

本申请实施例提供了一种UI测试方法、装置、设备及存储介质，其中，方法包括：在执行测试用例的界面上，获取待测试UI图像；在参考图像库中，获取与所述测试用例的标识对应的目标参考图像；采用图像像素对比工具，将所述待测试UI图像与目标参考图像进行图像像素对比，得到对比结果；根据所述对比结果确定所述UI测试的测试结果，并输出所述测试结果。通过本申请，能够使得测试过程简单直观，可以减少测试和开发的工作量，便于测试用例的维护。

Description

UI测试方法、装置、设备及存储介质

技术领域

本申请实施例涉及互联网技术领域，涉及但不限于一种UI测试方法、装置、设备及存储介质。

背景技术

目前，在对用户界面(UI，User Interface)进行测试时，常用的UI自动化测试需要根据用户的操作，编写测试用例代码，以通过测试用例代码判断预期和实际出现的结果是否一致。即需要对用户的操作场景做具体的细化，并分解成计算机语言来进行表达。

但是，仅采用测试用例进行UI自动化测试的方案，一旦测试用例发生变化，则需要更新测试用例，而对于电脑端的网页版，其UI界面的变化是非常频繁的，那么就会带来巨大的测试用例开发量。

发明内容

本申请实施例提供一种UI测试方法、装置、设备及存储介质，能够极大的降低测试用例的开发量，降低测试难度。

本申请实施例的技术方案是这样实现的：

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

在执行测试用例的界面上，获取待测试UI图像；

在参考图像库中，获取与所述测试用例的标识对应的目标参考图像；

采用图像像素对比工具，将所述待测试UI图像与目标参考图像进行图像像素对比，得到对比结果；

根据所述对比结果确定所述UI测试的测试结果，并输出所述测试结果。

本申请实施例提供一种UI测试装置，包括：

第一获取模块，用于在执行测试用例的界面上，获取待测试UI图像；

第二获取模块，用于在参考图像库中，获取与所述测试用例的标识对应的目标参考图像；

对比模块，用于采用图像像素对比工具，将所述待测试UI图像与目标参考图像进行图像像素对比，得到对比结果；

确定模块，用于根据所述对比结果确定所述UI测试的测试结果，并输出所述测试结果。

本申请实施例提供一种UI测试设备，包括：

存储器，用于存储可执行指令；处理器，用于执行所述存储器中存储的可执行指令时，实现上述的方法。

本申请实施例提供一种存储介质，存储有可执行指令，用于引起处理器执行时，实现上述的方法。

本申请实施例具有以下有益效果：

采用图像像素对比工具，将所述待测试UI图像与目标参考图像进行图像像素对比，得到对比结果；根据所述对比结果确定所述UI测试的测试结果。如此，通过简单的图像对比得到对比结果，只需要查看对比结果标记出来的差异部分便知道UI界面发生了哪些变化，测试过程简单直观，不需要具备开发能力，可以减少测试和开发的工作量，便于测试用例的维护。

附图说明

图1A是本申请实施例提供的UI测试系统的一个可选的架构示意图；

图1B是本申请实施例提供的UI测试系统应用于区块链系统的一个可选的结构示意图；

图1C是本申请实施例提供的区块结构的一个可选的示意图；

图2是本申请实施例提供的测试终端的结构示意图；

图3是本申请实施例提供的UI测试方法的一个可选的流程示意图；

图4是本申请实施例提供的UI测试方法的一个可选的流程示意图；

图5是本申请实施例提供的UI测试方法的一个可选的流程示意图；

图6是本申请实施例提供的UI测试方法的一个可选的流程示意图；

图7是本申请实施例提供的UI测试方法的一个可选的流程示意图；

图8是本申请实施例UI测试方法的像素对比框架示意图；

图9是本申请实施例Resemble.js框架作图片对比的原理图；

图10是本申请实施例生成可视化测试报告的界面图；

图11是本申请实施例中可视化测试报告的一条操作流程图；

图12是本申请实施例提供的UI测试方法的可选流程示意图。

具体实施方式

为了使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请作进一步地详细描述，所描述的实施例不应视为对本申请的限制，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本申请保护的范围。

在以下的描述中，涉及到“一些实施例”，其描述了所有可能实施例的子集，但是可以理解，“一些实施例”可以是所有可能实施例的相同子集或不同子集，并且可以在不冲突的情况下相互结合。除非另有定义，本申请实施例所使用的所有的技术和科学术语与属于本申请实施例的技术领域的技术人员通常理解的含义相同。本申请实施例所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。

对本申请实施例进行进一步详细说明之前，对本申请实施例中涉及的名词和术语进行说明，本申请实施例中涉及的名词和术语适用于如下的解释。

1)测试用例(Test Case)：即是为某个特殊目标而编制的一组测试输入、执行条件以及预期结果，用于测试某个程序路径或核实是否满足某个特定需求。

2)UI自动化测试：是把以人为驱动的测试行为转化为机器执行的一种过程。通常在设计了测试用例并通过评审之后，由测试人员根据测试用例中描述的规程一步步执行测试，得到实际结果与期望结果的比较。在此过程中，为了节省人力、时间或硬件资源，提高测试效率，便引入了自动化测试的概念。

3)截图工具：例如本文中所提到的Casperjs，就是一种基于PhantomJS编写的截图工具。其内部提供了一个无界面浏览器，简单来说用它可以以代码的形式来完成模拟人来操作浏览器的操作，其中涉及鼠标各种事件等非常多的功能，本文主要使用Casperjs附带的截图功能。

4)图像像素对比工具：例如本文中所提到的Resemble.js，Resemble.js的调用方法可以简单理解为：向Resemble.js中传入两张图，即可返回一张合成图并附带对比参数，如差别度等等。其基本实现思路可以理解为通过将图片转为canvas绘图后，获取其图像像素点，之后对每个像素点进行一次比对。

5)功能测试：也称为行为测试，是根据产品特性、操作描述和用户方案，测试一个产品的特性和可操作行为是否满足当初设计的需求。功能测试主要是通过黑盒模式进行，用以发现代码集成后可能存在的功能问题。功能测试中，测试用例的设计非常重要，好的测试用例可以将用户可能遇到的问题提前发现并及时解决。

6)回归测试：回归测试是指在发生修改之后重新测试先前的测试以保证修改的正确性。理论上，软件产生新版本，都需要进行回归测试，验证以前发现和修复的错误是否在新软件版本上再次出现。回归测试作为软件生命周期的一个组成部分，在整个软件测试过程中占有很大比重的工作量，软件开发的各个阶段都会进行多次回归测试。

相关技术中，在进行UI自动化测试时，通常是采用测试用例进行测试。相关技术中的测试方法，至少具有如下缺点：

1)需要手动开发测试用例，将用户的操作场景具体的细化分解为计算机语言表达，开发量大。即不管是用的什么自动化测试框架，测试用例需要测试或者开发人员将测试行为转化为计算机语言，通过断言判断是否和预期一致，写测试用例也占用了部分时间。

2)测试用例与业务之间强相关，需求迭代，测试用例也需要迭代开发，维护成本也较高，也会增加工作量，占用开发成本。

3)测试用例后期维护成本高。

4)测试用例开发需要一定的编码能力，新人上手慢。

基于相关技术所存在的至少一个问题，本申请实施例提供一种UI测试方法，通过简单的图像对比，只需要查看对比结果标记出来的差异部分便知道UI界面发生了哪些变化，测试过程简单直观，一目了然，不需要具备开发能力，新人上手快，可以减少测试和开发的工作量，便于测试用例的维护。

下面说明本申请实施例提供的UI测试设备的示例性应用，本申请实施例提供的设备可以实施为笔记本电脑，平板电脑，台式计算机，移动设备(例如，移动电话，便携式音乐播放器，个人数字助理，专用消息设备，便携式游戏设备)等各种类型的用户终端，也可以实施为服务器。下面，将说明设备实施为服务器时的示例性应用。

参见图1A，图1A是本申请实施例提供的UI测试系统10的一个可选的架构示意图，为实现支撑一个测试用例在测试终端上的执行，测试终端(图1A中示例性示出了测试终端100-1和测试终端100-2)通过网络200连接服务器300，网络200可以是广域网或者局域网，又或者是二者的组合。

测试终端在测试结果展示页面(图1A中示例性示出了测试结果展示页面110-1和测试结果展示页面110-2)上显示测试结果，例如，所述测试结果包括测试通过和测试不通过，则可以在测试结果展示页面110-1和测试结果展示页面110-2上显示“测试通过”或“测试不通过”的文字结果。本申请实施例中，测试终端可以通过网络200向服务器300发送测试用例和所述测试用例对应的用户操作，服务器300在完成图像对比分析之后，将测试结果反馈给测试终端。

本申请实施例涉及的UI测试系统10也可以是区块链系统的分布式系统101，参见图1B，图1B是本申请实施例提供的UI测试系统10应用于区块链系统的一个可选的结构示意图，其中，所述分布式系统101可以是由多个节点102(接入网络中的任意形式的计算设备，如服务器、用户终端)和客户端103形成的分布式节点，节点之间形成组成的点对点(P2P，Peer To Peer)网络，P2P协议是一个运行在传输控制协议(TCP，Transmission ControlProtocol)协议之上的应用层协议。在分布式系统中，任何机器如服务器、终端都可以加入而成为节点，节点包括硬件层、中间层、操作系统层和应用层。

参见图1B示出的区块链系统中各节点的功能，涉及的功能包括：

1)路由，节点具有的基本功能，用于支持节点之间的通信。

节点除具有路由功能外，还可以具有以下功能：

2)应用，用于部署在区块链中，根据实际业务需求而实现特定业务，记录实现功能相关的数据形成记录数据，在记录数据中携带数字签名以表示任务数据的来源，将记录数据发送到区块链系统中的其他节点，供其他节点在验证记录数据来源以及完整性成功时，将记录数据添加到临时区块中。

例如，应用实现的业务包括：

2.1)钱包，用于提供进行电子货币的交易的功能，包括发起交易(即，将当前交易的交易记录发送给区块链系统中的其他节点，其他节点验证成功后，作为承认交易有效的响应，将交易的记录数据存入区块链的临时区块中；当然，钱包还支持查询电子货币地址中剩余的电子货币。

2.2)共享账本，用于提供账目数据的存储、查询和修改等操作的功能，将对账目数据的操作的记录数据发送到区块链系统中的其他节点，其他节点验证有效后，作为承认账目数据有效的响应，将记录数据存入临时区块中，还可以向发起操作的节点发送确认。

2.3)智能合约，计算机化的协议，可以执行某个合约的条款，通过部署在共享账本上的用于在满足一定条件时而执行的代码实现，根据实际的业务需求代码用于完成自动化的交易，例如查询买家所购买商品的物流状态，在买家签收货物后将买家的电子货币转移到商户的地址；当然，智能合约不仅限于执行用于交易的合约，还可以执行对接收的信息进行处理的合约。

3)区块链，包括一系列按照产生的先后时间顺序相互接续的区块(Block)，新区块一旦加入到区块链中就不会再被移除，区块中记录了区块链系统中节点提交的记录数据。

4)共识(Consensus)，是区块链网络中的一个过程，用于在涉及的多个节点之间对区块中的交易达成一致，达成一致的区块将被追加到区块链的尾部，实现共识的机制包括工作量证明(PoW，Proofof Work)、权益证明(PoS，Pro ofofStake)、股份授权证明(DPoS，Delegated Proof-of-Stake)、消逝时间量证明(PoET，Proof of ElapsedTime)等。

参见图1C，图1C是本申请实施例提供的区块结构(Block Structure)的一个可选的示意图，每个区块中包括本区块存储交易记录的哈希值(本区块的哈希值)、以及前一区块的哈希值，各区块通过哈希值连接形成区块链。另外，区块中还可以包括有区块生成时的时间戳等信息。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了相关的信息，用于验证其信息的有效性(防伪)和生成下一个区块。

参见图2，图2是本申请实施例提供的测试终端的结构示意图，图2所示的测试终端包括：至少一个处理器210、存储器250、至少一个网络接口220和用户接口230。测试终端中的各个组件通过总线系统240耦合在一起。可理解，总线系统240用于实现这些组件之间的连接通信。总线系统240除包括数据总线之外，还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见，在图2中将各种总线都标为总线系统240。

处理器210可以是一种集成电路芯片，具有信号的处理能力，例如通用处理器、数字信号处理器(DSP，Digital Signal Processor)，或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等，其中，通用处理器可以是微处理器或者任何常规的处理器等。

用户接口230包括使得能够呈现媒体内容的一个或多个输出装置231，包括一个或多个扬声器和/或一个或多个视觉显示屏。用户接口230还包括一个或多个输入装置232，包括有助于用户输入的用户接口部件，比如键盘、鼠标、麦克风、触屏显示屏、摄像头、其他输入按钮和控件。

存储器250可以是可移除的，不可移除的或其组合。示例性的硬件设备包括固态存储器，硬盘驱动器，光盘驱动器等。存储器250可选地包括在物理位置上远离处理器210的一个或多个存储设备。存储器250包括易失性存储器或非易失性存储器，也可包括易失性和非易失性存储器两者。非易失性存储器可以是只读存储器(ROM，Read Only Memory)，易失性存储器可以是随机存取存储器(RAM，Random Access Memory)。本申请实施例描述的存储器250旨在包括任意适合类型的存储器。在一些实施例中，存储器250能够存储数据以支持各种操作，这些数据的示例包括程序、模块和数据结构或者其子集或超集，下面示例性说明。

操作系统251，包括用于处理各种基本系统服务和执行硬件相关任务的系统程序，例如框架层、核心库层、驱动层等，用于实现各种基础业务以及处理基于硬件的任务；

网络通信模块252，用于经由一个或多个(有线或无线)网络接口220到达其他计算设备，示例性的网络接口220包括：蓝牙、无线相容性认证(WiFi)、和通用串行总线(USB，Universal Serial Bus)等；

输入处理模块253，用于对一个或多个来自一个或多个输入装置232之一的一个或多个用户输入或互动进行检测以及翻译所检测的输入或互动。

在一些实施例中，本申请实施例提供的装置可以采用软件方式实现，图2示出了存储在存储器250中的一种UI测试装置254，该UI测试装置254可以是包括测试终端100-1中的UI测试装置，其可以是程序和插件等形式的软件，包括以下软件模块：第一获取模块2541、第二获取模块2542、对比模块2543和确定模块2544，这些模块是逻辑上的，因此根据所实现的功能可以进行任意的组合或进一步拆分。将在下文中说明各个模块的功能。

在另一些实施例中，本申请实施例提供的装置可以采用硬件方式实现，作为示例，本申请实施例提供的装置可以是采用硬件译码处理器形式的处理器，其被编程以执行本申请实施例提供的UI测试方法，例如，硬件译码处理器形式的处理器可以采用一个或多个应用专用集成电路(ASIC，Application Specific Integrated Circuit)、DSP、可编程逻辑器件(PLD，Programmable Logic Devic e)、复杂可编程逻辑器件(CPLD，ComplexProgrammable Logic Device)、现场可编程门阵列(FPGA，Field-Programmable GateArray)或其他电子元件。

下面将结合本申请实施例提供的测试终端的示例性应用和实施，说明本申请实施例提供的UI测试方法。

参见图3，图3是本申请实施例提供的UI测试方法的一个可选的流程示意图，将结合图3示出的步骤进行说明。

步骤S301，在执行测试用例的界面上，获取待测试UI图像。

这里，所述测试用例为用于测试程序路径或者用于核实某项功能是否满足用户的特定需求。所述测试用例是通过开发后形成的规范，用于规定测试的目标和测试方式。本申请实施例中，所述测试用例用于实现UI界面的测试，以实现对用户操作后的WEB端UI界面的界面展示效果进行测试。

所述测试用例中包括用户的操作，在执行所述测试用例时，模拟执行所述用户操作，并确定执行所述用户操作之后的界面，本申请实施例中，即需要对执行所述用户操作之后的界面进行UI测试。

本申请实施例中，获取待测试UI图像，可以是将执行所述用户操作之后的整个界面确定为所述待测试UI图像，或者，将执行所述用户操作之后的界面中的部分区域确定为所述待测试UI图像。在获取所述待测试UI图像时，可以采用截图的方式获取图像，以得到所述待测试UI图像。

步骤S302，在参考图像库中，获取与所述测试用例的标识对应的目标参考图像。

这里，所述参考图像库为预先设置的图像库，所述参考图像库中包括至少一个参考图像，所述参考图像用于对所述待测试UI图像进行对比。所述参考图像是预设获取并存储于所述参考图像库中的。在所述参考图像库中存储有所述参考图像，还可以存储有每一参考图像与测试用例的标识之间的对应关系，这样，当确定出测试用例时，即可以根据测试用例的标识确定对应的测试用例。

本申请实施例中，由于测试用例是已知的，因此可以在执行测试用例之前或者在执行测试用例的同时或者在执行测试用例之后，获取测试用例的标识，并根据所述测试用例的标识在所述参考图像库中选择出与所述标识对应的参考图像为目标参考图像。

步骤S303，采用图像像素对比工具，将所述待测试UI图像与目标参考图像进行图像像素对比，得到对比结果。

这里，所述图像像素对比工具用于对输入的至少两张图像进行像素对比，以确定出所述至少两张图像中不同的像素点。

在一些实施例中，所述图像像素对比工具可以是Resemble.js框架，那么可以将所述待测试UI图像和所述目标参考图像分别输入至Resemble.js框架中，通过Resemble.js框架对所述待测试UI图像和所述目标参考图像进行图像像素对比，确定出所述待测试UI图像与所述目标参考图像中不同的像素点。

步骤S304，根据所述对比结果确定所述UI测试的测试结果，并输出所述测试结果。

这里，所述测试结果包括测试通过和测试不通过，当所述对比结果表明所述待测试UI图像与所述目标参考图像中存在不同的像素点时，确定所述测试结果为测试不通过，当所述对比结果表明所述待测试UI图像与所述目标参考图像中不存在不同的像素点时，确定所述测试结果为测试通过。

在一些实施例中，输出所述测试结果可以是将所述测试结果显示在显示设备上以提示测试人员；或者以语音的方式输出所述测试结果以提示测试人员；或者以灯光指示的方式输出所述测试结果，例如，指示灯为绿色表明测试通过，指示灯为红色表明测试不通过。

在一些实施例中，由于可以在显示设备上显示所述测试结果，因此，所述测试结果除了包括测试通过或测试不通过的结果信息之外，还可以包括待测试UI图像与目标参考图像的具体差异部分，例如具体是哪个像素点存在不同，或者具体是哪些像素点相同等等。如此，能够更加直观的向测试人员呈现测试结果。

本申请实施例提供的UI测试方法，采用图像像素对比工具，对所获取的待测试UI图像与目标参考图像进行图像像素对比，得到对比结果；根据所述对比结果确定所述UI测试的测试结果。如此，通过简单的图像对比得到对比结果，只需要查看对比结果标记出来的差异部分便知道UI界面发生了哪些变化，测试过程简单直观，不需要具备开发能力，可以减少测试和开发的工作量，便于测试用例的维护。

图4是本申请实施例提供的UI测试方法的一个可选的流程示意图，如图4所示，所述方法包括以下步骤：

步骤S401，在执行测试用例的界面上，获取待测试UI图像。

步骤S402，在参考图像库中，获取与所述测试用例的标识对应的目标参考图像。

这里，步骤S401至S402与上述步骤S301至S302相同，本申请实施例不再赘述。

步骤S403，对所述待测试UI图像进行基于像素点的数值化处理，得到每一像素点的像素值。

这里，在获取到所述待测试UI图像之后，确定所述待测试UI图像上的像素点，并对每一像素点进行数值化处理，以确定每一像素点对应的像素值。在一些实施例中，所述像素值可以包括红绿蓝(RGB，Red-Green-Blue)像素值、透明度等像素信息。

在一些实施例中，在确定待测试UI图像的每一像素点的像素值的同时，还可以采用相同的方式确定所述目标参考图像的像素点和每一像素点的像素值。其中，所述待测试UI图像的像素点与所述目标参考图像的像素点一一对应。

步骤S404，将所述待测试UI图像的每一像素点的像素值，与所述目标参考图像的对应像素点的像素值进行对比，得到所述对比结果。

这里，在确定出所述待测试UI图像的每一像素点的像素值和所述目标参考图像的每一像素点的像素值之后，依次对所述待测试UI图像上的每一像素点与所述目标参考图像上的对应像素点进行对比，得到对应于每一像素点的对比结果。

本申请实施例中，所述对比结果用于表征所述待测试UI图像的每一像素点与所述目标参考图像的对应像素点之间的相似度。例如，所述相似度可以以百分比的形式表示，所述相似度取值范围为0至100％，则可以根据所述待测试U I图像的像素点的像素值与所述目标参考图像的对应像素点的像素值确定百分比相似度。又例如，所述相似度取值范围可以为0和100％，那么，所述相似度对应的结果包括两种，第一种是像素点对应相同，第二种是像素点对应不同，也就是说，当所述相似度为0时，表明待测试UI图像的像素点A1与目标参考图像的对应像素点A2不同；当所述相似度为100％时，表明待测试UI图像的像素点A1与目标参考图像的对应像素点A2相同。

在一些实施例中，可以同时对所述待测试UI图像上的多个像素点与目标参考图像上的对应像素点进行对比，也可以依次对所述待测试UI图像上的多个像素点与目标参考图像上的对应像素点进行对比，本申请实施例不做限定。

步骤S405，根据所述对比结果确定所述UI测试的测试结果，并输出所述测试结果。

这里，在完成对所述待测试UI图像上的全部像素点与目标参考图像上的对应像素点之间的对比，得到所述待测试UI图像的每一像素点的对比结果之后，根据所述待测试UI图像上的全部像素点对应的所述对比结果确定所述测试结果。

本申请实施例中，当所述相似度取值范围为0至100％时，则可以预先确定一个相似度阈值，如果所述待测试UI图像上的全部像素点对应的所述对比结果均大于所述相似度阈值，则确定所述测试结果为测试通过，如果所述待测试UI图像上存在至少一个像素点对应的所述对比结果小于或等于所述相似度阈值，则确定所述测试结果为测试不通过。当所述相似度取值范围为0和100％时，则当所述待测试UI图像上的全部像素点对应的所述对比结果均为相似度100％时，则确定所述测试结果为测试通过，如果所述待测试UI图像存在至少一个像素点对应的所述对比结果为相似度为0时，则确定所述测试结果为测试不通过。

步骤S406，在确定出所述测试结果之后，根据所述测试结果更新所述测试用例。

这里，如果所述测试结果为测试不通过时，表明当前的所述测试用例不能实现对待测试UI界面的准确测试，因而需要更新所述测试用例。如果所述测试结果为测试不通过，那么如果确定测试出来的是缺陷的话就需要修改测试用例的代码中的缺陷，如果是新的迭代需求，则需要更新测试用例。

本申请实施例提供的UI测试方法，在获取到所述待测试UI图像和目标参考图像之后，对所述待测试UI图像和目标参考图像进行基于像素点的数值化处理，得到每一像素点的像素值，将所述待测试UI图像的每一像素点的像素值，与所述目标参考图像的对应像素点的像素值进行对比，得到所述对比结果，如此，基于像素点的像素值进行对比，能够得到准确的对比结果，从而根据所述对比结果能够确定出准确的测试结果，保证测试结果的有效性。

基于图3，图5是本申请实施例提供的UI测试方法的一个可选的流程示意图，如图5所示，步骤S302中在参考图像库中，获取与所述测试用例的标识对应的目标参考图像，可以通过以下步骤实现：

步骤S501，根据所述测试用例的标识，在所述参考图像库中查找目标参考图像。

这里，每一测试用例对应一标识，所述测试用例的标识用于区分所述测试用例，在进行UI界面的测试时，可以根据UI界面的属性确定测试用例以及测试用例的标识。

所述参考图像库中包括至少一个参考图像和每一参考图像与测试用例的标识之间的对应关系，因此当确定出所述测试用例的标识之后，在所述参考图像库中确定与所述测试用例的标识具有所述对应关系的参考图像为目标参考图像。

步骤S502，如果在所述参考图像库中能够获取到与所述测试用例的标识对应的目标参考图像，则将所述待测试UI图像与所述目标参考图像进行图像像素对比。

这里，如果在所述参考图像库中能够获取到与所述测试用例的标识对应的目标参考图像，说明预先已经在参考图像库中存储了用于进行对比的目标参考图像，因此，执行对比步骤，将所述待测试UI图像与所述目标参考图像进行图像像素对比。

步骤S503，如果在所述参考图像库中不能获取到与所述测试用例的标识对应的目标参考图像，将所述待测试UI图像作为与所述测试用例的标识对应的目标参考图像存储至所述参考图像库中。

这里，如果在所述参考图像库中不能获取到与所述测试用例的标识对应的目标参考图像，说明预先未在参考图像库中存储用于进行对比的目标参考图像，因此，可以确定所述待测试UI图像与所述测试用例的标识之间的对应关系，并将所述待测试UI图像作为所述目标参考图像，与所述对应关系一起存储至所述参考图像库中，以便于后续再次执行所述测试用例进行UI测试时，可以在所述参考图像库中获取到目标参考图像。

步骤S504，禁止对所述待测试UI图像与目标参考图像进行图像像素对比。

这里，由于在所述参考图像库中不能获取到与所述测试用例的标识对应的目标参考图像，且将所述待测试UI图像作为所述目标参考图像存储至所述参考图像库中，因此无需再进行图像像素的对比。

本申请实施例提供的UI测试方法，如果在所述参考图像库中不能获取到与所述测试用例的标识对应的目标参考图像，将所述待测试UI图像作为与所述测试用例的标识对应的目标参考图像存储至所述参考图像库中，如此，能够保证后续再次执行所述测试用例进行UI测试时，能够查找到可用于对比的目标参考图像，便于后续的测试过程的顺利进行。

基于图3，图6是本申请实施例提供的UI测试方法的一个可选的流程示意图，如图6所示，在执行测试用例之前，所述方法还包括以下步骤：

步骤S601，在预设存储单元中设置用于存储所述目标参考图像的所述参考图像库和用于存储所述对比结果的对比结果库。

这里，所述预设存储单元可以是本地的存储单元，也可以是云端存储设备。本申请实施例中，通过在预设存储单元中设置所述参考图像库和所述对比结果库，实现了对参考图像和对比结果的分别存储，便于后续测试过程中在所述参考图像库中快速查找目标参考图像，以及在确定测试结果时在所述对比结果库中快速获取对比结果，以得到准确的测试结果。

对应地，在得到所述对比结果之后，所述方法还包括以下步骤：

步骤S602，将所述对比结果和所述对比结果与所述测试用例的标识之间的对应关系存储至所述对比结果库中。

这里，在得到所述对比结果之后，需要将所述对比结果存储至所述对比结果库中，以便于进行结果分析的其他软件能够在所述对比结果库中快速的获取准确的对比结果，从而进行对比结果分析得到正确的测试结果。

本申请实施例中，在所述对比结果库中，不仅可以存储所述对比结果，还可以存储所述对比结果与所述测试用例的标识之间的对应关系，如此，在查找对比结果时，可以直接根据所述测试用例的标识在所述对比结果库中找出准确的对比结果。

本申请实施例提供的UI测试方法，在预设存储单元中设置用于存储所述目标参考图像的所述参考图像库和用于存储所述对比结果的对比结果库，如此，通过不同的库分别存储参考图像和对比结果，便于后续测试的有序进行，也能够方便对对比结果的准确分析。

在一些实施例中，在得到所述测试结果之后，还可以包括以下步骤：

步骤S610，将所述测试结果存储于预设的可视化展示报表中。

这里，可以采用Phantomflow框架将每一条测试用例的测试结果展现在所述可视化展示报表中，即所述PhantomFlow框架能够提供一种简单的方式来组织用户操作流，并且生成可视化的测试报告，以向用户呈现测试结果。所述Ph antomFlow框架是基于决策树(decision tree)的UI测试框架，是对PhantomJ S、CasperJS和PhantomCSS的包装。

步骤S611，当接收到测试结果查看请求时，在所述可视化展示报表中查找与所述测试结果查看请求对应的目标测试结果。

这里，用户可以请求查看某一个测试结果，因此可以向UI测试设备发送测试结果查看请求，所述测试结果查看请求中包括测试结果对应的测试用例的标识。本申请实施例中，根据所述测试用例的标识确定目标测试结果。

步骤S612，显示所述目标测试结果。

这里，在查找到目标测试结果之后，将所述目标测试结果显示于UI测试设备的当前界面上，以供测试人员查看。

在一些实施例中，如图7所示，上述步骤S301中在执行测试用例的界面上，获取待测试UI图像，还可以通过以下步骤实现：

步骤S701，确定所述测试用例对应的用户操作和执行所述用户操作后对应的用户界面。

这里，执行所述测试用例是执行所述测试用例中包括的用户操作，其中，所述用户操作是模拟的虚拟操作，当执行所述测试用例时，首先确定目标网页，然后对目标网页执行所述用户操作，在执行所述用户操作之后，目标网页的界面会发生跳转或发生改变，则得到所述用户界面。

步骤S702，在所述用户界面上，根据所述测试用例确定目标区域。

这里，所述目标区域可以是所述用户界面的整个区域，也可以是所述用户界面的部分区域。在所述测试用例中，规定了需要截取图像的所述目标区域，因此，在跳转到所述用户界面或者变到所述用户界面之后，根据测试用例的规定，确定所述目标区域。

步骤S703，对所述目标区域进行截图处理，以得到所述待测试UI图像。

这里，在确定所述目标区域之后，对所述目标区域的界面进行截图处理，以截取所述目标区域的图像，得到所述待测试UI图像。本申请实施例中，可以采用Casperjs框架实现对目标区域的截图处理。

本申请实施例提供的UI测试方法，首先确定所述测试用例对应的用户操作和执行所述用户操作后对应的用户界面，然后在所述用户界面上，根据所述测试用例确定目标区域，最后对所述目标区域进行截图处理，以得到所述待测试UI图像。如此，通过直接截图的方式，能够准确快速的获取到符合测试用例需求的待测试UI图像。

下面，将说明本申请实施例在一个实际的应用场景中的示例性应用。

本申请实施例提出一种基于UI自动化测试的像素对比方法(即上述UI测试方法)：首先，从前端页面接收设计稿图片及需要截取的网站地址与节点信息，将原设计稿作为基准图(对应上述目标参考图像)存放在指定目录，并且指定好像素对比结果(对应上述对比结果)的截图存放目录；然后，开启子进程，启动Casperjs，执行测试用例，例如，全屏截图、点击截图等，完成对目标网站的截取；再然后，在本地存储设备上查找原基准图，通过Resemble.js将截取图与基准图进行比对，若没有找到基准图则将截图作为基准图，不做比对；若找到基准图则进行比对，将图片转为Canvas后，获取其图像像素点，之后对每个像素点进行一次比对，若存在像素差异，则将比对结果图片存放于初始化的文件目录下，其中，所述基准图可以是由设计师出的设计稿。

本申请实施例的方法适用于大部分UI自动化测试的场景，操作动作监听点击、单击、双击等任意一种事件，包括点击跳转或点击不跳转，操作对象为层叠样式表(CSS，Cascading Style Sheets)选择器，操作预期结果是截图与基准图无差异则测试通过，有差异就测试不通过。

图8是本申请实施例UI测试方法的像素对比框架示意图，如图8所示，实现本申请实施例UI测试的工具可以包括：PhantomFlow框架801、Casperjs框架802和PhantomCSS框架803。

其中，所述PhantomFlow框架801能够提供一种简单的方式来组织用户操作流，并且生成可视化的测试报告，以向用户呈现测试结果。

所述Casperjs框架802能够提供虚拟浏览器环境、一系列的模拟用户操作的方法和一些测试类的方法，从而实现测试过程的准确有序进行。

所述PhantomCSS框架803用于在模拟用户操作并执行之后，截取UI界面以得到所述待测试UI图像。

本申请实施例通过多个框架之间的协同工作，从而实现了本申请实施例的UI测试方法。

在一些实施例中，在对所述待测试UI图像与基准图进行对比时，还需要使用到图像像素对比工具，例如，本申请实施例中，可以采用Resemble.js框架作为所述图像像素对比工具，实现对所述待测试UI图与所述基准图的对比。图9是本申请实施例Resemble.js框架作图片对比的原理图，如图9所示，Resembl e.js框架将待测试UI图像的每一像素点的像素值与基准图的对应像素点的像素值进行对比，如图9中示出了将待测试UI图像中的三个像素点(示例性的示出了像素点901a、像素点901b和像素点901c)的像素值与基准图的对应的三个像素点(示例性的示出了像素点902a、像素点902b和像素点902c)的像素值进行对比。其中，每一像素点均包括红绿蓝三色像素值(图9中以R表示红色、G表示绿色、B表示蓝色)和透明度值(如图9中以A表示透明度值)。

在进行测试的过程中，PhantomFlow框架801生成可视化测试报告，如图10所示，是本申请实施例生成可视化测试报告的界面图，在界面1010上，包括位于左侧的选择菜单1011和右侧的结果展示区1012，所述选择菜单1011可以选择显示全部待测试UI图像(ALL)，当选择某一待测试UI图像时，在右侧的结果展示区1012中即可显示该待测试UI图像的对比结果。

如图10中结果展示区1012中示出了当前待测试UI图像的对比结果，其中，鼠标移动到结果展示区1012的任意一个圆点上，即可查看视觉测试结果。在一些实施例中，圆点可以具有不同的颜色，如果圆点是红色的，则表明测试失败，如果圆点是绿色的，则表明测试成功。

图11是本申请实施例中可视化测试报告的一条操作流程图，如图11所示，以视频播放对应的可视化测试报告生成过程为例，在生成可视化测试报告时，首先输入控制指令111以请求转到播放索引，例如可以通过指令“flows/playin dex.test.js/go to playindex”实现，然后在容器(示例性的示出了容器112a和主要容器112b)中存储控制指令，并形成推荐信息113，最后，根据形成可视化测试报告的头文件114、滑动条115、热门视频更新116、按小时排序117、按天排序118和页尾119等指令，实现对可视化测试报告的头文件访问1141、滑动条改变1151、更新热门视频1161、按小时排序1171、按天排序1181和页尾访问1191。

在一些实施例中，提供一种UI测试方法，如图12所示，是本申请实施例提供的UI测试方法的可选流程示意图，所述方法包括以下步骤：

步骤S1201，初始化截图存放目录和像素对比结果存放目录。

这里，所述截图存放目录用于存放截图得到的待测试UI图像(即截取图)，所述截图存放目录可以是本地存储单元中的部分存储子单元，或者云端存储设备的存储子单元。

所述像素对比结果存放目录对应上述的对比结果库，用于存储进行像素对比之后所得到的对比结果。所述像素对比结果存放目录也可以是本地存储单元中的部分存储子单元，或者是云端存储设备的存储子单元。

步骤S1202，模拟浏览器打开目标网址，设置网页视窗的高度和宽度。

步骤S1203，执行测试用例以模拟用户操作，对指定区域进行截图。

这里，通过对指定区域进行截图之后所得到截取图对应上述的待测试UI图像。本申请实施例中，对所截取的截取图进行UI测试分析。

步骤S1204，判断基准图是否已存在。

如果判断结果为否，则执行步骤S1205；如果判断结果为是，则执行步骤S106。

步骤S1205，将截取图作为基准图。

步骤S1206，截取新的图片与基准图进行对比，得到对比结果。

步骤S1207，根据所述对比结果，判断新的图片与基准图之间是否存在像素差异。

如果判断结果为是，则执行步骤S1208；如果判断结果为否，则步骤S1203返回步骤S1203继续执行下一条测试用例。

步骤S1208，在测试失败目录中生成对比图。

本申请实施例提供的UI测试方法，可以用于实现回归测试或者功能测试。通过从前端页面接收设计稿图片及需要截取的网站地址与节点信息，将原设计稿作为基准图存放在指定目录，并且指定好像素对比结果的截图存放目录；然后，开启子进程，启动Casperjs，执行测试用例，如全屏截图、点击截图等，完成对目标网站的截取；再然后，从本地查找原基准图，通过Resemblejs将截取图与基准图进行比对，若没有找到基准图将截图作为基准图，并不做比对，若找到基准图则进行比对，将图片转为Canvas后，获取其图像像素点，之后对每个像素点进行一次比对，若存在像素差异，则将比对结果图片存放于初始化的文件目录下，通过Phantomflow生成对比图。Phantomflow将每一条测试用例的测试结果展现在一个可视化报表中，也提供了单独查看某一个测试结果的功能。

本申请实施例提供的UI测试方法，通过UI自动化测试，用于实现功能测试和回归测试，在版本发布之前自动运行一遍编写的测试用例，通过像素对比的方法简单直观的查看测试结果，再次验证以前发现和修复的错误是否在新软件版本上再次出现，保证了产品质量，代替了大量的人工操作。

下面继续说明本申请实施例提供的UI测试装置254的实施为软件模块的示例性结构，在一些实施例中，如图2所示，存储在存储器250的UI测试装置254中的软件模块可以包括：

第一获取模块2541，用于在执行测试用例的界面上，获取待测试UI图像；

第二获取模块2542，用于在参考图像库中，获取与所述测试用例的标识对应的目标参考图像；

对比模块2543，用于采用图像像素对比工具，将所述待测试UI图像与目标参考图像进行图像像素对比，得到对比结果；

确定模块2544，用于根据所述对比结果确定所述UI测试的测试结果，并输出所述测试结果。

在一些实施例中，所述装置还包括：更新模块，用于在确定出所述测试结果之后，根据所述测试结果更新所述测试用例。

在一些实施例中，所述对比模块还用于：对所述待测试UI图像进行基于像素点的数值化处理，得到每一像素点的像素值；将所述待测试UI图像的每一像素点的像素值，与所述目标参考图像的对应像素点的像素值进行对比，得到所述对比结果。

在一些实施例中，所述装置还包括：第一处理模块，用于如果在所述参考图像库中能够获取到与所述测试用例的标识对应的目标参考图像，则将所述待测试UI图像与所述目标参考图像进行图像像素对比；第二处理模块，用于如果在所述参考图像库中不能获取到与所述测试用例的标识对应的目标参考图像，将所述待测试UI图像作为与所述测试用例的标识对应的目标参考图像存储至所述参考图像库中，并禁止对所述待测试UI图像与目标参考图像进行图像像素对比。

在一些实施例中，所述装置还包括：设置模块，用于在执行测试用例之前，在预设存储单元中设置用于存储所述目标参考图像的所述参考图像库和用于存储所述对比结果的对比结果库；对应地，所述装置还包括存储模块，用于在得到所述对比结果之后，将所述对比结果和所述对比结果与所述测试用例的标识之间的对应关系存储至所述对比结果库中。

在一些实施例中，所述第一获取模块还用于：确定所述测试用例对应的用户操作和执行所述用户操作后对应的用户界面；在所述用户界面上，根据所述测试用例确定目标区域；对所述目标区域进行截图处理，以得到所述待测试UI图像。

在一些实施例中，所述确定模块还用于：当所述对比结果表明所述待测试图像具有至少一个像素点与所述目标参考图像的对应像素点存在差异时，将所述测试结果确定为测试不通过。

需要说明的是，本申请实施例装置的描述，与上述方法实施例的描述是类似的，具有同方法实施例相似的有益效果，因此不做赘述。对于本装置实施例中未披露的技术细节，请参照本申请方法实施例的描述而理解。

本申请实施例提供一种存储有可执行指令的存储介质，其中存储有可执行指令，当可执行指令被处理器执行时，将引起处理器执行本申请实施例提供的方法，例如，如图3示出的方法。

在一些实施例中，存储介质可以是铁电存储器(FRAM，Ferromagnetic RandomAccess Memory)、只读存储器(ROM，ReadOnly Memory)、可编程只读存储器(PROM，Programmable Read Only Memory)、可擦除可编程只读存储器(EPROM，ErasableProgrammable Read Only Memory)、带电可擦可编程只读存储器(EEPROM，ElectricallyErasable Programmable Read Only Memory)、闪存、磁表面存储器、光盘、或光盘只读存储器(CD-ROM，Compact Disk-Read Only Memory)等存储器；也可以是包括上述存储器之一或任意组合的各种设备。

在一些实施例中，可执行指令可以采用程序、软件、软件模块、脚本或代码的形式，按任意形式的编程语言(包括编译或解释语言，或者声明性或过程性语言)来编写，并且其可按任意形式部署，包括被部署为独立的程序或者被部署为模块、组件、子例程或者适合在计算环境中使用的其它单元。

作为示例，可执行指令可以但不一定对应于文件系统中的文件，可以可被存储在保存其它程序或数据的文件的一部分，例如，存储在超文本标记语言(HTML，HyperTextMarkup Language)文档中的一个或多个脚本中，存储在专用于所讨论的程序的单个文件中，或者，存储在多个协同文件(例如，存储一个或多个模块、子程序或代码部分的文件)中。作为示例，可执行指令可被部署为在一个计算设备上执行，或者在位于一个地点的多个计算设备上执行，又或者，在分布在多个地点且通过通信网络互连的多个计算设备上执行。

以上所述，仅为本申请的实施例而已，并非用于限定本申请的保护范围。凡在本申请的精神和范围之内所作的任何修改、等同替换和改进等，均包含在本申请的保护范围之内。

Claims (11)

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

在执行测试用例的界面上，获取待测试UI图像；

在参考图像库中，获取与所述测试用例的标识对应的目标参考图像；

采用图像像素对比工具，将所述待测试UI图像与目标参考图像进行图像像素对比，得到对比结果；

根据所述对比结果确定所述UI测试的测试结果，并输出所述测试结果。

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

在确定出所述测试结果之后，根据所述测试结果更新所述测试用例。

3.根据权利要求1所述的方法，其特征在于，所述采用图像像素对比工具，将所述待测试UI图像与目标参考图像进行图像像素对比，得到对比结果，包括：

对所述待测试UI图像进行基于像素点的数值化处理，得到每一像素点的像素值；

将所述待测试UI图像的每一像素点的像素值，与所述目标参考图像的对应像素点的像素值进行对比，得到所述对比结果。

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

如果在所述参考图像库中能够获取到与所述测试用例的标识对应的目标参考图像，则将所述待测试UI图像与所述目标参考图像进行图像像素对比；

如果在所述参考图像库中不能获取到与所述测试用例的标识对应的目标参考图像，将所述待测试UI图像作为与所述测试用例的标识对应的目标参考图像存储至所述参考图像库中，并禁止对所述待测试UI图像与目标参考图像进行图像像素对比。

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

在执行测试用例之前，在预设存储单元中设置用于存储所述目标参考图像的所述参考图像库和用于存储所述对比结果的对比结果库；

对应地，在得到所述对比结果之后，将所述对比结果和所述对比结果与所述测试用例的标识之间的对应关系存储至所述对比结果库中。

6.根据权利要求1所述的方法，其特征在于，所述在执行测试用例的界面上，获取待测试UI图像，包括：

确定所述测试用例对应的用户操作和执行所述用户操作后对应的用户界面；

在所述用户界面上，根据所述测试用例确定目标区域；

对所述目标区域进行截图处理，以得到所述待测试UI图像。

7.根据权利要求1至6任一项所述的方法，其特征在于，所述根据所述对比结果确定所述UI测试的测试结果，包括：

当所述对比结果表明所述待测试图像具有至少一个像素点与所述目标参考图像的对应像素点存在差异时，将所述测试结果确定为测试不通过。

8.根据权利要求1至6任一项所述的方法，其特征在于，所述方法还包括：

将所述测试结果存储于预设的可视化展示报表中；

当接收到测试结果查看请求时，在所述可视化展示报表中查找与所述测试结果查看请求对应的目标测试结果；

显示所述目标测试结果。

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

第一获取模块，用于在执行测试用例的界面上，获取待测试UI图像；

第二获取模块，用于在参考图像库中，获取与所述测试用例的标识对应的目标参考图像；

对比模块，用于采用图像像素对比工具，将所述待测试UI图像与目标参考图像进行图像像素对比，得到对比结果；

确定模块，用于根据所述对比结果确定所述UI测试的测试结果，并输出所述测试结果。

10.一种UI测试设备，其特征在于，包括：

存储器，用于存储可执行指令；处理器，用于执行所述存储器中存储的可执行指令时，实现权利要求1至8任一项所述的方法。

11.一种存储介质，其特征在于，存储有可执行指令，用于引起处理器执行时，实现权利要求1至8任一项所述的方法。

Images