自动化视觉验收方法和装置与流程

1.本发明涉及软件设计及测试技术领域，可用于金融领域，尤其涉及一种自动化视觉验收方法和装置。


背景技术：

2.项目整个流程中，设计师负责提供视觉设计稿，包括标注和切图，然后交接给研发人员进行编码开发，但是往往研发人员真正开发出来的页面与视觉设计稿有出入，诸如图片变形、文字字号不对等时有发生，导致最终无法以完美的效果呈现给客户。目前针对视觉设计稿(下称“视觉图”)与开发页面(下称“研发图”)不一致的问题，很多时候依靠手动叠图比对，由功能测试人员主动在测试工程中发现，或者是设计师进行视觉走查时发现。这种方式虽然可以一定程度上减少视觉图与研发图不一致的问题，但是很大程度上依靠人工测试、比对，如果有问题需要研发人员修改打包重新测试，不仅人力消耗巨大，而且耗时也很长。


技术实现要素：

3.有鉴于此，本发明提供一种自动化视觉验收方法和装置，以解决上述提及的至少一个问题。
4.为了实现上述目的，本发明采用以下方案：
5.根据本发明的第一方面，提供一种自动化视觉验收方法，所述方法包括：基于设计完成的视觉稿生成视觉图dom树；基于编码完成的研发稿生成研发图dom树；将所述视觉图dom树和所述研发图dom树进行自动比对，生成比对结果报告和代码修改建议。
6.作为本发明的一个实施例，上述方法中基于设计完成的视觉稿生成视觉图dom树包括：根据第一任务信号从视觉图托管服务器下载视觉稿；遍历所述视觉稿各个图层，根据所述视觉稿的批注自上而下导出页面元素来形成dom树；对所述dom树进行透明图层过滤、边缘去重、节点合并和文本转换处理形成视觉图dom树。
7.作为本发明的一个实施例，上述方法中根据第一任务信号从视觉图托管服务器下载视觉稿包括：接收第一任务信号后根据负载均衡策略选择视觉图处理服务器；所述视觉图处理服务器将第一任务加入并发队列或排队等待；所述第一任务开始执行时所述视觉图处理服务器从视觉图托管服务器下载视觉稿。
8.作为本发明的一个实施例，上述方法中基于编码完成的研发稿生成研发图dom树包括：根据第二任务信号从代码托管服务器下载视觉代码；部署所述视觉代码并渲染页面；基于opencv算法，对渲染生成的页面进行页面遍历、图层识别、元素识别、边缘去重、节点重算和图文转换处理来形成研发图dom树。
9.作为本发明的一个实施例，上述方法中根据第二任务信号从代码托管服务器下载视觉代码包括：接收第二任务信号后根据负载均衡策略选择研发图处理服务器；所述研发图处理服务器将第二任务加入并发队列或排队等待；所述第二任务开始执行时所述研发图
处理服务器从代码托管服务器下载视觉代码。
10.作为本发明的一个实施例，上述方法中将所述视觉图dom树和所述研发图dom树进行自动比对包括：根据第三任务信号下载所述视觉图dom树和所述研发图dom树；基于mobilenetv2算法，将所述视觉图dom树和所述研发图dom树进行遍历匹配。
11.作为本发明的一个实施例，上述方法中基于mobilenetv2算法，将所述视觉图dom树和所述研发图dom树进行遍历匹配包括：将所述视觉图dom树和所述研发图dom树进行顺序对齐，图层统一，然后逐区块、逐图层进行交叉比对；针对文字元素来比对字体、字号、位置、颜色和文字内容，同时根据通配符泛化文字内容，对通配符文本进行忽略处理；针对图片元素来比对图像相似度和位置；根据匹配度删选出字体异常、颜色异常、尺寸异常和位置异常信息。
12.根据本发明的第二方面，提供一种自动化视觉验收装置，装置包括：视觉图dom树生成单元，用于基于设计完成的视觉稿生成视觉图dom树；研发图dom树生成单元，用于基于编码完成的研发稿生成研发图dom树；比对单元，用于将所述视觉图dom树和所述研发图dom树进行自动比对；报告生成单元，用于根据所述比对单元的比对结果生成比对结果报告和代码修改建议。
13.作为本发明的一个实施例，上述视觉图dom树生成单元包括：下载模块，用于根据第一任务信号从视觉图托管服务器下载视觉稿；遍历导出模块，用于遍历所述视觉稿各个图层，根据所述视觉稿的批注自上而下导出页面元素来形成dom树；处理模块，用于对所述dom树进行透明图层过滤、边缘去重、节点合并和文本转换处理形成视觉图dom树。
14.作为本发明的一个实施例，上述视觉图dom树生成单元中的下载模块包括：选择子模块和视觉图处理服务器，其中选择子模块用于接收第一任务信号后根据负载均衡策略选择视觉图处理服务器；所述视觉图处理服务器将第一任务加入并发队列或排队等待；所述第一任务开始执行时所述视觉图处理服务器从视觉图托管服务器下载视觉稿。
15.作为本发明的一个实施例，上述研发图dom树生成单元包括：下载模块，用于根据第二任务信号从代码托管服务器下载视觉代码；渲染模块，用于部署所述视觉代码并渲染页面；处理模块，用于基于opencv算法，对渲染生成的页面进行页面遍历、图层识别、元素识别、边缘去重、节点重算和图文转换处理来形成研发图dom树。
16.作为本发明的一个实施例，上述研发图dom树生成单元中的下载模块包括：选择子模块和研发图处理服务器，其中选择子模块用于接收第二任务信号后根据负载均衡策略选择研发图处理服务器；所述研发图处理服务器将第二任务加入并发队列或排队等待；所述第二任务开始执行时所述研发图处理服务器从代码托管服务器下载视觉代码。
17.作为本发明的一个实施例，上述比对单元包括：下载模块，用于根据第三任务信号下载所述视觉图dom树和所述研发图dom树；遍历匹配模块，用于基于mobilenetv2算法，将所述视觉图dom树和所述研发图dom树进行遍历匹配。
18.作为本发明的一个实施例，上述遍历匹配模块包括：交叉比对子模块，用于将所述视觉图dom树和所述研发图dom树进行顺序对齐，图层统一，然后逐区块、逐图层进行交叉比对；文字比对子模块，用于针对文字元素来比对字体、字号、位置、颜色和文字内容，同时根据通配符泛化文字内容，对通配符文本进行忽略处理；图片比对子模块，用于针对图片元素来比对图像相似度和位置；异常筛选子模块，用于根据匹配度筛选出字体异常、颜色异常、
尺寸异常和位置异常信息。
19.根据本发明的第三方面，提供一种电子设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，处理器执行所述计算机程序时实现上述方法的步骤。
20.根据本发明的第四方面，提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述方法的步骤。
21.由上述技术方案可知，本发明提供的自动化视觉验收方法和装置，通过比对视觉图与研发图dom树的区别，可以更好的确定差异点并给出修改方案，适用于设计验收和开发自测，可以有效减少人力支出与时间成本。
附图说明
22.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：
23.图1是本技术实施例提供的一种自动化视觉验收方法的流程示意图；
24.图2是本技术另一实施例提供的一种自动化视觉验收方法的流程示意图；
25.图3是本技术实施例提供的从视觉图托管服务器下载视觉稿的流程示意图；
26.图4是本技术实施例提供的从代码托管服务器下载视觉代码的流程示意图；
27.图5是本技术实施例提供的视觉图dom树和研发图dom树进行遍历匹配的流程示意图；
28.图6是本技术实施例提供的一种自动化视觉验收装置的结构示意图；
29.图7是本技术实施例提供的视觉图dom树生成单元的结构示意图；
30.图8是本技术实施例提供的研发图dom树生成单元的结构示意图；
31.图9是本技术实施例提供的比对单元的结构示意图；
32.图10是本技术实施例提供的遍历匹配模块的结构示意图；
33.图11是本技术实施例提供的电子设备的系统构成示意框图。
具体实施方式
34.为使本发明实施例的目的、技术方案和优点更加清楚明白，下面结合附图对本发明实施例做进一步详细说明。在此，本发明的示意性实施例及其说明用于解释本发明，但并不作为对本发明的限定。
35.由于目前在针对发现视觉图和研发图不一致问题的时候，很多时候都依靠手动叠图比对，由功能测试人员主动在测试工程中发现，或者是设计师进行视觉走查时发现。这种发现问题的方式很大程度上依靠人工测试和比对，不仅人力消耗巨大，而且耗时很长。因此本技术就是为了解决上述技术问题，提出一种自动化视觉验收方法和装置，可以快速找出视觉图和研发图不一致的地方。
36.如图1所示为本技术实施例提供的一种自动化视觉验收方法的流程示意图，本实施例是从自动化视觉验收装置侧进行的描述，该自动化视觉验收装置可以是服务器、服务
器集群、终端电脑、平板电脑、智能穿戴设备等，该方法包括如下步骤：
37.步骤s101：基于设计完成的视觉稿生成视觉图dom树。
38.本实施例中的视觉稿是在项目流程流转到视觉设计师端的时候，由视觉设计师所完成的，该视觉稿可以是基于比如photoshop、illustrator、coreldraw、pagemaker等软件所完成的。视觉设计师在完成视觉稿的设计后，可以将设计好的视觉稿上传至视觉图托管服务器进行存储。然后由自动化视觉验收装置基于任务信号从视觉图托管服务器下载该视觉稿，并基于该视觉稿生成视觉图dom树(document object model tree)。
39.dom树一般是指网页文档中所有元素的层次结构。每个html标记、文本节点和元素属性都作为一个节点在dom树中表示，它们都是一个对象，可以通过javascript或其他脚本语言进行访问和操作。在本实施例中，利用了dom树形式的层次结构，以及节点和元素属性来描述平面图类型的视觉稿，以方便何须与研发稿所生成的dom树进行比对。
40.步骤s102：基于编码完成的研发稿生成研发图dom树。
41.本实施例中的研发稿是由研发人员根据视觉稿进行编码而完成的，研发工程师可以将编码完成的研发稿上传至代码托管服务器进行存储。然后由自动化视觉验收装置基于任务信号从代码托管服务器下载该研发稿，并基于该研发稿生成研发图dom树。
42.步骤s103：将所述视觉图dom树和所述研发图dom树进行自动比对，生成比对结果报告和代码修改建议。
43.由于dom树可以包含页面的各种元素，比如文字、图片、位置信息等，因此可以通过比对dom树来快速确认各种元素的差异，并根据该差异形成结果报告和代码修改建议给研发人员和设计人员。
44.由上述技术方案可知，本发明提供的自动化视觉验收方法，通过比对视觉图与研发图dom树的区别，可以更好的确定差异点并给出修改方案，适用于设计验收和开发自测，可以有效减少人力支出与时间成本。
45.如图2所示为本技术另一实施例提供的一种自动化视觉验收方法的流程示意图，该方法包括如下步骤：
46.步骤s201：根据第一任务信号从视觉图托管服务器下载视觉稿。
47.在本实施例中，第一任务信号、第二任务信号及第三任务信号是指任务流转到每个阶段所发出的任务执行信号。
48.步骤s201-s203可以由视觉图处理服务器来完成，该视觉图处理服务器可以是单一的服务器单元，也可以是一个服务器集群所构成。由时间设计师设计完成的视觉稿被上传至视觉图托管服务器进行暂存，视觉图处理服务器监听任务状态，其可以在没有任务信号的时候进入低功耗的等待模式，当监听到任务信号(第一任务信号)的时候，可以从视觉图托管服务器下载视觉稿，对于下载目标的确定，可以通过任务编码来实现，通过任务编码在视觉图托管服务器寻找对应的视觉稿并进行下载。
49.当视觉图处理服务器是一个服务器集群的时候，优选的，如图3所示，本步骤进一步可以包括如下子步骤：
50.步骤s2011：接收第一任务信号后根据负载均衡策略选择视觉图处理服务器。负载均衡策略是将此任务分配给空闲的视觉图处理服务器或预估可以最快完成任务的视觉图处理服务器。
51.步骤s2012：所述视觉图处理服务器将第一任务加入并发队列或排队等待。
52.分配到任务的视觉图处理服务器，可以根据自身的算力负荷以及并发数量，将第一任务加入并发队列或正常处理队列排队等待处理。
53.步骤s2013：所述第一任务开始执行时所述视觉图处理服务器从视觉图托管服务器下载视觉稿。
54.步骤s202：遍历所述视觉稿各个图层，根据所述视觉稿的批注自上而下导出页面元素来形成dom树。
55.步骤s203：对所述dom树进行透明图层过滤、边缘去重、节点合并和文本转换处理形成视觉图dom树。
56.上述步骤s202-s203是基于视觉稿生成dom树的具体方法，虽然视觉稿可以由多种现有设计软件生成，但其生成的文件一般都是包含有自上而下的多个图层的，图层中包含有形成视觉稿内容的各个页面元素，比如文字、图片等。本实施例首先通过步骤s202将各个页面元素导出来，然后以dom树的形式将这些页面元素组织起来。接着再通过步骤s203对dom树进行处理来形成最终的视觉图dom树。
57.具体来说，上述步骤s203中的透明图层过滤指的是作图过程中的一些辅助图层或者并未删除的图层，这些图层没有实际内容，无色或者透明度为100％，为防止影响后面比对效果，要先将其过滤掉；边缘去重、节点合并主要是将图层之间的关系计算，例如重合部分或间距，转换为页面元素之间的关系；文本转换指的是判断视觉稿的文本是占位文本还是实际要显示的文本，以便于后续的文本比对。
58.步骤s204：根据第二任务信号从代码托管服务器下载视觉代码。
59.步骤s204-s206可以由研发图处理服务器来完成，该研发图处理服务器可以是单一的服务器单元，也可以是一个服务器集群所构成。由研发工程师编码完成的研发稿被上传至代码托管服务器进行暂存，研发图处理服务器监听任务状态，其可以在没有任务信号的时候进入低功耗的等待模式，当监听到任务信号(第二任务信号)的时候，可以从代码托管服务器下载研发稿，对于下载目标的确定，可以通过任务编码来实现，通过任务编码在代码托管服务器寻找对应的研发稿并进行下载。这里的研发稿是由研发人员编码完成的一系列视觉代码。
60.当研发图处理服务器是一个服务器集群的时候，优选的，如图4所示，本步骤进一步可以包括如下子步骤：
61.步骤s2041：接收第二任务信号后根据负载均衡策略选择研发图处理服务器。负载均衡策略是将此任务分配给空闲的研发图处理服务器或预估可以最快完成任务的研发图处理服务器。
62.步骤s2042：所述研发图处理服务器将第二任务加入并发队列或排队等待。分配到任务的研发图处理服务器，可以根据自身的算力负荷以及并发数量，将第一任务加入并发队列或正常处理队列排队等待处理。
63.步骤s2041：所述第二任务开始执行时所述研发图处理服务器从代码托管服务器下载视觉代码。
64.步骤s205：部署所述视觉代码并渲染页面。
65.步骤s206：基于opencv算法，对渲染生成的页面进行页面遍历、图层识别、元素识
别、边缘去重、节点重算和图文转换处理来形成研发图dom树。
66.上述步骤s205-s206是基于研发稿生成dom树的具体方法，由于上传至代码托管服务器的研发稿是一系列视觉代码，因此为了和视觉稿进行比对，首先需要部署该代码到相应的环境，然后再进行渲染，从而生成渲染页面。这里生成的渲染页面也是一种图片格式的页面，其也具有各个图层。
67.在本实施例中，基于opencv算法遍历对页面元素的识别过程，包括图层识别和页面元素识别等，但是这种识别出的图层与视觉稿自身的图层很难一一对应的，所以边缘去重、节点重算，是在已识别图层和页面元素的基础上重新计算节点间的关系；图文转换指的是页面的文字需要分辨是图片本身的文字还是文本元素，或者二者组合而成，也是为了便于后续的文本比对。
68.步骤s207：根据第三任务信号下载所述视觉图dom树和所述研发图dom树。
69.上述步骤中生成的视觉图dom树和研发图dom树可以存储在一个单独的存储服务器中，当任务流转到需要进行视觉校验阶段时，可以由校验服务器从上述存储服务器中下载该视觉图dom树和研发图dom树。
70.这里的校验服务器可以是单一的服务器单元，也可以是一个服务器集群所构成。当研发图处理服务器是一个服务器集群的时候，可以随时监听任务状态，没有任务时服务器进入低功耗模式；接收到任务通知(第三任务信号)时，可以根据负载策略将此任务分配给空闲的校验服务器或预估最快完成任务的校验服务器，接收任务的目标校验服务器，根据自身的算力负荷和并发数量，将目标任务加入并发队列或排队等待。在任务开始执行时，再从存储服务器中下载该视觉图dom树和研发图dom树。
71.步骤s208：基于mobilenetv2算法，将所述视觉图dom树和所述研发图dom树进行遍历匹配。
72.mobilenetv2算法是一种轻量级的神经网络算法，在本实施例中用来进行视觉图dom树和研发图dom树进行遍历匹配。
73.优选的，如图5所示，该步骤进一步可以包括如下子步骤：
74.步骤s2081：将所述视觉图dom树和所述研发图dom树进行顺序对齐，图层统一，然后逐区块、逐图层进行交叉比对。
75.步骤s2082：针对文字元素来比对字体、字号、位置、颜色和文字内容，同时根据通配符泛化文字内容，对通配符文本进行忽略处理。
76.步骤s2083：针对图片元素来比对图像相似度和位置。
77.步骤s2084：根据匹配度筛选出字体异常、颜色异常、尺寸异常和位置异常信息。
78.步骤s209：根据遍历匹配结果生成比对结果报告和代码修改建议。
79.本实施例的结果报告可以是一种可视化报告，该可视化报告可以具有视觉图和研发图的比对，dom树对应关系，匹配异常，批注协作等功能。基于该结果报告研发工程师可以点击代码修改建议完成一键修改代码入库，项目组成员可以对报告进行批注，视觉设计师可以修改视觉稿，研发工程师可以据此修改，重复上述校验，可以保留可视化记录，方便后续业务巡检等。
80.另外需要指出的是，上述对于视觉图处理服务器、研发图处理服务器、校验服务器的说明，如果项目组成员较少，设备紧张，可于同一台服务器同时部署视觉图处理、研发图
处理、校验等；如项目组成员较多，且存在多基地办公，服务器可上云，方便动态扩容缩容，负载均衡。
81.由上述可知，本发明提供的自动化视觉验收方法，通过将视觉稿转换为视觉图dom树，以及将研发稿部署渲染后再转换为研发稿dom树，然后利用神经网络算法对视觉图dom树与研发图dom树进行遍历比对，从而可以实现自动化地给出比对结果，可以更好的确定差异点并给出修改方案，适用于设计验收和开发自测，可以有效减少人力支出与时间成本。
82.如图6所示为本技术实施例提供的一种自动化视觉验收装置的结构示意图，该装置包括：视觉图dom树生成单元610、研发图dom树生成单元620、比对单元630和报告生成单元640，它们之间依次相连。
83.视觉图dom树生成单元610用于基于设计完成的视觉稿生成视觉图dom树。
84.研发图dom树生成单元620用于基于编码完成的研发稿生成研发图dom树。
85.比对单元630用于将所述视觉图dom树和所述研发图dom树进行自动比对。
86.报告生成单元640用于根据所述比对单元的比对结果生成比对结果报告和代码修改建议。
87.优选的，如图7所示，上述视觉图dom树生成单元610包括：下载模块611，用于根据第一任务信号从视觉图托管服务器下载视觉稿。遍历导出模块612，用于遍历所述视觉稿各个图层，根据所述视觉稿的批注自上而下导出页面元素来形成dom树。处理模块613，用于对所述dom树进行透明图层过滤、边缘去重、节点合并和文本转换处理形成视觉图dom树。
88.优选的，上述视觉图dom树生成单元中的下载模块包括：选择子模块和视觉图处理服务器，其中选择子模块用于接收第一任务信号后根据负载均衡策略选择视觉图处理服务器；所述视觉图处理服务器将第一任务加入并发队列或排队等待；所述第一任务开始执行时所述视觉图处理服务器从视觉图托管服务器下载视觉稿。
89.优选的，如图8所示，上述研发图dom树生成单元620包括：下载模块621，用于根据第二任务信号从代码托管服务器下载视觉代码。渲染模块622，用于部署所述视觉代码并渲染页面。处理模块623，用于基于opencv算法，对渲染生成的页面进行页面遍历、图层识别、元素识别、边缘去重、节点重算和图文转换处理来形成研发图dom树。
90.优选的，上述研发图dom树生成单元中620的下载模块包括：选择子模块和研发图处理服务器，其中选择子模块用于接收第二任务信号后根据负载均衡策略选择研发图处理服务器；所述研发图处理服务器将第二任务加入并发队列或排队等待；所述第二任务开始执行时所述研发图处理服务器从代码托管服务器下载视觉代码。
91.优选的，如图9所示，上述比对单元630包括：下载模块631，用于根据第三任务信号下载所述视觉图dom树和所述研发图dom树。遍历匹配模块632，用于基于mobilenetv2算法，将所述视觉图dom树和所述研发图dom树进行遍历匹配。
92.优选的，如图10所示，上述遍历匹配模块632包括：交叉比对子模块6321，用于将所述视觉图dom树和所述研发图dom树进行顺序对齐，图层统一，然后逐区块、逐图层进行交叉比对。文字比对子模块6322，用于针对文字元素来比对字体、字号、位置、颜色和文字内容，同时根据通配符泛化文字内容，对通配符文本进行忽略处理。图片比对子模块6323，用于针对图片元素来比对图像相似度和位置。异常筛选子模块6324，用于根据匹配度筛选出字体异常、颜色异常、尺寸异常和位置异常信息。
93.上述各个单元的详细描述可以参见前述方法实施例中对应的描述，在此不再继续赘述。
94.由上述可知，本发明提供的自动化视觉验收装置，通过将视觉稿转换为视觉图dom树，以及将研发稿部署渲染后再转换为研发稿dom树，然后利用神经网络算法对视觉图dom树与研发图dom树进行遍历比对，从而可以实现自动化地给出比对结果，可以更好的确定差异点并给出修改方案，适用于设计验收和开发自测，可以有效减少人力支出与时间成本。
95.本发明实施例还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行所述程序时实现上述方法。
96.本发明实施例还提供一种计算机可读存储介质，计算机可读存储介质存储有执行上述方法的计算机程序。
97.如图11所示，该电子设备600还可以包括：通信模块110、输入单元120、音频处理器130、显示器160、电源170。值得注意的是，电子设备600也并不是必须要包括图11中所示的所有部件；此外，电子设备600还可以包括图11中没有示出的部件，可以参考现有技术。
98.如图11所示，中央处理器100有时也称为控制器或操作控件，可以包括微处理器或其他处理器装置和/或逻辑装置，该中央处理器100接收输入并控制电子设备600的各个部件的操作。
99.其中，存储器140，例如可以是缓存器、闪存、硬驱、可移动介质、易失性存储器、非易失性存储器或其它合适装置中的一种或更多种。可储存上述与失败有关的信息，此外还可存储执行有关信息的程序。并且中央处理器100可执行该存储器140存储的该程序，以实现信息存储或处理等。
100.输入单元120向中央处理器100提供输入。该输入单元120例如为按键或触摸输入装置。电源170用于向电子设备600提供电力。显示器160用于进行图像和文字等显示对象的显示。该显示器例如可为lcd显示器，但并不限于此。
101.该存储器140可以是固态存储器，例如，只读存储器(rom)、随机存取存储器(ram)、sim卡等。还可以是这样的存储器，其即使在断电时也保存信息，可被选择性地擦除且设有更多数据，该存储器的示例有时被称为eprom等。存储器140还可以是某种其它类型的装置。存储器140包括缓冲存储器141(有时被称为缓冲器)。存储器140可以包括应用/功能存储部142，该应用/功能存储部142用于存储应用程序和功能程序或用于通过中央处理器100执行电子设备600的操作的流程。
102.存储器140还可以包括数据存储部143，该数据存储部143用于存储数据，例如联系人、数字数据、图片、声音和/或任何其他由电子设备使用的数据。存储器140的驱动程序存储部144可以包括电子设备的用于通信功能和/或用于执行电子设备的其他功能(如消息传送应用、通讯录应用等)的各种驱动程序。
103.通信模块110即为经由天线111发送和接收信号的发送机/接收机110。通信模块(发送机/接收机)110耦合到中央处理器100，以提供输入信号和接收输出信号，这可以和常规移动通信终端的情况相同。
104.基于不同的通信技术，在同一电子设备中，可以设置有多个通信模块110，如蜂窝网络模块、蓝牙模块和/或无线局域网模块等。通信模块(发送机/接收机)110还经由音频处理器130耦合到扬声器131和麦克风132，以经由扬声器131提供音频输出，并接收来自麦克
风132的音频输入，从而实现通常的电信功能。音频处理器130可以包括任何合适的缓冲器、解码器、放大器等。另外，音频处理器130还耦合到中央处理器100，从而使得可以通过麦克风132能够在本机上录音，且使得可以通过扬声器131来播放本机上存储的声音。
105.本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
106.本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
107.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
108.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
109.本发明中应用了具体实施例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

