一种UI界面走查的测试方法及装置与流程

本发明涉及计算机，具体涉及一种ui界面走查的测试方法及装置。

背景技术：

1、目前，在对用户界面(ui，user interface)进行走查时，常用的ui走查方法需要使用人工来检查前端代码生成的ui界面是否和ui设计稿一致。这就大大增加了人工检查的时间。同时应用页面中细微差别将无法人工对比察觉，这不但造成了页面开发质量不佳，也使页面开发效率降低。因此，本领域急需一种更加高效且更加准确的ui的走查方法。

2、在传统的开发模式中，前端工程师开发完后，需要ui设计师走查，ui设计师在测试环境下针对不同业务场景对即将上线的产品进行人工走查，需要设计师机械重复的校对输出修改意见文档，并与前端工程师反复沟通确认，增加了沟通成本，降低了工作效率。具体问题：1.如果基础组件不统一，视觉上与设计稿不相符，如字体大小，颜色、尺寸间距、按钮等，会使用户体验感降低；2.如遇逻辑问题复杂的场景，则走查时间会变长，梳理问题文档更复杂；3.相同的问题出现多次，需反复沟通，反复修改，设计师机械性的反复整理，协作成本增加。

技术实现思路

1、本申请提供一种ui界面走查的测试方法、装置、设备和存储介质，其可以减少人工检查的时间，降低沟通成本，提高工作效率。

2、为达到以上目的，本申请采用如下技术方案：

3、第一方面，提供一种ui界面走查的测试方法，该方法包括以下步骤：

4、将html页面与设计效果图调整为相同尺寸并进行重叠检查，识别非重合部分；

5、将所述非重合部分对应的设计效果图代码与html页面代码进行对比，识别差异代码。

6、一些实施例中，所述将html页面与设计效果图调整为相同尺寸并进行重叠检查，识别非重合部分，包括以下步骤：

7、将html页面调整为预设尺寸；

8、调整所述设计效果图的透明度；

9、将调节透明度后的设计效果图与html页面重叠对比；

10、通过观察是否有重影，判断效果图是否还原。

11、一些实施例中，通过对比调节透明度后的设计效果图与html页面的：间距、宽度高度、icon图标大小、文字大小、字体、线框、位置布局、投影、颜色，判断是否存在重影。

12、一些实施例中，使用compare it工具，对所述非重合部分的设计效果图代码与非重合部分的html页面代码进行识别对比。

13、第二方面，提供一种ui界面走查的测试装置，包括：

14、识别单元，其用于将html页面与设计效果图调整为相同尺寸并进行重叠检查，识别非重合部分；

15、识别单元，还用于将所述非重合部分对应的设计效果图代码与html页面代码进行对比，识别差异代码。

16、一些实施例中，所述识别单元用于：

17、将html页面调整为预设尺寸；

18、调整所述设计效果图的透明度；

19、将调节透明度后的设计效果图与html页面重叠对比；

20、通过观察是否有重影，判断效果图是否还原。

21、一些实施例中，所述识别单元还用于：

22、通过对比调节透明度后的设计效果图与html页面的：间距、宽度高度、icon图标大小、文字大小、字体、线框、位置布局、投影、颜色，判断是否存在重影。

23、一些实施例中，所述识别单元还用于：

24、使用compare it工具，对所述非重合部分的设计效果图代码与非重合部分的html页面代码进行识别对比。

25、第三方面，提供一种计算机设备包括：处理器、存储器、以及存储在所述存储器上并可被所述处理器执行的计算机程序，其中所述计算机程序被所述处理器执行时，实现第一方面任意一项所述的方法。

26、第四方面，提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，其中所述计算机程序被处理器执行时，实现第一方面任意一项所述的方法。

27、本发明中，通过将html页面与设计效果图调整为相同尺寸并进行重叠检查，识别非重合部分；将所述非重合部分对应的设计效果图代码与html页面代码进行对比，识别差异代码。可以减少人工检查的时间，降低沟通成本，提高工作效率。

技术特征：

1.一种ui界面走查的测试方法，其特征在于，该方法包括以下步骤：

2.如权利要求1所述的一种ui界面走查的测试方法，其特征在于，所述将html页面与设计效果图调整为相同尺寸并进行重叠检查，识别非重合部分，包括以下步骤：

3.如权利要求2所述的一种ui界面走查的测试方法，其特征在于，通过对比调节透明度后的设计效果图与html页面的：间距、宽度高度、icon图标大小、文字大小、字体、线框、位置布局、投影、颜色，判断是否存在重影。

4.如权利要求2所述的一种ui界面走查的测试方法，其特征在于，使用compare it工具，对所述非重合部分的设计效果图代码与非重合部分的html页面代码进行识别对比。

5.一种ui界面走查的测试装置，其特征在于，包括：

6.如权利要求5所述的一种ui界面走查的测试装置，其特征在于，所述识别单元用于：

7.如权利要求6所述的一种ui界面走查的测试装置，其特征在于，所述识别单元还用于：

8.如权利要求6所述的一种ui界面走查的测试装置，其特征在于，所述识别单元还用于：

9.一种计算机设备，其特征在于，所述计算机设备包括处理器、存储器、以及存储在所述存储器上并可被所述处理器执行的计算机程序，其中所述计算机程序被所述处理器执行时，实现如权利要求1至4中任一项所述的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，其中所述计算机程序被处理器执行时，实现如权利要求1至4中任一项所述的方法的步骤。

技术总结
本发明公开了一种UI界面走查的测试方法及装置，涉及计算机技术领域，一种UI界面走查的测试方法，包括以下步骤：将Html页面与设计效果图调整为相同尺寸并进行重叠检查，识别非重合部分；将所述非重合部分对应的设计效果图代码与Html页面代码进行对比，识别差异代码。本发明中的UI界面走查的测试方法，可以减少人工检查的时间，降低沟通成本，提高工作效率。

技术研发人员：喻宝琴,李吉,王正,周文峰
受保护的技术使用者：中电科长江数据有限公司
技术研发日：
技术公布日：2024/1/16