CN116955138A - 一种验收方法、装置、设备及存储介质 - Google Patents

一种验收方法、装置、设备及存储介质 Download PDF

Info

Publication number
CN116955138A
CN116955138A CN202210998681.XA CN202210998681A CN116955138A CN 116955138 A CN116955138 A CN 116955138A CN 202210998681 A CN202210998681 A CN 202210998681A CN 116955138 A CN116955138 A CN 116955138A
Authority
CN
China
Prior art keywords
page
manuscript
screenshot
rendering result
difference
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202210998681.XA
Other languages
English (en)
Inventor
潘治颖
李家慧
乔丰
卜昌郁
许利群
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
China Mobile Communications Group Co Ltd
China Mobile Chengdu ICT Co Ltd
Original Assignee
China Mobile Communications Group Co Ltd
China Mobile Chengdu ICT Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by China Mobile Communications Group Co Ltd, China Mobile Chengdu ICT Co Ltd filed Critical China Mobile Communications Group Co Ltd
Priority to CN202210998681.XA priority Critical patent/CN116955138A/zh
Publication of CN116955138A publication Critical patent/CN116955138A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00—Error detection; Error correction; Monitoring
    • G06F11/36—Preventing errors by testing or debugging software
    • G06F11/3668—Software testing
    • G06F11/3672—Test management
    • G06F11/3688—Test management for test execution, e.g. scheduling of test suites
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00—Error detection; Error correction; Monitoring
    • G06F11/36—Preventing errors by testing or debugging software
    • G06F11/3668—Software testing
    • G06F11/3672—Test management
    • G06F11/3692—Test management for test results analysis
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06V—IMAGE OR VIDEO RECOGNITION OR UNDERSTANDING
    • G06V10/00—Arrangements for image or video recognition or understanding
    • G06V10/70—Arrangements for image or video recognition or understanding using pattern recognition or machine learning
    • G06V10/74—Image or video pattern matching; Proximity measures in feature spaces
    • G06V10/75—Organisation of the matching processes, e.g. simultaneous or sequential comparisons of image or video features; Coarse-fine approaches, e.g. multi-scale approaches; using context analysis; Selection of dictionaries

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computer Hardware Design (AREA)
  • Quality & Reliability (AREA)
  • General Engineering & Computer Science (AREA)
  • Computer Vision & Pattern Recognition (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Computing Systems (AREA)
  • Databases & Information Systems (AREA)
  • Evolutionary Computation (AREA)
  • General Health & Medical Sciences (AREA)
  • Medical Informatics (AREA)
  • Software Systems (AREA)
  • Multimedia (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本申请实施例提供了一种验收方法、装置、设备及存储介质，其中，所述方法包括：获取UI稿、每一页所述UI稿对应渲染结果页的URL以及每一页面对应的前端代码；获取模拟生成的浏览器环境，所述浏览器环境包括每一渲染结果页中主体的宽高信息；运行所述前端代码生成模拟浏览器，在所述浏览器环境下访问每一所述渲染结果页的URL并将运行结果进行页面截图；将每一页所述UI稿与对应页面截图进行分析对比，得到样式上的差异信息；基于样式上的差异信息生成验收报告。其中，验收报告的内容包括每一页UI稿与对应页面截图共存在几处差异以及每一处差异的具体体现。

Description

一种验收方法、装置、设备及存储介质
技术领域
本申请涉及互联网技术领域，特别涉及一种验收方法、装置、设备及存储介质。
背景技术
目前业务开发的一般流程为：产品文档设计、用户界面(User Interface，UI)稿设计、前后端开发、功能测试、UI验收。其中，UI验收是一个反复且琐碎的环节。不仅需要UI设计者逐帧对比渲染结果页与UI稿是否完全一致，0.5像素(pixel，px)的异常都需要精准找出，还需要开发者根据修改意见进行修改，然后UI设计者再进行二次验收，如此循环往复，极大地增加了人力成本和交流成本。
发明内容
有鉴于此，本申请实施例提供一种验收方法、装置、设备及存储介质。
第一方面，本申请实施例提供了一种验收方法，所述方法包括：获取UI稿、每一页所述UI稿对应页面的统一资源定位器(Uniform Resource Locator，URL)以及每一所述页面对应的前端代码；获取模拟生成的浏览器环境，所述浏览器环境包括每一渲染结果页中主体(body)的宽高信息；运行所述前端代码生成模拟浏览器，在所述浏览器环境下访问每一所述渲染结果页的URL并将运行结果进行页面截图；将每一页所述UI稿与对应页面截图进行分析对比，得到样式上的差异信息；基于样式上的差异信息生成验收报告。
第二方面，本申请实施例提供了一种验收装置，所述装置包括：第一获取模块，用于获取UI稿、每一页所述UI稿对应渲染结果页的URL以及每一页面对应的前端代码；第二获取模块，用于获取模拟生成的浏览器环境，所述浏览器环境包括每一渲染结果页中主体的宽高信息；调用模块，用于运行所述前端代码生成模拟浏览器，在所述浏览器环境下访问每一所述渲染结果页的URL并将运行结果进行页面截图；第一对比模块，用于将每一页所述UI稿与对应页面截图进行分析对比，得到样式上的差异信息；第一生成模块，用于基于样式上的差异信息生成验收报告。
第三方面，本申请实施例提供了一种计算机设备，包括：存储器和处理器，所述存储器存储有可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述任一方法中的步骤。
第四方面，本申请实施例提供了一种计算机存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述任一方法中的步骤。
本申请实施例中，采用模拟浏览器环境渲染页面，对UI稿进行渲染并对渲染结果页进行页面截图，省去用户手动录入待验收节点以及预先设定UI视觉验收规范等步骤；通过将UI稿与对应页面截图进行像素级分析对比，最终获得渲染结果页与UI稿的差异之处，可较大幅度的提升对比精度。
附图说明
图1为本申请实施例提供的一种验收方法的流程示意图；
图2为本申请实施例提供的UI稿特征图和页面截图的特征图逐点遍历过程示意图；
图3为本申请实施例提供的待对比坐标点与周围坐标点的关系示意图；
图4为本申请实施例提供的UI稿与对应页面截图的对比实现流程示意图；
图5为本申请实施例提供的一种验收方法的流程示意图；
图6为本申请实施例提供的一种验收装置的组成结构示意图；
图7为本申请实施例提供的一种验收装置的组成框架示意图；
图8为本申请实施例中电子设备的一种硬件实体示意图。
具体实施方式
为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。以下实施例用于说明本申请，但不用来限制本申请的范围。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
在以下的描述中，涉及到“一些实施例”，其描述了所有可能实施例的子集，但是可以理解，“一些实施例”可以是所有可能实施例的相同子集或不同子集，并且可以在不冲突的情况下相互结合。
需要指出，本申请实施例所涉及的术语“第一\第二\第三”仅是区别类似的对象，不代表针对对象的特定排序，可以理解地，“第一\第二\第三”在允许的情况下可以互换特定的顺序或先后次序，以使这里描述的本申请实施例能够以除了在这里图示或描述的以外的顺序实施。
本技术领域技术人员可以理解，除非另外定义，这里使用的所有术语(包括技术术语和科学术语)，具有与本申请实施例所属领域中的普通技术人员的一般理解相同的意义。还应该理解的是，诸如通用字典中定义的那些术语，应该被理解为具有与现有技术的上下文中的意义一致的意义，并且除非像这里一样被特定定义，否则不会用理想化或过于正式的含义来解释。
对本申请实施例进行详细说明之前，对本申请实施例中涉及的名词和术语进行说明，本申请实施例中涉及的名词和术语适用于如下的解释：
TypeScript，是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。
汉明距离，是使用在数据传输差错控制编码里面的，汉明距离是一个概念，它表示两个(相同长度)字符串对应位置的不同字符的数量，我们以d(x,y)表示两个字x，y之间的汉明距离。对两个字符串进行异或运算，并统计结果为1的个数，那么这个数就是汉明距离。
仿射变换，又称仿射映射，是指在几何中，一个向量空间进行一次线性变换并接上一个平移，变换为另一个向量空间。仿射变换是在几何上定义为两个向量空间之间的一个仿射变换或者仿射映射由一个非奇异的线性变换，运用一次函数进行的变换，接上一个平移变换组成。在有限维的情况，每个仿射变换可以由一个矩阵A和一个向量b给出，它可以写作A和一个附加的列b。一个仿射变换对应于一个矩阵和一个向量的乘法，而仿射变换的复合对应于普通的矩阵乘法，只要加入一个额外的行到矩阵的底下，这一行全部是0除了最右边是一个1，而列向量的底下要加上一个1。
鲁棒(Robust)，是健壮和强壮的意思。它也是在异常和危险情况下系统生存的能力。比如说，计算机软件在输入错误、磁盘故障、网络过载或有意攻击情况下，能否不死机、不崩溃，就是该软件的鲁棒性。所谓“鲁棒性”，也是指控制系统在一定(结构，大小)的参数摄动下，维持其他某些性能的特性。基于对性能的不同定义，可分为稳定鲁棒性和性能鲁棒性。以闭环系统的鲁棒性作为目标设计得到的固定控制器称为鲁棒控制器。
描述符，是某个类，只要是内部定义了方法get、set、delete中的一个或多个，就可以称为描述符，描述符的本质是一个类。
特征提取，是图像处理中的一个初级运算，也就是说它是对一个图像进行的第一个运算处理。它检查每个像素来确定该像素是否代表一个特征。假如它是一个更大的算法的一部分，那么这个算法一般只检查图像的特征区域。作为特征提取的一个前提运算，输入图像一般通过高斯模糊核在尺度空间中被平滑。此后通过局部导数运算来计算图像的一个或多个特征。由于许多计算机图像算法使用特征提取作为其初级计算步骤，因此有大量特征提取算法被发展，其提取的特征各种各样，它们的计算复杂性和可重复性也非常不同。
字符串或串(String)是由数字、字母、下划线组成的一串字符。它是编程语言中表示文本的数据类型。
维度(Dimensionality)，又称为维数，是数学中独立参数的数目。在物理学和哲学的领域内，指独立的时空坐标的数目。0维是一个无限小的点，没有长度。1维是一条无限长的直线，只有长度。2维是一个平面，是由长度和宽度(或部分曲线)组成面积。3维是2维加上高度组成体积。4维分为时间上和空间上的4维，人们说的4维通常是指关于物体在时间线上的转移。
协方差(Covariance)，是在概率论和统计学中用于衡量两个变量的总体误差。而方差是协方差的一种特殊情况，即当两个变量是相同的情况。协方差表示的是两个变量的总体的误差，这与只表示一个变量误差的方差不同。如果两个变量的变化趋势一致，也就是说如果其中一个大于自身的期望值，另外一个也大于自身的期望值，那么两个变量之间的协方差就是正值。如果两个变量的变化趋势相反，即其中一个大于自身的期望值，另外一个却小于自身的期望值，那么两个变量之间的协方差就是负值。
欧式距离，一般是指欧几里得度量。在数学中，欧几里得距离或欧几里得度量是欧几里得空间中两点间“普通”(即直线)距离。使用这个距离，欧氏空间成为度量空间。相关联的范数称为欧几里得范数。较早的文献称之为毕达哥拉斯度量。
感知哈希算法(Perceptual Hash Algorithm)，它的作用是对每张图像生成一个“指纹”(Fingerprint)字符串，然后比较不同图像的指纹。结果越接近，就说明图像越相似。
相关技术中的一种用户界面视觉验收的处理方法包括：首先获取目标软件待验收节点对应上传的UI效果图，以及获取与所述待验收节点对应预先设定的UI视觉验收规范；然后将所述UI效果图与所述UI视觉验收规范进行匹配分析，得到所述待验收节点对应的UI视觉验收结果。该技术需要用户录入待验收节点对应预先设定的UI视觉验收规范，也就是说用户需要将所述UI效果图中详细的UI细节逐个手动录入系统。
本申请采用Node.js模拟浏览器环境渲染页面并截屏的方式，只需用户录入目标检测页面的可用链接，既可导出实际渲染效果，并不需要用户手动录入待验收节点对应预先设定的UI视觉验收规范。并且本申请对实际渲染页面效果与UI效果图差异识别的图像差异对比算法进行了详细描述，采用关键点检测及匹配的方式获取两对比图像中特征点，再对两图像进行仿射变换使得两图像对齐，创建一种建模方法逐像素对比两图像的差异之处，并使用ImageNet等开源数据集预训练模型进行UI稿和页面截图进行特征提取，对UI效果图和实际渲染页面进行关键点检测与匹配，并创建了一种建模方法对比两个特征图差异，最终对差异之处做色彩、文字、尺寸等具体分析并统计，并将差异之处的具体差异信息并整理至验收报告中，这种方法可实现两图像的自动对比，且可较大幅度的提升对比精度。
本申请实施例提供的一种验收方法的流程示意图，如图1所示，至少包括以下步骤：
步骤S110，获取UI稿、每一页所述UI稿对应渲染结果页的URL以及每一页面对应的前端代码。
在本申请实施例中，UI稿可以是将执行所述用户操作之后的整个界面确定为所述UI稿，或者，将执行所述用户操作之后的界面中的部分区域确定为所述UI稿；在获取所述UI稿时，可以采用截图的方式获取图像，以得到所述UI稿。URL是由一串字符组成，这些字符可以是字母，数字和特殊符号，一个URL可以用多种方法来表现。例如：纸上的字迹，或者是用字符集编码的八位字节序列。获取每一页面对应的前端代码，用于将获取的渲染结果页进行页面对比和页面截图。
步骤S120，获取模拟生成的浏览器环境，所述浏览器环境包括每一渲染结果页中主体的宽高信息。
在本申请实施例中，可以采用Node.js模拟浏览器环境，其中，模拟的浏览器环境包括每一页UI稿的适配场景和宽高的要求，以及基于每一页UI稿的适配场景和宽高设置对应的渲染结果页中主体的宽高信息，其中，适配场景可以为mobile(手机)端或个人电脑(Personal computer，PC)端。
在一些实施例中，获取所述每一渲染结果页中主体的宽高信息，包括：获取每一页所述UI稿的适配场景和宽高要求信息；基于每一页所述UI稿的适配场景和宽高要求信息，设置对应的渲染结果页中主体的宽高信息。
在本申请实施例中，获取UI稿的适配场景和宽高的要求，并输入UI的标准大小，以及基于每一页UI稿的适配场景和宽高要求设置对应的渲染结果页中主体的宽高信息，其中，适配场景可以为mobile端或PC端。
在一些实施例中，在执行步骤S130之前，所述方法还包括：基于所述前端代码的仓库中的typescript声明，确定每一渲染结果页中字段所需的数据结构和每个字段的类型；基于字段所需的数据结构和每个字段的类型，对比每一页所述UI稿中的字段和对应的渲染结果页中的字段，基于所述比对结果，生成对应渲染结果页的接口返回数据结果。
在本申请实施例中，基于获取的每一页面对应的前端代码中的typescript声明，可以确定渲染结果页中所有字段所需的数据结构和每个字段的类型。基于确定的所有字段的数据结构和每个字段的类型，对比UI稿和渲染结果页中的所有字段的数据结构和每个字段的类型，静态生成接口返回数据结果，依此自动生成接口响应内容用于页面渲染得到渲染结果页。例如，UI稿中文本框的高度为100px，但是渲染结果页中文本框可能会因为数据过多，导致文本框高度为200px，此时通过对比UI稿和渲染结果页中的所有字段的数据结构和每个字段的类型，得到渲染结果页中的文本高度差异，虽然文本高度差异并不属于异常UI，但是应该屏蔽这样的数据差异，静态生成接口返回数据结果，纠正文本高度差异。
步骤S130，运行所述前端代码生成模拟浏览器，在所述浏览器环境下访问每一所述渲染结果页的URL并将运行结果进行页面截图。
在一些实施例中，步骤S130，运行所述前端代码生成模拟浏览器，在所述浏览器环境下访问每一所述渲染结果页的URL并将运行结果进行页面截图，包括：步骤S131至步骤S133。
步骤S131，基于渲染结果页中主体的宽高信息设置所述浏览器所渲染的页面大小。
步骤S132，运行所述前端代码生成模拟浏览器，在所述浏览器环境下访问每一所述渲染结果页的URL。
步骤S133，将所述每一所述渲染结果页进行页面截图。
在本申请实施例中，模拟浏览器由前端代码生成，可以是运行在服务器上的浏览器，用于执行浏览器的行为，比如点击、跳转、刷新等。基于设置的渲染结果页中主体的宽高信息，可以在Node.js中录入浏览器的可用链接生成浏览器环境，并设置浏览器所渲染的页面大小。调用在Node.js中设置的浏览器访问每一页渲染结果页的URL并运行对应的前端代码，将UI稿基于每一页渲染结果页的URL进行渲染，得到渲染结果页，运行对应渲染结果页前端代码中的typescript声明，对比UI稿和渲染结果页中的数据差异，若UI稿和渲染结果页中的数据有差异则通过对应渲染结果页中静态生成接口返回数据结果，纠正数据差异；若没有差异，将得到渲染结果页进行页面截图。
其中，Node.js可以生成动态页面内容，在服务器上创建、打开、读取、写入、删除和关闭文件等等。
步骤S140，将每一页所述UI稿与对应页面截图进行分析对比，得到样式上的差异信息。
在一些实施例中，所述样式上的差异信息包括特征图的差异信息和文字之间的差异信息。步骤S140，所述将每一页所述UI稿与对应页面截图进行分析对比，得到样式上的差异信息，包括：步骤S141至步骤S146，其中：
步骤S141，获取每一页所述UI稿与对应页面截图中的关键点。
在本申请实施例中，分别将页面截图与UI稿中的每个像素与其周围的N个像素的像素值做比较，得到每个像素与其周围的N个像素的差异值，可以将该N个差异值进行平均，得到平均差异值，也可以将该N个差异值进行相加，得到差异值总量。其中，周围的N个像素可以为该像素周围依次排列的16个像素，或者可以为该像素周围的2～3圈像素，像素值可以为红绿蓝(RGB，Red-Green-Blue)值(0～255)。例如，通过RGB值计算差异值，得出像素A与周围16个像素的平均差异值为128。
若得出的平均差异值超过预设的阈值，则将该像素设为初始关键点，并对所有选取出的初始关键点的平均差异值或差异值总量进行排序，将平均差异值或差异值总量在前M个的像素作为关键点。例如，预设的阈值可以为RGB值等于125，使平均差异值大于或等于125的像素设为初始关键点，如像素A设为初始关键点之一，并将得到的初始关键点基于平均差异值进行排序，排在前50的初始关键点作为关键点。其中，N、M、阈值的数值均可以基于实际情况进行设置。
步骤S142，将每一页所述UI稿中的关键点与对应页面截图中的关键点互相匹配。
可以理解的是每一页所述UI稿中的关键点与对应页面截图中的关键点互相匹配包括匹配错误和匹配正确。
在本申请实施例中，通过描述符匹配页面截图与UI稿中的关键点，并计算匹配的关键点之间的距离是否超过预设的阈值来判断关键点是否正确匹配，以此将每一页UI稿与对应页面截图中的关键点匹配起来。其中，关键点之间的距离可以通过欧式距离或汉明距离计算。例如，通过描述符匹配每一页UI稿与对应页面截图中的关键点，利用欧式距离计算匹配关键点之间的距离，若欧式距离小于或等于预设的3个像素，则两个关键点之间匹配正确；若欧式距离大于预设的3个像素，两个关键点之间匹配错误，即证明这两个关键点不匹配，需重新设置描述符，并对UI稿与对应页面截图中的关键点重新匹配。其中，阈值的数值可以基于实际情况进行设置。
步骤S143，基于匹配的关键点将每一页所述UI稿与对应页面截图进行仿射变换并对齐。
在本申请实施例中，通过将每一页UI稿与对应页面截图中匹配的关键点对两图像进行仿射变换，使页面截图与UI稿在尺寸、方向等方面匹配，即把每一页UI稿与对应页面截图对齐。
步骤S144，基于图像特征提取算法，分别提取对齐后的每一页所述UI稿的特征图与对应页面截图的特征图。
在本申请实施例中，可以使用ImageNet等开源数据集预训练模型对待对比的UI稿和页面截图进行特征提取，分别得到UI稿特征图D1和页面截图的特征图D2。其中，特征提取可以通过光学字符识别(Optical Character Recognition，OCR)、图卷积网络解析、谱聚类等方法提取，特征图可以是UI稿和页面截图中的各个元素。例如，可以是文字、图案、按钮等。
步骤S145，基于高斯分布假设序列判别方法，获取每一页所述UI稿的特征图与对应页面截图的特征图之间的差异信息。
步骤S146，基于文字识别技术方法，获取每一页所述UI稿与对应页面截图中文字之间的差异信息。
在一些实施例中，步骤S145，基于高斯分布假设序列判别方法，获取每一页所述UI稿的特征图与对应页面截图的特征图之间的差异信息，包括：步骤S1451至步骤S1452。
步骤S1451，确定每一页所述UI稿的特征图与对应页面截图的特征图之间对应像素的像素值之差。
在本申请实施例中，将页面截图的特征图和UI稿特征图的像素映射到网格坐标里，得到每个像素都是特征矩阵。由于经过步骤S141至步骤S143中的关键点匹配与仿射变换，已将UI稿和页面截图对齐，即UI稿特征图D1和页面截图的特征图D2也是对齐的，因此可直接对UI稿特征图D1和页面截图的特征图D2的按逐像素做差计算得到X'12，如公式(1)所示，此处X'12的维度与特征图维度相同，即两个特征图的像素值之差得出的X'12为一向量形式。
D1-D2＝X'12 (1)；
步骤S1452，基于所述高斯分布假设序列判别方法，基于所述像素值之差，获取每一页所述UI稿与对应页面截图的特征图之间的差异信息。
在本申请实施例中，经过步骤S1451将提取的两个特征图上对应像素的像素值经过做差计算后，因为X'12维度与特征图维度相同，即计算的两个特征图的之差中的每一个像素均为一向量形式，因此均值维度与两个特征图的像素值之差中每一像素的维度相同。假设计算后像素的向量都满足多维高斯分布，如公式(2)所示为高斯分布的概率密度函数，高斯模型的方差也使用协方差方式描述。
其中期望为μ＝(0，0……，0)，协方差Σ为特征各维度的方差，P(x|μ,Σ)表示计算UI稿特征图D1和页面截图的特征图D2的按像素之差后像素的概率分布情况。
图2中左图为UI稿特征图对应的网格坐标，图2中右图为页面截图的特征图对应的网格坐标。将UI稿特征图和页面截图的特征图对应的网格坐标中左上角的第一个像素对应的坐标点均设置为(0,0)，假设UI稿特征图中待对比坐标点(x,y)的特征向量为V(x,y)，同理，页面截图的特征图中待对比坐标点(e,f)的特征向量为V(e,f)，(x,y)->(e,f)代表UI稿特征图中坐标点(x,y)转移到页面截图的特征图中坐标点(e,f)的转移事件。图2示出了UI稿特征图和页面截图的特征图逐点遍历过程，包括：
1)当(x,y)＝(0,0)时，(x,y)->(e,f)的转移事件为UI稿特征图中坐标点(0,0)转移到页面截图的特征图中坐标点(0,0)，计算转移事件概率，可使用先验模型表示转移事件概率，如公式(3)所示。
P[(x,y)→(e,f)]＝P先验[V(x,y)-V(e,f)] (3)；
将公式(2)带入公式(3)中，得到当(x,y)＝(0,0)时，(x,y)->(e,f)的转移事件概率。
2)当(x,y)≠(0,0)时，(x,y)->(e,f)的转移事件为从UI稿特征图中的坐标点211转移到页面截图的特征图中的坐标点221，UI稿特征图中的坐标点212转移到页面截图的特征图中的坐标点222，…，UI稿特征图中的坐标点21n转移到页面截图的特征图中的坐标点22n。如图2箭头方向所示，在网格坐标中按从左往右、从上至下的顺序逐点遍历计算转移事件的概率，可使用先验模型表示转移事件概率，如公式(4)所示。
其中P[(x,y)→(e,f)|(x,y)i→(e,f)i]为待对比坐标点与其周围坐标点的转移事件概率，将公式(2)带入公式(4)中，得到(x,y)->(e,f)的转移事件概率。
依照坐标点转移事件概率，即可得出UI稿特征图中每个像素到页面截图的特征图中每个像素映射的概率，当P'[(x,y)→(e,f)]小于预设的阈值时则认为该点为差异点，得出坐标点(x,y)转移到坐标点(e,f)的概率较小，即UI稿特征图中坐标点(x,y)对应的像素映射到页面截图的特征图中坐标点(e,f)对应的像素之间具有差异；当P'[(x,y)→(e,f)]大于预设的阈值时则认为该点为相同点，得出坐标点(x,y)转移到坐标点(e,f)的概率较大，即UI稿特征图中坐标点(x,y)对应的像素映射到页面截图的特征图中坐标点(e,f)对应的像素相同。例如，预设的阈值可以设为0.5，若P'[(x,y)→(e,f)]＝1，则UI稿特征图中坐标点(x,y)对应的像素映射到页面截图的特征图中坐标点(e,f)对应的像素相同，为相同点；若P'[(x,y)→(e,f)]＝0.45，则UI稿特征图中坐标点(x,y)对应的像素映射到页面截图的特征图中坐标点(e,f)对应的像素有差异，为差异点；若P'[(x,y)→(e,f)]＝0，则UI稿特征图中坐标点(x,y)对应的像素映射到页面截图的特征图中坐标点(e,f)对应的像素完全不同，为差异点。其中，阈值的设置可基于UI稿特征图和页面截图的特征图对比情况，视具体情况而定。
基于上述方法确定差异点和相同点，然后分别统计差异点和相同点，可得到UI稿特征图和页面截图的特征图的差异信息分布情况，即特征图中的差异之处与相同之处可清晰呈现出来，其中，差异信息可以包括颜色、位置信息等。
在一些实施例中，将待对比像素周围像素也纳入概率计算过程中，使对比的结果更加鲁棒。
在本申请实施例中，因为UI稿特征图和页面截图的特征图中每个像素对比不仅与该像素有关，同样与该像素周围的像素相关，即UI稿特征图和页面截图的特征图中每个坐标点对比不仅与该坐标点有关，同样与该坐标点周围的坐标点相关，因此，呈辐射状将坐标点周围坐标点也纳入概率计算对比过程中。
例如，坐标点(x,y)i为待对比的坐标点(x,y)周围N个坐标点中的第i个坐标点，如图3所示，N＝4，待对比的坐标点(x,y)周围的4个坐标点分别为坐标点(x,y)1、(x,y)2、(x,y)3和(x,y)4，其中，当i＝3时，(x,y)3为待对比的坐标点(x,y)周围4个坐标点中的第3个坐标点。
(x,y)->(e,f)的转移事件概率还与坐标点(x,y)周围的4个坐标点(x,y)1、(x,y)2、(x,y)3和(x,y)4相关，通过公式(3)或公式(4)计算UI稿特征图中坐标点(x,y)、(x,y)1、(x,y)2、(x,y)3和(x,y)4转移到对应页面截图的特征图中坐标点(e,f)、(e,f)1、(e,f)2、(e,f)3和(e,f)4的转移事件概率，计算得到的5个转移事件概率的平均概率，将平均概率作为坐标点(x,y)扩大范围后的转移事件概率，如公式(5)所示为扩大范围后的转移事件概率，这种计算方式使得两特征图的像素对比不再局限于某一像素，建立扩大范围后的模型使坐标点的转移事件概率更加鲁棒。
argmaxP[(x,y)→(e,f)] (5)；
当计算出argmaxP[(x,y)→(e,f)]的转移事件概率小于预设的阈值0.5时，UI稿特征图中坐标点(x,y)对应的像素映射到页面截图的特征图中坐标点(e,f)对应的像素之间具有差异；当计算出argmaxP[(x,y)→(e,f)]的转移事件概率大于预设的阈值0.5时，则认为UI稿特征图中坐标点(x,y)对应的像素映射到页面截图的特征图中坐标点(e,f)对应的像素相同，此时得到的两特征图的像素对比不再局限于某一像素，分别统计相同的区域和具有差异的区域，可得到UI稿特征图和页面截图的特征图的差异信息分布情况，即将特征图中的差异之处与相同之处可清晰呈现出来。
在一些实施例中，步骤S146，基于文字识别技术方法，获取每一页所述UI稿与对应页面截图中文字之间的差异信息，包括：步骤S1461至步骤S1463。
步骤S1461，基于所述文字识别技术方法，分割每一页所述UI稿与对应页面截图中的文字区域。
在本申请实施例中，文字识别技术方法可以应用OCR技术通过检测页面截图与UI稿中暗、亮的模式确定文字区域的形状，OCR引擎Tesseract分割每一页UI稿与对应页面截图中的文字区域。
步骤S1462，识别每一所述页面截图中的文字区域，得到对应页面截图的文字。
在本申请实施例中，将OCR技术获得的文字区域可以应用字符识别方法识别文字区域中文字的形状，并翻译成计算机文字，即，通过字符识别方法识别每一页UI稿与对应页面截图中文字区域中文字的形状并转换成文本格式。
步骤S1463，将每一页所述UI稿与对应页面截图中识别出的文字进行分析对比，得到文字之间的差异信息。
在本申请实施例中，将每一页UI稿与对应页面截图中识别转换出的文字进行分析对比，得到每一页UI稿与对应页面截图中不同的部分，并对不同的部分进行统计。例如，每一页UI稿与页面截图中对应元素相同的部分，文字不同则将此信息统计出来，得到文字之间的差异信息。
在一些实施例中，还包括基于相似度对比方法，获取每一页所述UI稿与对应页面截图的相似度。
在本申请实施例中，相似度对比方法可以包括感知哈希算法，通过感知哈希算法计算UI稿与对应页面截图的相似度。为降低计算复杂度，首先要对每一页UI稿与对应页面截图进行灰度化操作。其次，对灰度化处理后的图像进行每行逐个像素的对比，计算出来两像素之间的差异值，其中差异值可以为灰度值。将每一页UI稿与对应页面截图对比之后的差异值转换为16进制形式，并将所有16进制值连接起来转换为字符串，则每张图将有一个对应的编码。最后，对转换后的两张图进行汉明距离计算，将汉明距离转换为百分比方式表示两图像的相似度，汉明距离越小则图片越相似，反之则差别越大。
例如，将每一页UI稿转为16级灰度，即所有像素总共只有16种颜色，计算所有16个像素的灰度平均值，将每个像素的灰度与平均值进行比较，大于或等于平均值记为1，小于平均值记为0，并将得到的0和1组合在一起的字符串，就构成了一个16位的整数，这就是该UI稿对应的编码。同理，计算每一页UI稿对应的页面截图的编码。其中，字符串中0和1的组合的次序并不重要，只要保证对比的两张图都采用同样次序，得到编码以后，可以对比每一页UI稿与对应页面截图16位中有多少位是不一样的。在理论上，这等同于“汉明距离”，例如，如果不相同的数据位数不超过5，就说明两张图像很相似；如果大于10，就说明这是两张不同的图像。
步骤S150，基于样式上的差异信息生成验收报告。
步骤S150，基于样式上的差异信息生成验收报告，包括：步骤S151至步骤S152。
步骤S151，对所述差异之处的色彩、文字、尺寸、位置等进行分析并统计。
在本申请实施例中，如图4所示，为UI稿与对应页面截图对比实现流程，将步骤S140得出的差异之处的差异信息进行归纳分析，如图4中(a)图所示，将聚类出的差异之处进行最小外切矩形框计算，得到UI稿中规范化元素的形状41、42、43和页面截图中规范化元素的形状44、45、46，通过最小外切矩形框计算对元素的对比起到一定的简化作用。如图4中(b)图所示，对每一页UI稿与对应页面截图中规范化元素进行对比，如对比规范化元素的形状41与44，42与45，43与46获取每个元素对应的像素信息，包括颜色、位置信息等，计算每个矩形框中的元素差异。如图4中(c)图所示，总结归纳每个元素的差异之处，例如总结归纳规范化元素的形状41与44的差异之处，将元素中颜色和/或位置信息不同的像素进行统计记录，如果最终不同像素占该元素所占像素的比例超过预设的阈值，则认为UI稿与对应页面截图中对应的元素不同，对其进行标注并在每一页UI稿与对应页面截图中展示出来，同时将元素的差异信息进行统计，如色彩差异、位置差异、尺寸差异等。同理总结归纳规范化元素的形状42与45，43与46的差异之处，图4中(c)图未示出。
步骤S152，基于所述统计的结果生成验收报告。
在本申请实施例中，如图4中(d)图所示，自动出具验收报告，报告内容包括每一页UI稿与对应页面截图共存在几处差异，每一处差异的具体体现和每一页UI稿与对应页面截图的相似度。每一处差异信息的描述体现在颜色、元素尺寸、元素位置、文字信息等，如颜色存在差异则进行记录并描述UI稿的颜色和对应页面截图的颜色，如元素位置存在偏差则描述UI稿中该元素的位置和对应页面截图中该元素的位置，其他差异之处描述以此类推。
下面结合一个具体实施例对上述方法进行说明，其中，然而值得注意的是，该具体实施例仅是为了更好地说明本申请，并不构成对本申请的不当限定。
图5为本申请实施例提供的一种验收方法流程示意图，如图5所示，该方法至少包括以下步骤：
步骤S210，UI稿上传、以及每一页UI稿对应的URL、前端代码仓库。
获取UI稿、每一页UI稿对应渲染结果页的URL，以及对应页面的前端代码的仓库，每一页UI稿基于对应页面URL将进行渲染，得到渲染结果页并进行页面截图。后面对比结果是每一页UI稿与对应页面截图对比得出的。
步骤S220，获取每一页UI稿的适配场景，并输入UI稿的宽高信息。
获取每一页UI稿的适配场景和宽高的要求，并输入UI稿的标准大小，以及基于每一页UI稿的适配场景和宽高设置对应的渲染结果页中主体的宽高信息，其中，适配场景可以为mobile端或PC端。
步骤S230，基于每一页UI稿的适配场景和宽高要求设置渲染结果页中主体的宽高信息。
通过Node.js模拟浏览器环境，基于每一页UI稿的适配场景和宽高要求，设置对应渲染结果页面主体的宽高，录入每一页UI稿和目标检测页面的可用链接，渲染UI稿获得渲染结果页。
步骤S240，基于每一所述渲染结果页中接口的typescript类型声明，生成静态接口相应返回数据结果。
基于获取的前端代码的仓库中的typescript声明，可以确定UI稿页面渲染中所有字段所需的数据结构和每个字段的类型。基于确定的所有字段的数据结构和每个字段的类型，对比UI稿和渲染结果页中的所有字段的数据结构和每个字段的类型，静态生成接口返回数据结果。这样可以不依赖实际的后端接口，自动生成接口响应内容用于页面渲染，并且渲染出来的数据结果，和UI稿上并无差异。可以解决数据差异引起的UI稿和实际渲染结果页中的样式差异。
例如，UI稿中文本框的高度为100px，但是渲染结果页中文本框可能会因为数据过多，导致文本框高度为200px，此时通过对比UI稿和渲染结果页中的所有字段的数据结构和每个字段的类型，得到渲染结果页中的文本高度差异，虽然文本高度差异并不属于异常UI，但是应该屏蔽这样的数据差异，静态生成接口返回数据结果，纠正文本高度差异。
步骤S250，在Node.js服务器模拟浏览器环境渲染页面并截屏。
在Node.js服务器上模拟生成的浏览器环境运行前端代码并将得到的渲染结果页进行页面截图。
步骤S260，提取页面截图的特征图与UI稿的特征图并进行关键点检测与匹配，通过仿射变换对齐两个特征图，并对两个特征图进行建模对比。
其中，步骤S260包括步骤S261至步骤S266。
步骤S261，对UI稿与对应页面截图中的特征关键点进行检索。
对页面截图与UI稿中的每个像素进行数值化处理，以确定每一像素对应的RGB值。分别将页面截图与UI稿中的每个像素与其周围的16个像素的RGB值做比较，得到每个像素与其周围的16个像素的差异值，并将该16个差异值进行平均，得到平均差异值。若得出的平均差异值超过预设的阈值，则将该像素设为初始关键点，并对所有选取出的初始关键点的平均差异值进行排序，将平均差异值在前50个的像素作为关键点。例如，通过RGB值计算差异值，得出像素A与周围16个像素的平均差异值为128，预设的阈值可以为RGB值等于125，使平均差异值大于或等于125的像素设为初始关键点，如像素A设为初始关键点之一，并将得到的初始关键点基于平均差异值进行排序，排在前50的初始关键点作为关键点。
步骤S262，匹配UI稿与对应页面截图中的关键点。
通过描述符匹配每一页UI稿与对应页面截图中的关键点，并计算匹配的关键点之间的欧式距离是否超过预设的阈值来判断关键点是否正确匹配，若欧式距离小于或等于预设的3个像素，则两个关键点之间匹配正确，继续进行仿射变换；若欧式距离大于预设的3个像素，两个关键点之间匹配错误，即证明这两个关键点不匹配，需重新设置描述符，并对UI稿与对应页面截图中的关键点重新匹配。以此将每一页UI稿与对应页面截图中的关键点匹配起来。
步骤S263，基于匹配的关键点将UI稿与对应页面截图进行仿射变换。
基于每一页UI稿与对应页面截图的关键点进行特征匹配，再将特征匹配后的UI稿与对应页面截图进行仿射变换，使得两个图像在尺寸、方向等方面得以匹配，即把两图像对齐。
步骤S264，对仿射变换后的UI稿和页面截图进行特征提取。
使用ImageNet等开源数据集预训练模型对待对比的UI稿和页面截图进行特征提取，分别得到UI稿特征图D1和页面截图的特征图D2。
步骤S265，计算UI稿特征图和页面截图的特征图的像素值之差。
将页面截图的特征图和UI稿特征图的像素映射到网格坐标里，得到每个像素都是特征矩阵。由于经过关键点匹配与仿射变换，已将UI稿和页面截图对齐，即UI稿特征图D1和页面截图的特征图D2也是对齐的，因此可直接对UI稿特征图D1和页面截图的特征图D2的按逐像素做差计算得到X'12，如公式(1)所示此处X'12的维度与特征图维度相同，即两个特征图的像素值之差得出的X'12为一向量形式。
D1-D2＝X'12 (1)；
步骤S266，通过先验概率建模和转移概率建模，确定UI稿特征图和页面截图的特征图的差异之处。
假设每一页UI稿与对应页面截图的特征图经过计算像素值之差后，每一个点都满足多维高斯分布，如公式(2)所示，因为X'12维度与特征图维度相同，即计算的两个特征图的之差中的每一个像素均为一向量形式，因此均值维度与两个特征图的像素值之差中每一像素的维度相同，高斯模型的方差也使用协方差方式描述。
其中期望为μ＝(0，0……，0)，协方差Σ为特征各维度的方差，此先验概率模型表示每个差值计算UI稿特征图D1和页面截图的特征图D2的按像素之差后像素的概率分布情况。
图2中左图为UI稿特征图对应的网格坐标，图2中右图为页面截图的特征图对应的网格坐标。将UI稿特征图和页面截图的特征图对应的网格坐标中左上角的第一个像素对应的坐标点均设置为(0,0)，假设UI稿特征图中待对比坐标点(x,y)的特征向量为V(x,y)，同理，页面截图的特征图中待对比坐标点(e,f)的特征向量为V(e,f)，(x,y)->(e,f)代表UI稿特征图中坐标点(x,y)转移到页面截图的特征图中坐标点(e,f)的转移事件。图2示出了UI稿特征图和页面截图的特征图逐点遍历过程，包括：
1)当(x,y)＝(0,0)时，(x,y)->(e,f)的转移事件为UI稿特征图中坐标点(0,0)转移到页面截图的特征图中坐标点(0,0)，计算转移事件概率，可使用先验模型表示转移事件概率，如公式(3)所示。
P[(x,y)→(e,f)]＝P先验[V(x,y)-V(e,f)] (3)；
将公式(2)带入公式(3)中，得到当(x,y)＝(0,0)时，(x,y)->(e,f)的转移事件概率。
2)当(x,y)≠(0,0)时，(x,y)->(e,f)的转移事件为从UI稿特征图中的坐标点211转移到页面截图的特征图中的坐标点221，UI稿特征图中的坐标点212转移到页面截图的特征图中的坐标点222，…，UI稿特征图中的坐标点21n转移到页面截图的特征图中的坐标点22n。如图2箭头方向所示，在网格坐标中按从左往右、从上至下的顺序逐点遍历计算转移事件的概率，可使用先验模型表示转移事件概率，如公式(4)所示。
其中P[(x,y)→(e,f)|(x,y)i→(e,f)i]为待对比坐标点与其周围坐标点的转移事件概率，将公式(2)带入公式(4)中，得到(x,y)->(e,f)的转移事件概率。
因为UI稿特征图和页面截图的特征图中每个坐标点对比不仅与该坐标点有关，同样与该坐标点周围的坐标点相关，因此，呈辐射状将坐标点周围坐标点也纳入概率计算对比过程中。例如，坐标点(x,y)i为待对比的坐标点(x,y)周围N个坐标点中的第i个坐标点，如图3所示，N＝4，待对比的坐标点(x,y)周围的4个坐标点分别为坐标点(x,y)1、(x,y)2、(x,y)3和(x,y)4，其中，当i＝3时，(x,y)3为待对比的坐标点(x,y)周围4个坐标点中的第3个坐标点。
(x,y)->(e,f)的转移事件概率还与坐标点周围的4个坐标点(x,y)1、(x,y)2、(x,y)3和(x,y)4相关，通过公式(3)或公式(4)计算UI稿特征图中坐标点(x,y)、(x,y)1、(x,y)2、(x,y)3和(x,y)4转移到对应页面截图的特征图中坐标点(e,f)、(e,f)1、(e,f)2、(e,f)3和(e,f)4的转移事件概率，计算得到的5个转移事件概率的平均概率，将平均概率作为坐标点扩大范围后的转移事件概率，如公式(5)所示为扩大范围后的转移事件概率，这种计算方式使得两特征图的像素对比不再局限于某一像素，建立扩大范围后的模型使坐标点的转移事件概率更加鲁棒。
argmaxP[(x,y)→(e,f)] (5)；
当计算出argmaxP[(x,y)→(e,f)]的转移事件概率小于预设的阈值0.5时，UI稿特征图中坐标点(x,y)对应的像素映射到页面截图的特征图中坐标点(e,f)对应的像素之间具有差异；当计算出argmaxP[(x,y)→(e,f)]的转移事件概率大于预设的阈值0.5时，则认为UI稿特征图中坐标点(x,y)对应的像素映射到页面截图的特征图中坐标点(e,f)对应的像素相同，此时得到的两特征图的像素对比不再局限于某一像素，分别统计相同的区域和具有差异的区域，可得到UI稿特征图和页面截图的特征图的差异信息分布情况，即特征图中的差异之处与相同之处可清晰呈现出来。同时，阈值的设置可基于具体的图像对比情况灵活变化，视具体情况而定。
步骤S270、针对对比出的存在差异区域进行OCR文字识别、颜色对比、尺寸比较等对比元素中具体差异，将差异处统计输出。
通过最小外切矩形框统计归纳元素的差异，按照以上方式可以将每一页UI稿与对应页面截图中存在差异之处的差异信息获取出来，如图4中(a)图所示，将聚类出的差异之处进行最小外切矩形框计算，得到UI稿中规范化元素的形状41、42、43和页面截图中规范化元素的形状44、45、46，通过最小外切矩形框计算对元素的对比起到一定的简化作用。如图4中(b)图所示，对每一页UI稿与对应页面截图中规范化元素进行对比，如对比规范化元素的形状41与44，42与45，43与46获取每个元素对应的像素信息，包括颜色、位置信息等，计算每个矩形框中的元素差异。如图4中(c)图所示，总结归纳每个元素的差异之处，例如总结归纳规范化元素的形状41与44的差异之处，将元素中颜色和/或位置信息不同的像素进行统计记录，如果最终不同像素占该元素所占像素的比例超过预设的阈值，则认为UI稿与对应页面截图中对应的元素不同，对其进行标注并在每一页UI稿与对应页面截图中展示出来，同时将元素的差异信息进行统计，如色彩差异、位置差异、尺寸差异等。同理总结归纳规范化元素的形状42与45，43与46的差异之处，图4中(c)图未示出。
应用OCR技术获取文字之间的差异，可通过检测页面截图与UI稿暗、亮的模式确定其形状，应用OCR引擎Tesseract分割每一页UI稿与对应页面截图中的文字区域中文字的形状，并翻译成计算机文字，即，通过字符识别方法识别每一页UI稿与对应页面截图中文字区域中文字的形状并转换成文本格式。将每一页UI稿与对应页面截图中识别转换出的文字进行分析对比，得到每一页UI稿与对应页面截图中不同的部分，并对不同的部分进行统计。例如，每一页UI稿与页面截图中对应元素相同的部分，文字不同则将此信息统计出来，得到文字之间的差异信息。
通过感知哈希算法计算UI稿与对应页面截图的相似度。为降低计算复杂度，首先要对每一页UI稿与对应页面截图进行灰度化操作。其次，对灰度化处理后的图像进行每行逐个像素的对比，计算出来两像素之间的差异值，其中差异值可以为灰度值。将每一页UI稿与对应页面截图对比之后的差异值转换为16进制形式，并将所有16进制值连接起来转换为字符串，则每张图将有一个对应的编码。最后，对转换后的两张图进行汉明距离计算，将汉明距离转换为百分比方式表示两图像的相似度，汉明距离越小则图片越相似，反之则差别越大。例如，将每一页UI稿转为16级灰度，即所有像素总共只有16种颜色，计算所有16个像素的灰度平均值，将每个像素的灰度与平均值进行比较，大于或等于平均值记为1，小于平均值记为0，并将得到的0和1组合在一起的字符串，就构成了一个16位的整数，这就是该UI稿对应的编码。同理，计算每一页UI稿对应的页面截图的编码。其中，字符串中0和1的组合的次序并不重要，只要保证对比的两张图都采用同样次序，得到编码以后，可以对比每一页UI稿与对应页面截图16位中有多少位是不一样的。在理论上，这等同于“汉明距离”，例如，如果不相同的数据位数不超过5，就说明两张图像很相似；如果大于10，就说明这是两张不同的图像，并将得到的相似度根据步骤S280记录在验收报告中。
步骤S280，将所有差异之处统计归纳，生成验收报告。
如图4中(d)图所示，将样式上的差异逐条列出自动出具验收报告，报告内容包括每一页UI稿与对应页面截图共存在几处差异，每一处差异的具体体现。每一处差异信息的描述体现在颜色、元素尺寸、元素位置、文字信息等，如颜色存在差异则进行记录并描述UI稿的颜色和对应页面截图的颜色，如元素位置存在偏差则描述UI稿中该元素的位置和对应页面截图中该元素的位置，其他差异之处描述以此类推。
图6为本申请实施例提供的一种验收装置的组成结构示意图，如图6所示，该装置60包括数据采集模块61、页面渲染模块62、结果对比模块63，其中，数据采集模块61用于执行步骤S210至步骤S220。页面渲染模块62用于执行步骤S230至步骤S250。结果对比模块63用于执行步骤S260至步骤S280。
基于前述的实施例，本申请实施例再提供一种验收装置，所述装置包括所包括的各模块、以及各模块所包括的各子模块，可以通过电子设备中的处理器来实现；当然也可通过具体的逻辑电路实现；在实施的过程中，处理器可以为中央处理器(Central ProcessingUnit，CPU)、微处理器(Micro Processing Unit，MPU)、数字信号处理器(Digital SignalProcessor，DSP)或现场可编程门阵列(Field Programmable Gate Array，FPGA)等。
基于前述的实施例，本申请实施例提供的一种验收装置的组成框架示意图，如图7所示，所述装置70包括：
第一获取模块71，用于获取UI稿、每一页所述UI稿对应渲染结果页的URL以及每一页面对应的前端代码；
第二获取模块72，用于获取模拟生成的浏览器环境，所述浏览器环境包括每一渲染结果页中主体的宽高信息；
调用模块73，用于运行所述前端代码生成模拟浏览器，在所述浏览器环境下访问每一所述渲染结果页的URL并将运行结果进行页面截图；
第一对比模块74，用于将每一页所述UI稿与对应页面截图进行分析对比，得到样式上的差异信息；
第一生成模块75，用于基于样式上的差异信息生成验收报告。
在一些实施例中，第二获取模块72包括：第一获取子模块，用于获取每一页所述UI稿的适配场景和宽高要求信息；第一设置子模块，用于基于每一页所述UI稿的适配场景和宽高要求信息，设置对应的渲染结果页中主体的宽高信息。
在一些实施例中，所述装置还包括：确定模块，基于所述前端代码的仓库中的typescript声明，确定每一渲染结果页中字段所需的数据结构和每个字段的类型；第二对比模块，基于字段所需的数据结构和每个字段的类型，对比每一页所述UI稿中的字段和对应的渲染结果页中的字段，得到比对结果；第二生成模块，基于所述比对结果，生成对应渲染结果页的接口返回数据结果。
在一些实施例中，调用模块73包括：第二设置子模块，用于基于渲染结果页中主体的宽高信息设置所述浏览器所渲染的页面大小；调用子模块，用于运行所述前端代码生成模拟浏览器，在所述浏览器环境下访问每一所述渲染结果页的URL；插入子模块，用于将所述每一所述渲染结果页进行页面截图。
在一些实施例中，所述样式上的差异信息包括特征图的差异信息和文字之间的差异信息，第一对比模块74包括：提取子模块，用于基于图像特征提取算法，分别提取每一页所述UI稿的特征图与对应页面截图的特征图；第二获取子模块，用于基于高斯分布假设序列判别方法，获取每一页所述UI稿的特征图与对应页面截图的特征图之间的差异信息；第三获取子模块，用于基于文字识别技术方法，获取每一页所述UI稿与对应页面截图中文字之间的差异信息。
在一些实施例中，对比模块还包括：第四获取子模块，用于获取每一页所述UI稿与对应页面截图中的关键点；匹配子模块，用于将每一页所述UI稿中的关键点与对应页面截图中的关键点互相匹配；变换子模块，用于基于匹配的关键点将每一页所述UI稿与对应页面截图进行仿射变换并对齐；对应地，提取子模块包括：提取单元，用于基于图像特征提取算法，分别提取对齐后的每一页所述UI稿的特征图与对应页面截图的特征图。
在一些实施例中，第二获取子模块包括：计算单元，用于确定每一页所述UI稿的特征图与对应页面截图的特征图之间对应像素的像素值之差；获取单元，用于基于所述高斯分布假设序列判别方法，基于所述像素值之差，获取每一页所述UI稿与对应页面截图的特征图之间的差异信息。
在一些实施例中，第三获取子模块包括：分割单元，用于基于所述文字识别技术方法，分割每一页所述UI稿与对应页面截图中的文字区域；识别单元，用于识别每一所述页面截图中的文字区域，得到对应页面截图的文字；对比单元，用于将每一页所述UI稿与对应页面截图中识别出的文字进行分析对比，得到文字之间的差异信息。
在一些实施例中，第一生成模块75包括：统计子模块，用于对所述差异之处的色彩、文字、尺寸、位置中至少之一进行统计；对比子模块，用于基于所述统计的结果生成验收报告。
以上装置实施例的描述，与上述方法实施例的描述是类似的，具有同方法实施例相似的有益效果。对于本申请装置实施例中未披露的技术细节，请参照本申请方法实施例的描述而理解。
本申请实施例提供一种计算机设备，包括存储器和处理器，存储器存储有可在处理器上运行的计算机程序，处理器执行所述程序时实现上述数据处理方法或测试方法实施例中的步骤。
需要说明的是，图8为本申请实施例中电子设备的一种硬件实体示意图，如图8所示，该电子设备的硬件实体包括：处理器81、通信接口82和存储器83，其中：
处理器81通常控制电子设备的总体操作。
通信接口82可以使电子设备通过网络与其他终端或服务器通信。
存储器83配置为存储由处理器81可执行的指令和应用，还可以缓存待处理器81以及电子设备中各模块待处理或已经处理的数据(例如，图像数据、音频数据、语音通信数据和视频通信数据)，可以通过闪存(FLASH)或随机存取存储器(Random Access Memory，RAM)实现。
这里，处理器用于控制其自身以及存储器以实现上述数据处理方法或测试方法实施例中的步骤。处理器还可以称为CPU(Central Processing Unit，中央处理单元)。处理器可能是一种集成电路芯片，具有信号的处理能力。处理器还可以是通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application SpecificIntegrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。另外，处理器可以由集成电路芯片共同实现。
本申请实施例提供一种计算机存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述数据处理方法或测试方法实施例中的步骤。
在一些实施例中，本申请实施例提供的装置具有的功能或包含的模块可以用于执行上述方法实施例描述的方法，其具体实现可以参照上述方法实施例的描述，具有同方法实施例相似的有益效果。
上文对各个实施例的描述倾向于强调各个实施例之间的不同之处，其相同或相似之处可以互相参考。
在本申请所提供的几个实施例中，应该理解到，所揭露的方法和装置，可以通过其他的方式实现。例如，以上所描述的装置实施方式仅仅是示意性的，例如，模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性、机械或其他的形式。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台电子设备(可以是刷写设备或汽车等)或处理器(processor)执行本申请各个实施方式方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述，仅为本申请的示例性的实施例而已，并非用于限定本申请的保护范围，凡在本申请的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本申请的保护范围之内。

