用户界面视觉验证方法、装置、计算机设备及存储介质与流程

1.本发明涉及ui设计领域，尤其涉及一种用户界面视觉验证方法、装置、计算机设备及存储介质。


背景技术：

2.在应用程序的开发测试过程中，通常需要对应用程序的ui(user interface，用户界面)进行视觉验证，以保证ui的显示符合用户需求。现有视觉的验证方式一般依赖ui工程师的个人经验进行人工比对，有时还受到显示屏显示效果的影响，比对效率低下。通过截图对比ui图片和ui设计稿的分辨率、色号、间距等属性，准确率低，特别在不同的分辨率下容易造成较大误差。


技术实现要素：

3.基于此，有必要针对上述技术问题，提供一种用户界面视觉验证方法、装置、计算机设备及存储介质，以提高用户界面视觉验证的效率和准确率。
4.一种用户界面视觉验证方法，包括：
5.从待验证的用户界面爬取第一页面元素属性数据；从与所述用户界面对应的界面设计文档爬取第二页面元素属性数据；
6.获取所述用户界面与所述界面设计文档之间的属性关联数据；
7.根据所述属性关联数据对所述第一页面元素属性数据和所述第二页面元素属性数据进行属性解析，生成待比对文档；所述待比对文档包括所述第一页面元素属性数据的第一属性转换数据；
8.对所述待比对文档进行差异分析，生成视觉验证结果。
9.一种用户界面视觉验证装置，包括：
10.爬取数据模块，用于从待验证的用户界面爬取第一页面元素属性数据；从与所述用户界面对应的界面设计文档爬取第二页面元素属性数据；
11.获取属性关联数据模块，用于获取所述用户界面与所述界面设计文档之间的属性关联数据；
12.生成比对文档模块，用于根据所述属性关联数据对所述第一页面元素属性数据和所述第二页面元素属性数据进行属性解析，生成待比对文档；所述待比对文档包括所述第一页面元素属性数据的第一属性转换数据；
13.生成验证结果模块，用于对所述待比对文档进行差异分析，生成视觉验证结果。
14.一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机可读指令，所述处理器执行所述计算机可读指令时实现上述用户界面视觉验证方法。
15.一个或多个存储有计算机可读指令的可读存储介质，所述计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器执行如上述用户界面视觉验证方法。
16.上述用户界面视觉验证方法、装置、计算机设备及存储介质，通过从待验证的用户界面爬取第一页面元素属性数据；从与所述用户界面对应的界面设计文档爬取第二页面元素属性数据，以分别爬取需要进行比对的两种数据(第一页面元素属性数据和第二页面元素属性数据)，提高数据的获取效率。获取所述用户界面与所述界面设计文档之间的属性关联数据，以明确第一页面元素属性数据和第二页面元素属性数据之间的关联关系。根据所述属性关联数据对所述第一页面元素属性数据和所述第二页面元素属性数据进行属性解析，生成待比对文档；所述待比对文档包括所述第一页面元素属性数据的第一属性转换数据，以通过属性关联数据对第一页面元素属性数据和/或第二页面元素属性数据进行转换，实现两种数据的比对。对所述待比对文档进行差异分析，生成视觉验证结果，在此处，通过待比对文档中的属性数据进行直接比对，比对效率和准确率更高。本发明通过属性数据的比对，可以准确高效地获得视觉验证结果，大大缩短测试时间，减少人力成本。
附图说明
17.为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
18.图1是本发明一实施例中用户界面视觉验证方法的一应用环境示意图；
19.图2是本发明一实施例中用户界面视觉验证方法的一流程示意图；
20.图3是本发明一实施例中用户界面视觉验证装置的一结构示意图；
21.图4是本发明一实施例中计算机设备的一示意图。
具体实施方式
22.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
23.本实施例提供的用户界面视觉验证方法，可应用在如图1的应用环境中，其中，客户端与服务端进行通信。其中，客户端包括但不限于各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备。服务端可以用独立的服务器或者是多个服务器组成的服务器集群来实现。
24.在一实施例中，如图2所示，提供一种用户界面视觉验证方法，以该方法应用在图1中的服务端为例进行说明，包括如下步骤s10-s40。
25.s10、从待验证的用户界面爬取第一页面元素属性数据；从与所述用户界面对应的界面设计文档爬取第二页面元素属性数据。
26.可理解地，待验证的用户界面指的是前端开发人员基于ui设计师提供的界面设计文档开发的前端页面。在此处，待验证的用户界面可以是网页页面，也可以是应用程序的应用界面。第一页面元素属性数据指的是用户界面中页面元素的属性数据，如可以是标题字号、字体、色号、间距、行高、透明度。可以通过爬虫技术爬取若干用户界面的第一页面元素
属性数据，以提高第一页面元素属性数据的获取效率。
27.界面设计文档指的是ui设计师基于实际需要完成的设计文档。在此处，界面设计文档包括若干设计页面。每个设计页面设置有若干元素标签，这些元素标签用于标注设计画面中页面元素的归属。如，对于标题字号、字体、色号、间距、行高、透明度等属性，添加class＝title1标签；对正文1的字号、字体、色号、间距等属性，添加class＝content1标签；对按钮的颜色、边框宽度、圆角等属性，添加class＝btn1标签；对框图或边框图表等颜色、粗细、填充、大小宽高、透明的等信息，添加class＝picline1标签。在此处，可以通过爬虫技术爬取界面设计文档中各个元素标签，生成第二页面元素属性数据。
28.s20、获取所述用户界面与所述界面设计文档之间的属性关联数据。
29.可理解地，属性关联数据包括界面设计文档中的元素标签(第二属性)与用户界面中的页面元素的属性(第一属性)之间的关联关系。例如，界面设计文档中的元素标签title1与用户界面中的页面元素的属性title2关联。在此处，属性关联数据可以包括预先制定好的关联关系，也可以是开发人员基于实际状况设置的关联关系。
30.s30、根据所述属性关联数据对所述第一页面元素属性数据和所述第二页面元素属性数据进行属性解析，生成待比对文档；所述待比对文档包括所述第一页面元素属性数据的第一属性转换数据。
31.可理解地，在获取属性关联数据之后，可以根据界面设计文档中的元素标签与用户界面中的页面元素的属性之间的关联关系，对第一页面元素属性数据进行属性转换，生成对应的第一属性转换数据。在此处，待比对文档包括第一属性转换数据。换句话说，在待比对文档中，用户界面的属性数据与界面设计文档属性数据可以直接比对。
32.例如，可以将第一页面元素属性数据转化为与第二页面元素属性数据在格式上一致的第一属性转换数据。例如，在用户界面中，title表示为title1；在界面设计文档中，title表示为title2，则可以将第一属性转换数据中所有的title1替换为title2，形成第一属性转换数据。
33.待比对文档包括第一属性转换数据和第二页面元素属性数据。
34.在一示例中，待比对文档可表示为：
35.title2：a(指代用户界面)：abc(属性值)；b(指代界面设计文档)：abc(属性值)；
36.……
。
37.s40、对所述待比对文档进行差异分析，生成视觉验证结果。
38.可理解地，由于待比对文档中的用户界面的属性数据与界面设计文档属性数据可以直接比对，因而，可以从待比对文档提取出若干属性值存在差异的属性数据，形成视觉验证结果。
39.如表1所示，表1为一示例的视觉验证结果。
40.表1一示例的视觉验证结果
41.属性数据用户界面界面设计文档color12550color2200150title3abcabc
42.步骤s10-s40中，从待验证的用户界面爬取第一页面元素属性数据；从与所述用户
界面对应的界面设计文档爬取第二页面元素属性数据，以分别爬取需要进行比对的两种数据(第一页面元素属性数据和第二页面元素属性数据)，提高数据的获取效率。获取所述用户界面与所述界面设计文档之间的属性关联数据，以明确第一页面元素属性数据和第二页面元素属性数据之间的关联关系。根据所述属性关联数据对所述第一页面元素属性数据和所述第二页面元素属性数据进行属性解析，生成待比对文档；所述待比对文档包括所述第一页面元素属性数据的第一属性转换数据，以通过属性关联数据对第一页面元素属性数据和/或第二页面元素属性数据进行转换，实现两种数据的比对。对所述待比对文档进行差异分析，生成视觉验证结果，在此处，通过待比对文档中的属性数据进行直接比对，比对效率和准确率更高。本实施例通过属性数据的比对，可以准确高效地获得视觉验证结果，大大缩短测试时间，减少人力成本。
43.可选的，步骤s10中，即所述从与所述用户界面对应的界面设计文档爬取第二页面元素属性数据，包括：
44.s101、获取设置有多个元素标签的所述界面设计文档；
45.s102、根据所述元素标签从所述界面设计文档爬取所述第二页面元素属性数据。
46.可理解地，ui设计师在制作界面设计文档，可以按照一定的设置规范为设计页面的页面模块或页面元素添加唯一的元素标签。如，对于标题字号、字体、色号、间距、行高、透明度等属性，添加class＝title1标签；对正文1的字号、字体、色号、间距等属性，添加class＝content1标签；对按钮的颜色、边框宽度、圆角等属性，添加class＝btn1标签；对框图或边框图表等颜色、粗细、填充、大小宽高、透明的等信息，添加class＝picline1标签。
47.可以通过爬虫技术从界面设计文档爬取各个元素标签的标签值，生成第二页面元素属性数据。
48.可选的，步骤s20，即所述获取所述用户界面与所述界面设计文档之间的属性关联数据，包括
49.s201、接收属性关联指令；
50.s201、根据所述属性关联指令设置所述用户界面中页面元素的属性与所述界面设计文档中的元素标签之间的关联关系，获得所述属性关联数据。
51.可理解地，属性关联指令可以是测试人员输入的用于确定两种属性关联关系的指令。可以通过属性关联指令设置用户界面中页面元素的属性(简写为页面元素属性)与界面设计文档中的元素标签(简写为元素标签)之间的关联关系。比如，标题1在用户界面使用的css样式的class为class＝title_one，标题1在界面设计文档中的class为class＝title1，则，它们之间的关联关系可以表示为：title_one——》title1。属性关联数据包括多组页面元素属性与元素标签之间的关联关系。一个页面元素属性对应一个元素标签。
52.可选的，步骤s40，即所述对所述待比对文档进行差异分析，生成视觉验证结果，包括：
53.s401、从所述待比对文档中提取属性值存在差异的差异属性数据；
54.s402、根据预设评价方法对所述差异属性数据进行评价，生成所述视觉验证结果。
55.可理解地，若某属性在用户界面中的属性值与其在界面设计文档中的属性值不同，则将该属性标记为差异属性，同时提取相应的差异属性数据。差异属性数据包括差异属性在用户界面中的属性值，以及该差异属性在界面设计文档中的属性值。
56.预设评价方法可以根据实际需要进行设置。在一些情况下，可以根据差异属性数据中差异属性的差异程度进行评分或评级，得到相应的评价分数或评价等级。例如，用户界面中某边框的长度为399px，界面设计文档中某边框的长度为400px，基于预设评价方法可以评价该边框的评价分数为95分。视觉验证结果包括所有差异属性的评价分数。
57.特别的，差异属性数据可以是空集。此时，说明用户界面与界面设计文档完全匹配，此时可以输出相应的视觉验证结果。
58.可选的，所述差异属性数据包括若干差异属性及相应的属性值；所述预设评价方法包括属性评价规则和属性权重数据；
59.步骤s402，即所述根据预设评价方法对所述差异属性数据进行评价，生成所述视觉验证结果，包括：
60.s4021、从所述属性评价规则获取所述差异属性的评价规则，从所述属性权重数据获取所述差异属性的权重因子；
61.s4022、根据所述属性评价规则对所述差异属性的属性值进行评价，获得差异属性评价分数；
62.s4023、根据若干所述差异属性评价分数以及相应的权重因子计算加权和，获得综合评价分数，所述视觉验证结果包括所述综合评价分数。
63.可理解地，待验证的用户界面与界面设计文档之间可能存在若干个差异属性，如页面1中，用户界面与界面设计文档可能在字体、字号大小、行距等方面存在不一致，页面2又存在其他方面的差异。
64.属性评价规则可以是经验性的评判规则。可以基于历史的界面视觉验证记录总结出相应的属性评价规则。属性评价规则可以评估当某个属性发生变化时所产生的影响。例如，网页从字体a换成字体b，可以通过属性评价规则生成相应的字体评价分数。同一差异属性在不同类型的网页，其对应的属性评价规则一般存在差异。例如，对于小说类的网页，字体使用的是字体规则1；对于图片类的网页，字体使用的是字体规则2。
65.属性权重数据可以是基于经验设置的权重数据。在同一页面中，不同的页面属性，具有不同的权重值。不同类型的页面，其权重值的分配通常也是存在区别的。
66.可以使用属性评价规则对差异属性的属性值进行评价，获得相应的差异属性评价分数。在计算出所有差异属性的属性评价分数之后，可以计算它们的加权和，即为综合评价分数。在一些示例中，视觉验证结果包括综合评价分数。综合评价分数可以综合反映待验证的用户界面与界面设计文档之间的整体差异程度。
67.可选的，步骤s30，即所述根据所述属性关联数据对所述第一页面元素属性数据和所述第二页面元素属性数据进行属性解析，生成待比对文档；包括：
68.s301、根据所述属性关联数据对所述第一页面元素属性数据进行属性解析，确定与所述第一页面元素属性数据中的各个第一属性关联的第二属性，将所述第一属性的属性值赋予与所述第一属性关联的第二属性，生成所述第一属性转换数据；
69.s302、将所述第一属性转换数据和所述第二页面元素属性数据填入预设模板，生成所述待比对文档。
70.可理解地，在此处，属性关联数据记录了用户界面的第一属性与界面设计文档的第二属性的关联关系。因而，逐一查找与第一页面元素属性数据中的各个第一属性关联的
第二属性，然后将第一属性的属性值赋予给第二属性，生成第一属性转换数据。例如，在第一页面元素属性数据中，第一属性为title1；可以查找到相应的第二属性为title2，可以将title1的属性值赋予给title2，形成第一属性转换数据。
71.在获得第一属性转换数据和第二页面元素属性数据之后，可以将它们填入预设模板中，生成待比对文档。预设模板可以根据实际需要进行设置。在一示例中，待比对文档可表示为：
72.title2：a(指代用户界面)：abc(属性值)；b(指代界面设计文档)：abc(属性值)；
73.……
。
74.可选的，步骤s40之后，即所述对所述待比对文档进行差异分析，生成视觉验证结果之后，还包括：
75.s41、判断所述视觉验证结果是否满足预设验证要求；
76.s42、若所述视觉验证结果不满足预设验证要求，获取与所述视觉验证结果匹配的界面修正措施；
77.s43、查询与所述界面修正措施匹配的技术人员，并生成包含所述界面修正措施的修正任务；
78.s44、将所述修正任务分配给所述技术人员。
79.可理解地，预设验证要求可以根据实际需要进行设置。例如，预设验证要求可以设置为：若综合评价分数大于预设阈值，则判定视觉验证结果满足预设验证要求；否则，则判定视觉验证结果不满足预设验证要求。若视觉验证结果满足预设验证要求，说明用户界面通过验证，符合页面发布的条件。若视觉验证结果不满足预设验证要求，说明用户界面未通过验证。此时，可以为视觉验证结果匹配相应的界面修正措施。例如，视觉验证结果中，字体属性的评价分数过低，则可以匹配相应的字体修正措施。
80.然后查询与界面修正措施匹配的技术人员(该技术人员的标识)。在此处，技术人员可以是一个或多个，如可以包括界面设计文档的设计人员和/或网页开发人员。同时生成修正任务，并将修正任务分配给技术人员。技术人员在接收到修正任务之后，可以对用户界面再次核验，若存在问题，则采用适当的修正措施(可以是修正任务中的界面修正措施，也可以技术人员自主决定的其他修正措施)进行修正，同时生成修正记录。该修正记录可用于为后续的视觉验证结果匹配修正措施。在一些情况下，修正任务中包含的一些修正措施，需要同时分配给设计人员和网页开发人员，由双方商讨，以确定最终的网页设计方案。
81.应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。
82.在一实施例中，提供一种用户界面视觉验证装置，该用户界面视觉验证装置与上述实施例中用户界面视觉验证方法一一对应。如图4所示，该用户界面视觉验证装置包括爬取数据模块10、获取属性关联数据模块20、生成比对文档模块30和生成验证结果模块40。各功能模块详细说明如下：
83.爬取数据模块10，用于从待验证的用户界面爬取第一页面元素属性数据；从与所述用户界面对应的界面设计文档爬取第二页面元素属性数据；
84.获取属性关联数据模块20，用于获取所述用户界面与所述界面设计文档之间的属
性关联数据；
85.生成比对文档模块30，用于根据所述属性关联数据对所述第一页面元素属性数据和所述第二页面元素属性数据进行属性解析，生成待比对文档；所述待比对文档包括所述第一页面元素属性数据的第一属性转换数据；
86.生成验证结果模块40，用于对所述待比对文档进行差异分析，生成视觉验证结果。
87.可选的，爬取数据模块10包括：
88.获取设计文档单元，用于获取设置有多个元素标签的所述界面设计文档；
89.第二属性数据爬取单元，用于根据所述元素标签从所述界面设计文档爬取所述第二页面元素属性数据。
90.可选的，获取属性关联数据模块20包括：
91.接收关联指令单元，用于接收属性关联指令；
92.获取属性关联数据单元，用于根据所述属性关联指令设置所述用户界面中页面元素的属性与所述界面设计文档中的元素标签之间的关联关系，获得所述属性关联数据。
93.可选的，生成验证结果模块40包括：
94.提取差异属性数据单元，用于从所述待比对文档中提取属性值存在差异的差异属性数据；
95.生成视觉验证结果单元，用于根据预设评价方法对所述差异属性数据进行评价，生成所述视觉验证结果。
96.可选的，所述差异属性数据包括若干差异属性及相应的属性值；所述预设评价方法包括属性评价规则和属性权重数据；
97.生成视觉验证结果单元包括：
98.获取规则单元，用于从所述属性评价规则获取所述差异属性的评价规则，从所述属性权重数据获取所述差异属性的权重因子；
99.属性评价单元，用于根据所述属性评价规则对所述差异属性的属性值进行评价，获得差异属性评价分数；
100.综合评价单元，用于根据若干所述差异属性评价分数以及相应的权重因子计算加权和，获得综合评价分数，所述视觉验证结果包括所述综合评价分数。
101.可选的，生成比对文档模块30包括：
102.第一属性转换单元，用于根据所述属性关联数据对所述第一页面元素属性数据进行属性解析，确定与所述第一页面元素属性数据中的各个第一属性关联的第二属性，将所述第一属性的属性值赋予与所述第一属性关联的第二属性，生成所述第一属性转换数据；
103.第一文档生成单元，用于将所述第一属性转换数据和所述第二页面元素属性数据填入预设模板，生成所述待比对文档。
104.可选的，用户界面视觉验证装置还包括：
105.结果判断模块，用于判断所述视觉验证结果是否满足预设验证要求；
106.获取修正措施模块，用于若所述视觉验证结果不满足预设验证要求，获取与所述视觉验证结果匹配的界面修正措施；
107.生成修正任务模块，用于查询与所述界面修正措施匹配的技术人员，并生成包含所述界面修正措施的修正任务；
108.任务分配模块，用于将所述修正任务分配给所述技术人员。
109.关于用户界面视觉验证装置的具体限定可以参见上文中对于用户界面视觉验证方法的限定，在此不再赘述。上述用户界面视觉验证装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
110.在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务器，其内部结构图可以如图4所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括可读存储介质、内存储器。该可读存储介质存储有操作系统、计算机可读指令和数据库。该内存储器为可读存储介质中的操作系统和计算机可读指令的运行提供环境。该计算机设备的数据库用于存储用户界面视觉验证方法所涉及的数据。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机可读指令被处理器执行时以实现一种用户界面视觉验证方法。本实施例所提供的可读存储介质包括非易失性可读存储介质和易失性可读存储介质。
111.在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机可读指令，处理器执行计算机可读指令时实现以下步骤：
112.从待验证的用户界面爬取第一页面元素属性数据；从与所述用户界面对应的界面设计文档爬取第二页面元素属性数据；
113.获取所述用户界面与所述界面设计文档之间的属性关联数据；
114.根据所述属性关联数据对所述第一页面元素属性数据和所述第二页面元素属性数据进行属性解析，生成待比对文档；所述待比对文档包括所述第一页面元素属性数据的第一属性转换数据；
115.对所述待比对文档进行差异分析，生成视觉验证结果。
116.在一个实施例中，提供了一个或多个存储有计算机可读指令的计算机可读存储介质，本实施例所提供的可读存储介质包括非易失性可读存储介质和易失性可读存储介质。可读存储介质上存储有计算机可读指令，计算机可读指令被一个或多个处理器执行时实现以下步骤：
117.从待验证的用户界面爬取第一页面元素属性数据；从与所述用户界面对应的界面设计文档爬取第二页面元素属性数据；
118.获取所述用户界面与所述界面设计文档之间的属性关联数据；
119.根据所述属性关联数据对所述第一页面元素属性数据和所述第二页面元素属性数据进行属性解析，生成待比对文档；所述待比对文档包括所述第一页面元素属性数据的第一属性转换数据；
120.对所述待比对文档进行差异分析，生成视觉验证结果。
121.本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，所述的计算机可读指令可存储于一非易失性可读取存储介质或易失性可读存储介质中，该计算机可读指令在执行时，可包括如上述各方法的实施例的流程。其中，本技术所提供的各实施例中所使用的对存储器、存储、数据
库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(rom)、可编程rom(prom)、电可编程rom(eprom)、电可擦除可编程rom(eeprom)或闪存。易失性存储器可包括随机存取存储器(ram)或者外部高速缓冲存储器。作为说明而非局限，ram以多种形式可得，诸如静态ram(sram)、动态ram(dram)、同步dram(sdram)、双数据率sdram(ddrsdram)、增强型sdram(esdram)、同步链路(synchlink)dram(sldram)、存储器总线(rambus)直接ram(rdram)、直接存储器总线动态ram(drdram)、以及存储器总线动态ram(rdram)等。
122.所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。
123.以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。