本发明专利技术公开了一种用户界面的测试方法、装置、计算机存储介质及电子设备，涉及金融科技领域，其中，该验证方法包括：获取用户界面的设计规范文件以及设计稿；提取设计稿中每个元素的图层位置信息以及图层样式信息，由设计稿中的元素确定设计稿中的组件，并根据组件中的元素的图层位置信息以及图层样式信息确定组件的类型；在设计规范文件中确定设计稿匹配的目标规范内容，并分别根据每个组件的类型确定组件ID，从目标规范内容提取每个组件ID关联的标准样式；将各个组件的图层样式信息与标准样式进行对比，得到对比结果，并展示对比结果，本发明专利技术解决了相关技术中通过人工的方式对组件进行对比与检测的效率低、准确率低的技术问题。准确率低的技术问题。准确率低的技术问题。
【技术实现步骤摘要】
用户界面的测试方法、装置、计算机存储介质及电子设备
[0001]本专利技术涉及金融科技领域，具体而言，涉及一种用户界面的测试方法、装置、计算机存储介质及电子设备。
技术介绍
[0002]一款软件展示出的用户界面，对用户良好印象的建立起到了重要作用，并且在软件设计研发之初，仍发挥着不可或缺的作用。因此，在软件领域，十分重视对用户界面的测试。用户界面测试包含对用户友好性、人性化、易操作性的测试，在软件设计阶段，当用户界面的设计与业界制定的设计规范存在差异，可以直接根据出现的问题进行软件的修改，也即能够帮助研发团队降低研发的试错成本、缩短研发周期。
[0003]但是当前对用户界面设计稿的合规性检测主要依赖于人工，利用肉眼对设计稿与设计规范进行比较，根据设计稿中的组件信息，在设计规范中查找对应的设计标准，进而进行手工标注，最后根据标注的组件类别展开检测。
[0004]针对相关技术中通过人工的方式对组件进行对比与检测的效率低、准确率低的问题，目前尚未提出有效的解决方案。
技术实现思路
[0005]本专利技术实施例提供了一种用户界面的测试方法、装置、计算机存储介质及电子设备，以至少解决相关技术中通过人工的方式对组件进行对比与检测的效率低、准确率低的技术问题。
[0006]根据本申请实施例的一个方面，提供了一种用户界面的测试方法。该方法包括：获取用户界面的设计规范文件，并打开服务器中存储的用户界面的设计稿，其中，设计稿为多个组件构成的设计稿，每个组件包含至少一个元素，设计规范文件包含多个设计规范内容，每个设计规范内容包含多个类型组件的组件ID和每个组件的标准样式；提取设计稿中每个元素的图层位置信息以及图层样式信息，由设计稿中的元素确定设计稿中的组件，并根据组件中的元素的图层位置信息以及图层样式信息确定组件的类型；在设计规范文件中确定设计稿匹配的目标规范内容，并分别根据设计稿的每个组件的类型确定组件ID，从目标规范内容提取每个组件ID关联的标准样式；将各个组件的图层样式信息与标准样式进行对比，得到对比结果，并在服务器的浏览器上展示对比结果。
[0007]可选地，获取用户界面的设计规范文件，并打开服务器中存储的用户界面的设计稿包括：获取服务器中存储的设计稿压缩包，并解压设计稿压缩包，得到设计稿；在服务器上执行预设启动命令加载设计稿，并打开设计稿，其中，预设启动命令用于调用浏览器驱动将设计稿加载至浏览器中。
[0008]可选地，提取设计稿中各个元素的图层位置信息以及图层样式信息包括：遍历设计稿，获取设计稿中的各个元素的图层的轮廓位置坐标，得到每个图层的图层位置信息；对于包含单个图层的元素，触发图层，得到元素的图层样式信息，并将图层的图层位置信息确
定为元素的图层位置信息，其中，图层样式信息至少包括以下之一样式信息：图层的尺寸、色彩以及元素上的文字；对于包含多个图层的元素，建立同一元素的多个图层的关联关系，并分别触发同一元素的多个图层，得到多个图层样式信息，由多个图层样式信息构成元素的图层样式信息，并由同一元素的多个图层的图层位置信息构成元素的图层位置信息，其中，包含多个图层的元素由以下方式确定：根据各个图层的图层位置信息确定具有包含关系的至少两个图层，将具有包含关系的至少两个图层确定为同一元素的图层。
[0009]可选地，由设计稿中的元素确定设计稿中的组件，并根据组件中的元素的图层位置信息以及图层样式信息确定组件的类型包括：根据设计稿中的元素的图层位置信息以及图层样式信息确定单组件的类型；将单组件以及未识别为组件的局部特征组合为组合组件，并确定组合组件的类型。
[0010]可选地，根据设计稿中的元素的图层位置信息以及图层样式信息确定单组件的类型包括：根据元素的图层位置信息对设计稿进行切图，得到多个子图，其中，每个子图中至少包含一个元素；对于每个子图，分别判断子图是否符合组件构建规则，若子图不符合组件构建规则，确定子图中不包含组件；若子图符合组件构建规则，根据组件构建规则对子图中的元素图层样式信息进行分析，得到子图中的组件以及组件属于各个类型的第一概率；将子图中的元素的图层样式信息输入第一图像识别模型，识别出子图中的组件以及组件属于各个类型的第二概率；确定组件构建规则关联的权重以及第一图像识别模型关联的权重，对每个组件属于各个类型的第一概率和第二概率进行加权求和，得到多个概率，将多个概率中的最大概率指示的类型确定为组件的类型。
[0011]可选地，将单组件以及未识别为组件的局部特征组合为组合组件，并确定组合组件的类型包括：根据组件组合规则对设计稿中的局部特征以及识别出的单组件进行组合和分析，得到多个组合组件以及每个组合组件属于各个类型的第三概率；将设计稿中的组合组件输入第二图像识别模型，识别出组合组件属于各个类型的第四概率；确定组件组合规则关联的权重以及第二图像识别模型关联的权重，对每个组合组件属于各个类型的第三概率和第四概率进行加权求和，得到多个概率，将多个概率中的最大概率指示的类型确定为组合组件的类型。
[0012]可选地，在服务器的浏览器上展示对比结果包括：根据各个组件的对比结果、组件的类型、组件的图层样式信息以及组件的标准样式信息构建表格，并在浏览器中展示构建的表格；或者分别将每个组件的对比结果、组件的类型、组件的图层样式信息以及组件的标准样式信息进行打包，得到打包信息，将打包信息关联至对应的组件上，并在接收到对组件执行的点击事件后，显示组件关联的打包信息。
[0013]根据本申请实施例的另一方面，提供了一种用户界面的测试装置。该装置包括：获取单元，用于获取用户界面的设计规范文件，并打开服务器中存储的用户界面的设计稿，其中，设计稿为多个组件构成的设计稿，每个组件包含至少一个元素，设计规范文件包含多个设计规范内容，每个设计规范内容包含多个类型组件的组件ID和每个组件的标准样式；提取单元，用于提取设计稿中每个元素的图层位置信息以及图层样式信息，由设计稿中的元素确定设计稿中的组件，并根据组件中的元素的图层位置信息以及图层样式信息确定组件的类型；确定单元，用于在设计规范文件中确定设计稿匹配的目标规范内容，并分别根据设计稿的每个组件的类型确定组件ID，从目标规范内容提取每个组件ID关联的标准样式；对
比单元，用于将各个组件的图层样式信息与标准样式进行对比，得到对比结果，并在服务器的浏览器上展示对比结果。
[0014]根据本专利技术实施例的另一方面，还提供了一种计算机可读存储介质，计算机可读存储介质包括存储的计算机程序，其中，在计算机程序运行时控制计算机可读存储介质所在设备执行上述用户界面的测试方法。
[0015]根据本专利技术实施例的另一方面，还提供了一种电子设备，包括一个或多个处理器和存储器，存储器用于存储一个或多个程序，其中，当一个或多个程序被一个或多个处理器执行时，使得一个或多个处理器实现上述用户界面的测试方法。
[0016]通过本申请，采用以下步骤：获取用户界面的设计规范文件，并打开服务器中存储的用户界面的设计稿，其中，设计稿为多个组件构成的设计本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种用户界面的测试方法，其特征在于，包括：获取用户界面的设计规范文件，并打开服务器中存储的用户界面的设计稿，其中，所述设计稿为多个组件构成的设计稿，每个组件包含至少一个元素，所述设计规范文件包含多个设计规范内容，每个设计规范内容包含多个类型组件的组件ID和每个组件的标准样式；提取所述设计稿中每个元素的图层位置信息以及图层样式信息，由所述设计稿中的元素确定所述设计稿中的组件，并根据组件中的元素的图层位置信息以及图层样式信息确定组件的类型；在所述设计规范文件中确定所述设计稿匹配的目标规范内容，并分别根据所述设计稿的每个组件的类型确定组件ID，从所述目标规范内容提取每个组件ID关联的标准样式；将各个组件的所述图层样式信息与所述标准样式进行对比，得到对比结果，并在所述服务器的浏览器上展示所述对比结果。2.根据权利要求1所述测试方法，其特征在于，获取用户界面的设计规范文件，并打开服务器中存储的用户界面的设计稿包括：获取所述服务器中存储的设计稿压缩包，并解压所述设计稿压缩包，得到所述设计稿；在所述服务器上执行预设启动命令加载所述设计稿，并打开所述设计稿，其中，所述预设启动命令用于调用浏览器驱动将所述设计稿加载至浏览器中。3.根据权利要求1所述测试方法，其特征在于，提取所述设计稿中各个元素的图层位置信息以及图层样式信息包括：遍历所述设计稿，获取所述设计稿中的各个元素的图层的轮廓位置坐标，得到每个图层的图层位置信息；对于包含单个图层的元素，触发图层，得到元素的图层样式信息，并将所述图层的图层位置信息确定为所述元素的图层位置信息，其中，所述图层样式信息至少包括以下之一样式信息：图层的尺寸、色彩以及元素上的文字；对于包含多个图层的元素，建立同一元素的多个图层的关联关系，并分别触发同一元素的多个图层，得到多个图层样式信息，由所述多个图层样式信息构成元素的图层样式信息，并由同一元素的多个图层的图层位置信息构成元素的图层位置信息，其中，包含多个图层的元素由以下方式确定：根据各个图层的图层位置信息确定具有包含关系的至少两个图层，将具有包含关系的至少两个图层确定为同一元素的图层。4.根据权利要求1所述测试方法，其特征在于，由所述设计稿中的元素确定所述设计稿中的组件，并根据组件中的元素的图层位置信息以及图层样式信息确定组件的类型包括：根据所述设计稿中的元素的图层位置信息以及图层样式信息确定单组件的类型；将所述单组件以及未识别为组件的局部特征组合为组合组件，并确定所述组合组件的类型。5.根据权利要求4所述测试方法，其特征在于，根据所述设计稿中的元素的图层位置信息以及图层样式信息确定单组件的类型包括：根据所述元素的图层位置信息对所述设计稿进行切图，得到多个子图，其中，每个子图中至少包含一个元素；对于每个子图，分别判断子图是否符合组件构建规则，若子图不符合组件构建规则，确定所述子图中不包含组件；
若子图符合组件构建规则，根据组件构建规则对所述子图中的元素图层样式信息进行分析，得到所...
【专利技术属性】
技术研发人员：勾志营，黄俊文，谢林洁，
申请(专利权)人：中国工商银行股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。