Claims (12)

1.一种验收方法，其特征在于，所述方法包括：
获取用户界面UI稿、每一页所述UI稿对应渲染结果页的统一资源定位器URL以及每一页面对应的前端代码；
获取模拟生成的浏览器环境，所述浏览器环境包括每一渲染结果页中主体的宽高信息；
运行所述前端代码生成模拟浏览器，在所述浏览器环境下访问每一所述渲染结果页的URL并将运行结果进行页面截图；
将每一页所述UI稿与对应页面截图进行分析对比，得到样式上的差异信息；
基于样式上的差异信息生成验收报告。
2.根据权利要求1所述的方法，其特征在于，获取所述每一渲染结果页中主体的宽高信息，包括：
获取每一页所述UI稿的适配场景和宽高要求信息；
基于每一页所述UI稿的适配场景和宽高要求信息，设置对应的渲染结果页中主体的宽高信息。
3.根据权利要求1所述的方法，其特征在于，所述方法还包括：
基于所述前端代码的仓库中的typescript声明，确定每一渲染结果页中字段所需的数据结构和每个字段的类型；
基于字段所需的数据结构和每个字段的类型，对比每一页所述UI稿中的字段和对应的渲染结果页中的字段，得到比对结果；
基于所述比对结果，生成对应渲染结果页的接口返回数据结果。
4.根据权利要求1至3任一项所述的方法，其特征在于，所述运行所述前端代码生成模拟浏览器，在所述浏览器环境下访问每一所述渲染结果页的URL并将运行结果进行页面截图，包括：
基于渲染结果页中主体的宽高信息设置所述浏览器所渲染的页面大小；
运行所述前端代码生成模拟浏览器，在所述浏览器环境下访问每一所述渲染结果页的URL；
将所述每一所述渲染结果页进行页面截图。
5.根据权利要求1至3任一项所述的方法，其特征在于，所述样式上的差异信息包括特征图的差异信息和文字之间的差异信息，其中所述将每一页所述UI稿与对应页面截图进行分析对比，得到样式上的差异信息，包括：
基于图像特征提取算法，分别提取每一页所述UI稿的特征图与对应页面截图的特征图；
基于高斯分布假设序列判别方法，获取每一页所述UI稿的特征图与对应页面截图的特征图之间的差异信息；
基于文字识别技术方法，获取每一页所述UI稿与对应页面截图中文字之间的差异信息。
6.根据权利要求5所述的方法，其特征在于，所述将每一页所述UI稿与对应页面截图进行分析对比，得到样式上的差异信息，还包括：
获取每一页所述UI稿与对应页面截图中的关键点；
将每一页所述UI稿中的关键点与对应页面截图中的关键点互相匹配；
基于匹配的关键点将每一页所述UI稿与对应页面截图进行仿射变换并对齐；
所述基于图像特征提取算法，分别提取每一页所述UI稿的特征图与对应页面截图的特征图，包括：基于图像特征提取算法，分别提取对齐后的每一页所述UI稿的特征图与对应页面截图的特征图。
7.根据权利要求5所述的方法，其特征在于，所述基于高斯分布假设序列判别方法，获取每一页所述UI稿的特征图与对应页面截图的特征图之间的差异信息，包括：
确定每一页所述UI稿的特征图与对应页面截图的特征图之间对应像素的像素值之差；
基于所述高斯分布假设序列判别方法，基于所述像素值之差，获取每一页所述UI稿与对应页面截图的特征图之间的差异信息。
8.根据权利要求5所述的方法，其特征在于，所述基于文字识别技术方法，获取每一页所述UI稿与对应页面截图中文字之间的差异信息，包括：
基于所述文字识别技术方法，分割每一页所述UI稿与对应页面截图中的文字区域；
识别每一所述页面截图中的文字区域，得到对应页面截图的文字；
将每一页所述UI稿与对应页面截图中识别出的文字进行分析对比，得到文字之间的差异信息。
9.根据权利要求1至3任一项所述的方法，其特征在于，所述基于样式上的差异信息生成验收报告，包括：
对所述差异之处的色彩、文字、尺寸、位置中至少之一进行统计；
基于所述统计的结果生成验收报告。
10.一种验收装置，其特征在于，所述装置包括：
第一获取模块，用于获取UI稿、每一页所述UI稿对应渲染结果页的URL以及每一页面对应的前端代码；
第二获取模块，用于获取模拟生成的浏览器环境，所述浏览器环境包括每一渲染结果页中主体的宽高信息；
第一调用模块，用于运行所述前端代码生成模拟浏览器，在所述浏览器环境下访问每一所述渲染结果页的URL并将运行结果进行页面截图；
第一对比模块，用于将每一页所述UI稿与对应页面截图进行分析对比，得到样式上的差异信息；
生成模块，用于基于样式上的差异信息生成验收报告。
11.一种计算机设备，其特征在于，包括：存储器和处理器，所述存储器存储有可在处理器上运行的计算机程序，所述处理器执行所述程序时实现权利要求1至9任一项所述的方法。
12.一种计算机存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1至9任一项所述的方法。
CN202210998681.XA 2022-08-19 2022-08-19 一种验收方法、装置、设备及存储介质 Pending CN116955138A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210998681.XA CN116955138A (zh) 2022-08-19 2022-08-19 一种验收方法、装置、设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210998681.XA CN116955138A (zh) 2022-08-19 2022-08-19 一种验收方法、装置、设备及存储介质

