界面开发的视觉还原测试方法及装置与流程

1.本发明涉及云计算技术领域，尤其涉及一种界面开发的视觉还原测试方法及装置。


背景技术：

2.开发工程师在界面开发时是否保证较高的还原度，直接影响产品的用户体验。在实际的生产任务中，大多数任务的人员投入少、时间紧迫、工作量大等问题经常存在，导致界面还原度不高。因此，需要对界面开发的视觉进行还原测试，而目前基本采用人工走查的方式，对比时通常需要凭感觉、凭设计师的像素眼，以及借助markman工具对实际界面截图手工标注，人工进行两者的差异对比。时间成本和人力成本大，准确度不高。


技术实现要素：

3.本发明实施例提出一种界面开发的视觉还原测试方法，用以实现界面开发的视觉还原测试，时间成本和人力成本小，准确度高，该方法包括：
4.获得实际界面和预期界面；
5.构建实际界面和预期界面中的所有目标元素的灰度直方图；
6.基于所述灰度直方图，对实际界面和预期界面中的对应目标元素进行对比，筛选出不一致的目标元素；
7.获得所述不一致的目标元素在实际界面和预期界面的像素坐标；
8.基于所述像素坐标，在实际界面上进行差异标注。
9.本发明实施例提出一种界面开发的视觉还原测试装置，用以实现界面开发的视觉还原测试，时间成本和人力成本小，准确度高，该装置包括：
10.界面获取模块，用于获得实际界面和预期界面；
11.灰度直方图构建模块，用于构建实际界面和预期界面中的所有目标元素的灰度直方图；
12.目标元素筛选模块，用于基于所述灰度直方图，对实际界面和预期界面中的对应目标元素进行对比，筛选出不一致的目标元素；
13.像素坐标获得模块，用于获得所述不一致的目标元素在实际界面和预期界面的像素坐标；
14.差异标注模块，用于基于所述像素坐标，在实际界面上进行差异标注。
15.本发明实施例还提供一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述界面开发的视觉还原测试方法。
16.本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述界面开发的视觉还原测试方法。
17.本发明实施例还提供一种计算机程序产品，所述计算机程序产品包括计算机程
序，所述计算机程序被处理器执行时实现上述界面开发的视觉还原测试方法。
18.在本发明实施例中，获得实际界面和预期界面；构建实际界面和预期界面中的所有目标元素的灰度直方图；基于所述灰度直方图，对实际界面和预期界面中的对应目标元素进行对比，筛选出不一致的目标元素；获得所述不一致的目标元素在实际界面和预期界面的像素坐标；基于所述像素坐标，在实际界面上进行差异标注。在上述过程中，先基于灰度直方图筛选出了不一致的目标元素，然后基于不一致的目标元素的像素坐标，在实际界面上进行差异标注，可直接完成差异标注，准确度高，且时间成本和人力成本。
附图说明
19.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：
20.图1为本发明实施例中界面开发的视觉还原测试方法的流程图；
21.图2为本发明实施例中灰度直方图构建流程图；
22.图3为本发明实施例中像素坐标获得流程图；
23.图4为本发明实施例中进行差异标注的流程图；
24.图5为本发明实施例中界面开发的视觉还原测试装置的示意图一；
25.图6为本发明实施例中界面开发的视觉还原测试装置的示意图二；
26.图7为本发明实施例中界面开发的视觉还原测试装置的示意图三；
27.图8为本发明实施例中计算机设备的示意图。
具体实施方式
28.为使本发明实施例的目的、技术方案和优点更加清楚明白，下面结合附图对本发明实施例做进一步详细说明。在此，本发明的示意性实施例及其说明用于解释本发明，但并不作为对本发明的限定。
29.在本说明书的描述中，所使用的“包含”、“包括”、“具有”、“含有”等，均为开放性的用语，即意指包含但不限于。参考术语“一个实施例”、“一个具体实施例”、“一些实施例”、“例如”等的描述意指结合该实施例或示例描述的具体特征、结构或者特点包含于本技术的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。各实施例中涉及的步骤顺序用于示意性说明本技术的实施，其中的步骤顺序不作限定，可根据需要作适当调整。
30.首先，对本发明涉及的术语进行解释。
31.界面设计视觉还原走查：保证开发出的界面效果有较高的还原度，是软件上线前的一个重要环节。工作内容主要是对比实际开发的界面效果与界面设计的效果图之间的差异并进行标注总结，需要开发人员对差异性进行统一修改。
32.图1为本发明实施例中界面开发的视觉还原测试方法的流程图，如图1所示，该方法包括：
33.步骤101，获得实际界面和预期界面；
34.步骤102，构建实际界面和预期界面中的所有目标元素的灰度直方图；
35.步骤103，基于所述灰度直方图，对实际界面和预期界面中的对应目标元素进行对比，筛选出不一致的目标元素；
36.步骤104，获得所述不一致的目标元素在实际界面和预期界面的像素坐标；
37.步骤105，基于所述像素坐标，在实际界面上进行差异标注。
38.在本发明实施例中，先基于灰度直方图筛选出了不一致的目标元素，然后基于不一致的目标元素的像素坐标，在实际界面上进行差异标注，可直接完成差异标注，准确度高，且时间成本和人力成本。
39.在步骤101中，获得实际界面和预期界面。
40.在一实施例中，获得实际界面和预期界面，包括：
41.从多张图片中自动匹配实际界面和预期界面，对实际界面和预期界面进行叠加。
42.在上述实施例中，多张图片是自动导入的，实现实际界面和预期界面的一一对应、自动匹配。
43.在步骤102中，构建实际界面和预期界面中的所有目标元素的灰度直方图。
44.图2为本发明实施例中灰度直方图构建流程图，在一实施例中，构建实际界面和预期界面中的所有目标元素的灰度直方图，包括：
45.步骤201，分别将实际界面和预期界面中的每个目标元素进行分离；
46.步骤202，构建每个目标元素的灰度直方图。
47.在上述实施例中，目标元素可以是前景中的任意元素，进行分离是为了把目标元素从背景中的分离，背景包括颜色、纹理等。具体地，可通过alpha matting算法分别将实际界面和预期界面中的每个目标元素进行分离，当然，还可以有其他算法，相关变化例均应落入本发明的保护范围。
48.在步骤103中，基于所述灰度直方图，对实际界面和预期界面中的对应目标元素进行对比，筛选出不一致的目标元素。
49.在一实施例中，基于所述灰度直方图，对实际界面和预期界面中的对应目标元素进行对比，筛选出不一致的目标元素，包括：
50.在实际界面和预期界面中的对应目标元素的灰度直方图的差异超过容差度时，确定所述目标元素为不一致的目标元素。
51.在步骤104中，获得所述不一致的目标元素在实际界面和预期界面的像素坐标。
52.图3为本发明实施例中像素坐标获得流程图，在一实施例中，获得所述不一致的目标元素在实际界面和预期界面的像素坐标，包括：
53.步骤301，分别对实际界面和预期界面上的不一致的目标元素进行二值化处理，获得目标元素的二值图；
54.步骤302，对实际界面和预期界面上的目标元素的二值图进行横向像素和纵向像素映射，获得目标元素在实际界面和预期界面的像素坐标。
55.在步骤105中，基于所述像素坐标，在实际界面上进行差异标注。
56.图4为本发明实施例中进行差异标注的流程图，在一实施例中，基于所述像素坐标，在实际界面上进行差异标注，包括：
57.步骤401，根据目标元素在实际界面和预期界面的像素坐标，计算实际界面和预期界面上的目标元素的差异值；
58.步骤402，将所述差异值标注在实际界面的像素坐标上。
59.在一实施例中，所述差异值包括位置差异值、间距差异值和大小差异值中的其中一种或任意组合。
60.在一实施例中，所述方法还包括：
61.比对实际界面和预期界面中预设元素的颜色，在预设元素的颜色不一致时，在实际界面上进行差异标注。
62.在上述实施例中，预设元素的颜色包括文字颜色/图标色/背景色/填充色/边框色。例如预期界面的文字颜色#666666，实际界面的文字颜色为#333333，即给出错误提示，进行差异标注。
63.在一实施例中，所述方法还包括：
64.在实际界面的前景色与背景色的对比度不符合无障碍要求时，在实际界面进行标注。
65.在上述实施例中，无障碍要求为对比度4.5：1。
66.在一实施例中，所述方法还包括：
67.根据差异标注，生成差异总结报告。
68.差异总结报告还可以包括修改建议。
69.综上所述，本发明实施例提出的方法的有益效果如下：
70.可根据场景，在电脑端或手机端一键置入实际界面和预期界面，不受时间地点限制；
71.实现自动对比，大大减少人员和成本，也避免粗心等不确定因素造成的疏漏；
72.对对比的精度可以自行调整，可根据任务时间节点选择精度，把握修改的程度；
73.输出总结报告，提高视觉还原走查效率。
74.本发明实施例中还提供了一种界面开发的视觉还原测试装置，如下面的实施例所述。由于该装置解决问题的原理与界面开发的视觉还原测试方法相似，因此该装置的实施可以参见界面开发的视觉还原测试方法的实施，重复之处不再赘述。
75.图5为本发明实施例中界面开发的视觉还原测试装置的示意图一，包括：
76.界面获取模块501，用于获得实际界面和预期界面；
77.灰度直方图构建模块502，用于构建实际界面和预期界面中的所有目标元素的灰度直方图；
78.目标元素筛选模块503，用于基于所述灰度直方图，对实际界面和预期界面中的对应目标元素进行对比，筛选出不一致的目标元素；
79.像素坐标获得模块504，用于获得所述不一致的目标元素在实际界面和预期界面的像素坐标；
80.差异标注模块505，用于基于所述像素坐标，在实际界面上进行差异标注。
81.在一实施例中，界面获取模块501具体用于：
82.从多张图片中自动匹配实际界面和预期界面，对实际界面和预期界面进行叠加。
83.在一实施例中，灰度直方图构建模块502具体用于：
84.分别将实际界面和预期界面中的每个目标元素进行分离；
85.构建每个目标元素的灰度直方图。
86.在一实施例中，目标元素筛选模块503具体用于：
87.在实际界面和预期界面中的对应目标元素的灰度直方图的差异超过容差度时，确定所述目标元素为不一致的目标元素。
88.在一实施例中，像素坐标获得模块504具体用于：
89.分别对实际界面和预期界面上的不一致的目标元素进行二值化处理，获得目标元素的二值图；
90.对实际界面和预期界面上的目标元素的二值图进行横向像素和纵向像素映射，获得目标元素在实际界面和预期界面的像素坐标。
91.在一实施例中，差异标注模块505具体用于：
92.根据目标元素在实际界面和预期界面的像素坐标，计算实际界面和预期界面上的目标元素的差异值；
93.将所述差异值标注在实际界面的像素坐标上。
94.在一实施例中，所述差异值包括位置差异值、间距差异值和大小差异值中的其中一种或任意组合。
95.图6为本发明实施例中界面开发的视觉还原测试装置的示意图二，在一实施例中，所述装置还包括颜色标注模块601，用于：
96.比对实际界面和预期界面中预设元素的颜色，在预设元素的颜色不一致时，在实际界面上进行差异标注。
97.在一实施例中，颜色标注模块还用于：
98.在实际界面的前景色与背景色的对比度不符合无障碍要求时，在实际界面进行标注。
99.图7为本发明实施例中界面开发的视觉还原测试装置的示意图三，在一实施例中，所述装置还包括报告生成模块701，用于：
100.根据差异标注，生成差异总结报告。
101.综上所述，本发明实施例提出的装置的有益效果如下：
102.可根据场景，在电脑端或手机端一键置入实际界面和预期界面，不受时间地点限制；
103.实现自动对比，大大减少人员和成本，也避免粗心等不确定因素造成的疏漏；
104.对对比的精度可以自行调整，可根据任务时间节点选择精度，把握修改的程度；
105.输出总结报告，提高视觉还原走查效率。
106.本发明实施例还提供一种计算机设备，图8为本发明实施例中计算机设备的示意图，所述计算机设备800包括存储器810、处理器820及存储在存储器810上并可在处理器820上运行的计算机程序830，所述处理器820执行所述计算机程序830时实现上述界面开发的视觉还原测试方法。
107.本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述界面开发的视觉还原测试方法。
108.本发明实施例还提供一种计算机程序产品，所述计算机程序产品包括计算机程
序，所述计算机程序被处理器执行时实现上述界面开发的视觉还原测试方法。
109.本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序业务系统。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序业务系统的形式。
110.本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序业务系统的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
111.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
112.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
113.以上所述的具体实施例，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施例而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。