图像断言方法、装置、存储介质、计算机设备制造方法及图纸

本申请提供了一种图像断言方法、装置、存储介质、计算机设备。该图像断言方法包括：在基于Cypress框架对UI界面进行测试时，接收调试代理工具发送的mock数据；基于测试前端项目和mock数据构建UI界面；对UI界面进行截图，得到目标图像；计算目标图像与参考图像的相似度；在相似度小于相似度阈值的情况下，确定测试前端项目测试不通过。该方法可提高测试稳定性，保证测试效果。保证测试效果。保证测试效果。

【技术实现步骤摘要】
图像断言方法、装置、存储介质、计算机设备


[0001]本申请涉及软件测试
，尤其涉及一种图像断言方法、装置、存储介质、计算机设备。

技术介绍

[0002]在基于浏览器/服务器架构的web应用程序实现UI(User Interface，用户界面)自动化测试实践中，需要在一定的自动化测试框架通过模拟用户在浏览器端对UI界面的操作实现自动化测试。而传统的自动化测试框架在进行图像断言时常常会出现误判，导致测试效果较差。

技术实现思路

[0003]本申请的目的旨在至少能解决上述的技术缺陷之一，特别是现有技术中断言不准确的技术缺陷。
[0004]第一方面，本申请提供了一种图像断言方法，包括：
[0005]在基于Cypress框架进行UI自动化测试时，接收调试代理工具发送的mock数据；
[0006]基于测试前端项目和mock数据构建UI界面；
[0007]对UI界面进行截图，得到目标图像；
[0008]计算目标图像与参考图像的相似度；
[0009]在相似度小于相似度阈值的情况下，确定测试前端项目测试不通过。
[0010]在其中一个实施例中，调试代理工具配置于服务器和浏览器之间，用于在接收到服务器向浏览器发送的渲染数据时，根据渲染数据向mock服务器请求mock数据并发送至浏览器。
[0011]在其中一个实施例中，在确定测试前端项目测试不通过后，还包括：
[0012]判断相似度所属的区间；
[0013]在相似度属于第一区间时，提示代码漏洞存在于测试前端项目的渲染代码；
[0014]在相似度属于第二区间时，提示代码漏洞存在于测试前端项目的样式代码；第二区间中的相似度小于第一区间中的相似度。
[0015]在其中一个实施例中，渲染代码包括js文件，样式代码包括css文件。
[0016]在其中一个实施例中，计算目标图像与参考图像的相似度，包括：
[0017]对目标图像和参考图像进行二值化处理；
[0018]判断二值化处理后的目标图像和参考图像各相同位置处的像素点是否具有相同的像素值；
[0019]根据判断结果，统计相同像素点的数量；相同像素点为目标图像和参考图像相同位置处具有相同像素值的像素点；
[0020]根据相同像素点的数量与总像素点数量，确定目标图像与参考图像的相似度。
[0021]在其中一个实施例中，调试代理工具为whistle工具。
[0022]第二方面，本申请实施例提供一种图像断言装置，包括：
[0023]接收模块，用于在基于Cypress框架进行UI自动化测试时，接收调试代理工具发送的mock数据；
[0024]构建模块，用于基于测试前端项目和mock数据构建UI界面；
[0025]截图模块，用于对UI界面进行截图，得到目标图像；
[0026]相似度计算模块，用于计算目标图像与参考图像的相似度；
[0027]判断模块，用于在相似度小于相似度阈值的情况下，确定测试前端项目测试不通过。
[0028]在其中一个实施例中，还包括提示模块，提示模块用于判断相似度所属的区间；在相似度属于第一区间时，提示代码漏洞存在于测试前端项目的渲染代码；在相似度属于第二区间时，提示代码漏洞存在于测试前端项目的样式代码；第二区间中的相似度小于第一区间中的相似度。
[0029]第三方面，本申请实施例提供一种存储介质：存储介质中存储有计算机可读指令，计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行如上述任一实施例中的图像断言方法的步骤。
[0030]第四方面，本申请实施例提供一种计算机设备，包括：一个或多个处理器，以及存储器；
[0031]存储器中存储有计算机可读指令，计算机可读指令被一个或多个处理器执行时，执行如上述任一实施例中的图像断言方法的步骤。
[0032]从以上技术方案可以看出，本申请实施例具有以下优点：
[0033]基于上述任一实施例，结合Cypress自动化测试框架和调试代理工具，在浏览器需要渲染数据渲染UI界面时，将稳定的mock数据传输给浏览器，以保证测试前端项目可以顺利构建UI界面，再基于对UI界面截图得到的目标图像和参考图像之间的相似度，确定测试前端项目是否通过测试。该方法可提高测试稳定性，保证测试效果。
附图说明
[0034]为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其它的附图。
[0035]图1为本申请实施例提供的图像断言方法的流程示意图；
[0036]图2为本申请实施例提供的图像断言装置的模块结构图；
[0037]图3为本申请实施例提供的计算机设备的内部结构图。
具体实施方式
[0038]下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
[0039]第一方面，本申请提供了一种图像断言方法。断言在程序中即为一种逻辑判断。当程序执行到断言位置处时，如果满足相应的条件，则可以继续执行下面的语句。如果不满足，则会中断执行。而图像断言则是判断图像是否满足一定条件，以决定是否要中止执行。图像断言常常被用在软件测试场景下。请参阅图1，该方法包括步骤S102至步骤S110。
[0040]S102，在基于Cypress框架进行UI自动化测试时，接收调试代理工具发送的mock数据。
[0041]本申请针对的自动化测试框架为Cypress框架，Cypress框架可以在浏览器内部运行测试用例，使得其能够在运行时通过操纵DOM(Document Object Model，文档对象模型)和动态修改网络请求和响应来监听和修改浏览器行为，以实现对在浏览器中呈现的Web应用程序的UI界面进行测试。本公开即是从运行在Cypress框架下的浏览器的角度描述方案。调试代理工具是配置于浏览器和服务器之间的一种工具。在不使用调试代理工具时，浏览器通过向服务器发送请求即可访问相应的服务，服务器响应浏览器的请求即可向浏览器反馈浏览器需要的数据。而调试代理工具既可以截取浏览器发送的请求，也可截取服务器向浏览器反馈的数据。相当于调试代理工具成为了浏览器的服务器，且成为了服务器的客户端。
[0042]传统技术中，浏览器会运行测试前端项目，以在浏览器展示出待测试的界面，而为了运行测试前端项目，需要从服务器的真实业务接口处获取数据进行界面渲染。但服务器处的相关接口服务可能也存在问题，导致返回给浏览器的渲染数据不稳定，从而使得即使测试前端项目没有问题，本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种图像断言方法，其特征在于，包括：在基于Cypress框架进行UI自动化测试时，接收调试代理工具发送的mock数据；基于测试前端项目和所述mock数据构建UI界面；对所述UI界面进行截图，得到目标图像；计算所述目标图像与参考图像的相似度；在所述相似度小于相似度阈值的情况下，确定所述测试前端项目测试不通过。2.根据权利要求1所述的方法，其特征在于，所述调试代理工具配置于服务器和浏览器之间，用于在接收到所述服务器向所述浏览器发送的渲染数据时，根据所述渲染数据向mock服务器请求所述mock数据并发送至所述浏览器。3.根据权利要求1所述的方法，其特征在于，在确定所述测试前端项目测试不通过后，还包括：判断所述相似度所属的区间；在所述相似度属于第一区间时，提示代码漏洞存在于所述测试前端项目的渲染代码；在所述相似度属于第二区间时，提示代码漏洞存在于所述测试前端项目的样式代码；所述第二区间中的相似度小于所述第一区间中的相似度。4.根据权利要求3所述的方法，其特征在于，所述渲染代码包括js文件，所述样式代码包括css文件。5.根据权利要求1所述的方法，其特征在于，所述计算所述目标图像与参考图像的相似度，包括：对所述目标图像和所述参考图像进行二值化处理；判断二值化处理后的所述目标图像和所述参考图像各相同位置处的像素点是否具有相同的像素值；根据判断结果，统计相同像素点的数量；所述相同像素点为所述目标图像和所述参考图像相同位置处具有相同像素值...

【专利技术属性】
技术研发人员：张志腾，古知己，
申请(专利权)人：广州品唯软件有限公司，
类型：发明
国别省市：