技术特征：
1.一种自动化视觉验收方法，其特征在于，所述方法包括：基于设计完成的视觉稿生成视觉图dom树；基于编码完成的研发稿生成研发图dom树；将所述视觉图dom树和所述研发图dom树进行自动比对，生成比对结果报告和代码修改建议。2.如权利要求1所述的自动化视觉验收方法，其特征在于，所述基于设计完成的视觉稿生成视觉图dom树包括：根据第一任务信号从视觉图托管服务器下载视觉稿；遍历所述视觉稿各个图层，根据所述视觉稿的批注自上而下导出页面元素来形成dom树；对所述dom树进行透明图层过滤、边缘去重、节点合并和文本转换处理形成视觉图dom树。3.如权利要求2所述的自动化视觉验收方法，其特征在于，所述根据第一任务信号从视觉图托管服务器下载视觉稿包括：接收第一任务信号后根据负载均衡策略选择视觉图处理服务器；所述视觉图处理服务器将第一任务加入并发队列或排队等待；所述第一任务开始执行时所述视觉图处理服务器从视觉图托管服务器下载视觉稿。4.如权利要求1所述的自动化视觉验收方法，其特征在于，所述基于编码完成的研发稿生成研发图dom树包括：根据第二任务信号从代码托管服务器下载视觉代码；部署所述视觉代码并渲染页面；基于opencv算法，对渲染生成的页面进行页面遍历、图层识别、元素识别、边缘去重、节点重算和图文转换处理来形成研发图dom树。5.如权利要求4所述的自动化视觉验收方法，其特征在于，所述根据第二任务信号从代码托管服务器下载视觉代码包括：接收第二任务信号后根据负载均衡策略选择研发图处理服务器；所述研发图处理服务器将第二任务加入并发队列或排队等待；所述第二任务开始执行时所述研发图处理服务器从代码托管服务器下载视觉代码。6.如权利要求1所述的自动化视觉验收方法，其特征在于，所述的将所述视觉图dom树和所述研发图dom树进行自动比对包括：根据第三任务信号下载所述视觉图dom树和所述研发图dom树；基于mobilenetv2算法，将所述视觉图dom树和所述研发图dom树进行遍历匹配。7.如权利要求6所述的自动化视觉验收方法，其特征在于，所述的基于mobilenetv2算法，将所述视觉图dom树和所述研发图dom树进行遍历匹配包括：将所述视觉图dom树和所述研发图dom树进行顺序对齐，图层统一，然后逐区块、逐图层进行交叉比对；针对文字元素来比对字体、字号、位置、颜色和文字内容，同时根据通配符泛化文字内容，对通配符文本进行忽略处理；针对图片元素来比对图像相似度和位置；
根据匹配度筛选出字体异常、颜色异常、尺寸异常和位置异常信息。8.一种自动化视觉验收装置，其特征在于，所述装置包括：视觉图dom树生成单元，用于基于设计完成的视觉稿生成视觉图dom树；研发图dom树生成单元，用于基于编码完成的研发稿生成研发图dom树；比对单元，用于将所述视觉图dom树和所述研发图dom树进行自动比对；报告生成单元，用于根据所述比对单元的比对结果生成比对结果报告和代码修改建议。9.一种电子设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7任一项所述方法的步骤。10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7任一项所述方法的步骤。

技术总结
本发明提供了一种自动化视觉验收方法和装置，涉及软件设计及测试技术领域，可用于金融领域，方法包括：基于设计完成的视觉稿生成视觉图DOM树；基于编码完成的研发稿生成研发图DOM树；将所述视觉图DOM树和所述研发图DOM树进行自动比对，生成比对结果报告和代码修改建议。本发明通过比对视觉图与研发图DOM树的区别，可以更好的确定差异点并给出修改方案，适用于设计验收和开发自测，可以有效减少人力支出与时间成本。支出与时间成本。支出与时间成本。


技术研发人员：韩天助 张银成 陈烨 李佳恒
受保护的技术使用者：中国工商银行股份有限公司
技术研发日：2023.05.29
技术公布日：2023/8/4