Publications (1)

Publication Number Publication Date
CN116955138A true CN116955138A (zh) 2023-10-27

Family

ID=88444954

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210998681.XA Pending CN116955138A (zh) 2022-08-19 2022-08-19 一种验收方法、装置、设备及存储介质

Country Status (1)

Country Link
CN (1) CN116955138A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117952817A (zh) * 2024-03-26 2024-04-30 腾讯科技（深圳）有限公司 一种图像对比展示方法及相关装置

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117952817A (zh) * 2024-03-26 2024-04-30 腾讯科技（深圳）有限公司 一种图像对比展示方法及相关装置
CN117952817B (zh) * 2024-03-26 2024-06-11 腾讯科技（深圳）有限公司 一种图像对比展示方法及相关装置

Similar Documents

Publication Publication Date Title
Seeland et al. Plant species classification using flower images—A comparative study of local feature representations
CN106980856B (zh) 公式识别方法及系统和符号推理计算方法及系统
US20190294921A1 (en) Field identification in an image using artificial intelligence
CN112215201B (zh) 评估人脸识别模型、针对图像的分类模型的方法及装置
CN111428557A (zh) 基于神经网络模型的手写签名的自动校验的方法和装置
CN115443490A (zh) 影像审核方法及装置、设备、存储介质
CN112101386B (zh) 文本检测方法、装置、计算机设备和存储介质
CN110210480B (zh) 文字识别方法、装置、电子设备和计算机可读存储介质
CN112396047B (zh) 训练样本生成方法、装置、计算机设备和存储介质
CN115147607A (zh) 一种基于凸优化理论的抗噪声零样本图像分类方法
Fried et al. Patch2vec: Globally consistent image patch representation
CN111104941B (zh) 图像方向纠正方法、装置及电子设备
CN112364974A (zh) 一种基于激活函数改进的YOLOv3算法
CN116955138A (zh) 一种验收方法、装置、设备及存储介质
CN110163095B (zh) 回环检测方法、回环检测装置及终端设备
CN117315377B (zh) 基于机器视觉的图像处理方法、装置及电子设备
Pérez-Pellitero et al. Antipodally invariant metrics for fast regression-based super-resolution
CN110852102B (zh) 一种中文的词性标注方法、装置、存储介质及电子设备
Belhedi et al. Adaptive scene‐text binarisation on images captured by smartphones
Joren et al. Learning document graphs with attention for image manipulation detection
US9378428B2 (en) Incomplete patterns
Evangelou et al. PU learning-based recognition of structural elements in architectural floor plans
CN115731561A (zh) 使用视觉箭头关系检测的手绘示图识别
Ding et al. Image quality assessment based on multi-order local features description, modeling and quantification
CN113505783B (zh) 基于少次学习的甲骨文单字识别方法和装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination