前端的兼容性测试方法及装置、存储介质、电子设备与流程

1.本发明涉及金融科技领域，具体而言，涉及一种前端的兼容性测试方法及装置、存储介质、电子设备。


背景技术：

2.当前，大量的浏览器开始国产化，同时很多应用需要在浏览器上进行放置、下载，不同的应用为适应不同场景、市场，会不断进行更新、迭代，此时，应用进行浏览器转型升级时，需要进行大量的兼容性测试。兼容性测试作为前端测试工作的一部分，根据其本身风格的多变性、变更的频繁性以及环境的复杂性等特性，在相关技术中，较难形成具有较高泛化能力的统一处理方式。因此在现阶段，测试人员一般通过基础的人工手段进行前端兼容性测试。
3.当前的测试方式中，通过基础的人工手段进行的兼容性测试，需要耗费大量的人工成本，且人为因素对测试结果具有一定的干扰风险，简单且重复性高的测试工作使得整个测试阶段耗时长、效率低下。
4.针对上述的问题，目前尚未提出有效的解决方案。


技术实现要素：

5.本发明实施例提供了一种前端的兼容性测试方法及装置、存储介质、电子设备，以至少解决相关技术中前端兼容性测试通过人工手段进行，存在测试时间长、测试效率低的技术问题。
6.根据本发明实施例的一个方面，提供了一种前端的兼容性测试方法，包括：接收对前端中运行的目标浏览器的测试请求，其中，所述测试请求中至少携带：历史过程中对非目标浏览器执行预设操作行为后得到的测试脚本以及多张参考图片；响应所述测试请求，在所述目标浏览器上运行所述测试脚本，并截取运行所述测试脚本过程出现的多张页面截图；通过预设图像识别技术，分析每张所述页面截图与对应的所述参考图片的差异性，得到差异标注信息；根据所述差异标注信息，确定所述前端中运行的目标浏览器的兼容性测试结果。
7.可选地，分析每张所述页面截图与对应的所述参考图片的差异性，得到差异标注信息的步骤，包括：采用所述预设图像识别技术，分析每张所述页面截图与对应的所述参考图片之间的差异性指标，其中，所述差异性指标包括下述至少之一：图片之间的相似度、差异子区域数量；根据所述差异性指标和差异子区域位置，对出现差异的所述页面截图进行标注处理，得到所述差异标注信息。
8.可选地，根据所述差异性指标和差异子区域位置，对出现差异的所述页面截图进行标注处理的步骤，包括：在对所述页面截图和对应的所述参考图片进行灰度变换处理后，提取所述页面截图中的图像特征；分析所述页面截图中的图像特征与所述参考图片中的图像特征之间的特征差值；基于所述特征差值，通过二值化策略从多张所述页面截图和所述
参考图片中提取关于目标物体的物体图像；对所述物体图像进行边缘化提取，确定所述物体图像的边缘点集；结合所述物体图像的边缘点集，绘制所述页面截图中与对应的所述参考图片之间的差异性，完成差异性标注。
9.可选地，根据所述差异标注信息，确定所述前端中运行的目标浏览器的兼容性测试结果的步骤，包括：根据所述差异标注信息，获取所述页面截图与对应的所述参考图片之间的差异指标；将差异指标作为断言依据进行断言，得到断言结果；根据所述断言结果，确定所述兼容性测试结果。
10.可选地，在确定所述前端中运行的目标浏览器的兼容性测试结果之后，还包括：基于目标可视化模式，显示所述兼容性测试结果，其中，所述目标可视化模式包括以下其中之一：自定义渲染模式、从链路树模式、脑图模式、全图模式、列表模式。
11.可选地，在接收对前端中运行的目标浏览器的测试请求之前，还包括：监听在历史过程中对所述非目标浏览器的操作行为；在所述操作行为触发预设事件操作行为后，记录事件类型以及当前被操作的节点信息，其中，所述节点信息是指在所述非目标浏览器上被触发的页面节点链接信息。
12.可选地，前端的兼容性测试方法还包括：接收对前端中运行的目标浏览器的非资源类请求；响应所述非资源类请求，通过目标模拟技术，确定模拟请求；在所述目标浏览器的当前页面运行所述模拟请求。
13.根据本发明实施例的另一方面，还提供了一种前端的兼容性测试装置，包括：接收单元，用于接收对前端中运行的目标浏览器的测试请求，其中，所述测试请求中至少携带：历史过程中对非目标浏览器执行预设操作行为后得到的测试脚本以及多张参考图片；第一处理单元，用于响应所述测试请求，在所述目标浏览器上运行所述测试脚本，并截取运行所述测试脚本过程出现的多张页面截图；第二处理单元，用于通过预设图像识别技术，分析每张所述页面截图与对应的所述参考图片的差异性，得到差异标注信息；确定单元，用于根据所述差异标注信息，确定所述前端中运行的目标浏览器的兼容性测试结果。
14.可选地，第二处理单元，包括：分析子单元，用于采用所述预设图像识别技术，分析每张所述页面截图与对应的所述参考图片之间的差异性指标，其中，所述差异性指标包括下述至少之一：图片之间的相似度、差异子区域数量；处理子单元，用于根据所述差异性指标和差异子区域位置，对出现差异的所述页面截图进行标注处理，得到所述差异标注信息。
15.可选地，处理子单元包括：第一提取模块，用于在对所述页面截图和对应的所述参考图片进行灰度变换处理后，提取所述页面截图中的图像特征；分析模块，用于分析所述页面截图中的图像特征与所述参考图片中的图像特征之间的特征差值；第二提取模块，用于基于所述特征差值，通过二值化策略从多张所述页面截图和所述参考图片中提取关于目标物体的物体图像；确定模块，用于对所述物体图像进行边缘化提取，确定所述物体图像的边缘点集；处理模块，用于结合所述物体图像的边缘点集，绘制所述页面截图中与对应的所述参考图片之间的差异性，完成差异性标注。
16.可选地，第一确定单元包括：获取子单元，用于根据所述差异标注信息，获取所述页面截图与对应的所述参考图片之间的差异指标；断言子单元，用于将差异指标作为断言依据进行断言，得到断言结果；确定子单元，用于根据所述断言结果，确定所述兼容性测试结果。
17.可选地，前端的兼容性测试装置还包括：显示单元，用于在确定所述前端中运行的目标浏览器的兼容性测试结果之后，基于目标可视化模式，显示所述兼容性测试结果，其中，所述目标可视化模式包括以下其中之一：自定义渲染模式、从链路树模式、脑图模式、全图模式、列表模式。
18.可选地，前端的兼容性测试装置还包括：监听单元，用于在接收对前端中运行的目标浏览器的测试请求之前，监听在历史过程中对所述非目标浏览器的操作行为；在所述操作行为触发预设事件操作行为后，记录事件类型以及当前被操作的节点信息，其中，所述节点信息是指在所述非目标浏览器上被触发的页面节点链接信息。
19.可选地，前端的兼容性测试装置还包括：第二接收单元，用于接收对前端中运行的目标浏览器的非资源类请求；第二确定单元，用于响应所述非资源类请求，通过目标模拟技术，确定模拟请求；运行单元，用于在所述目标浏览器的当前页面运行所述模拟请求。
20.根据本发明的另一方法，还提供了一种计算机可读存储介质，所述计算机可读存储介质用于存储的计算机程序，其中，在所述计算机程序运行时控制所述计算机可读存储介质所在设备执行上述任意一项所述的前端的兼容性测试方法。
21.根据本发明的另一方面，还提供了一种电子设备，包括：处理器；以及存储器，用于存储所述处理器的可执行指令；其中，所述处理器配置为经由执行所述可执行指令来执行上述任意一项所述的前端的兼容性测试方法。
22.在本发明中，首先接收对前端中运行的目标浏览器的测试请求，其中，测试请求中至少携带：历史过程中对非目标浏览器执行预设操作行为后得到的测试脚本以及多张参考图片，然后响应测试请求，在目标浏览器上运行测试脚本，并截取运行测试脚本过程出现的多张页面截图，之后通过预设图像识别技术，分析每张页面截图与对应的参考图片的差异性，得到差异标注信息，最后根据差异标注信息，确定前端中运行的目标浏览器的兼容性测试结果。在本发明中，通过非目标浏览器执行预设操作行为获取测试脚本及参考图片，然后通过目标浏览器运行测试脚本得到多张页面截图，通过图像识别技术获取页面截图与参考图片的差异，得到兼容性测试结果，达到了避免采用人工手段对多个浏览器的前端进行兼容性测试的目的，从而实现了提高兼容性测试效率的技术效果，进而解决了相关技术中前端兼容性测试通过人工手段进行，存在测试时间长、测试效率低的技术问题。
附图说明
23.此处所说明的附图用来提供对本发明的进一步理解，构成本技术的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：
24.图1是根据本发明实施例的一种可选的前端的兼容性测试方法的流程图；
25.图2是根据本发明实施例的一种可选的系统内部处理过程的流程图；
26.图3是根据本发明实施例的另一种可选的系统内部处理过程的流程图；
27.图4是根据本发明实施例的一种可选的前端的兼容性测试装置的示意图；
28.图5是根据本发明实施例的一种可选的前端的兼容性测试方法的电子设备(或移动设备)的硬件结构框图。
具体实施方式
29.为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。
30.需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
31.为了便于描述，以下对本技术实施例涉及的部分名词或术语进行说明：
32.兼容性：不同浏览器对前端页面渲染效果不一致问题。
33.断言：为了表示和验证软件开发者预期的结果的一种方式，当断言为真时，程序正常运行；断言为假时，程序终止执行，并给出错误信息。
34.webdriver服务：在浏览器原生api(application program interface，应用程序接口)的基础上进行封装，通过http(hyper text transfer protocol，超文本传输协议)协议可以直接操作浏览器页面的节点元素或浏览器本身。
35.需要说明的是，本公开所涉及的相关信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于展示的数据、分析的数据等)，均为经用户授权或者经过各方充分授权的信息和数据。例如，本系统和相关用户或机构间设置有接口，在获取相关信息之前，需要通过接口向前述的用户或机构发送获取请求，并在接收到前述的用户或机构反馈的同意信息后，获取相关信息。
36.本发明可以应用于金融机构的各种软件产品、控制系统、浏览器、客户端(包括但不限于：移动客户端、pc机等)系统的前端兼容性测试中，以浏览器进行示意性说明，通过测试浏览器前端的操作行为(包括但不限于：转账、理财、基金、缴费、查账、广告、推荐等操作)，实现前端兼容性自动化测试。
37.本发明提供一种适合前端兼容性自动化测试的方法，为测试人员提供更加便利、精准的测试手段。本发明通过将图像识别技术作为断言依据以及通过浏览器的mock(前端虚拟接口)技术自动识别并模拟所有非资源类请求，有效解决测试覆盖不全面、人工成本高且效率低等技术问题。
38.下面结合各实施例来详细说明本发明。
39.实施例一
40.根据本发明实施例，提供了一种可选的前端的兼容性测试方法的方法实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
41.图1是根据本发明实施例的一种可选的前端的兼容性测试方法的流程图，如图1所示，该方法包括如下步骤：
42.步骤s101，接收对前端中运行的目标浏览器的测试请求，其中，测试请求中至少携带：历史过程中对非目标浏览器执行预设操作行为后得到的测试脚本以及多张参考图片；
43.步骤s102，响应测试请求，在目标浏览器上运行测试脚本，并截取运行测试脚本过程出现的多张页面截图；
44.步骤s103，通过预设图像识别技术，分析每张页面截图与对应的参考图片的差异性，得到差异标注信息；
45.步骤s104,根据差异标注信息，确定前端中运行的目标浏览器的兼容性测试结果。
46.通过上述步骤，首先接收对前端中运行的目标浏览器的测试请求，其中，测试请求中至少携带：历史过程中对非目标浏览器执行预设操作行为后得到的测试脚本以及多张参考图片，然后响应测试请求，在目标浏览器上运行测试脚本，并截取运行测试脚本过程出现的多张页面截图，之后通过预设图像识别技术，分析每张页面截图与对应的参考图片的差异性，得到差异标注信息，最后根据差异标注信息，确定前端中运行的目标浏览器的兼容性测试结果。在本实施例中，通过非目标浏览器执行预设操作行为获取测试脚本及参考图片，然后通过目标浏览器运行测试脚本得到多张页面截图，通过图像识别技术获取页面截图与参考图片的差异，得到兼容性测试结果，达到了避免采用人工手段对多个浏览器的前端进行兼容性测试的目的，从而实现了提高兼容性测试效率的技术效果，进而解决了相关技术中前端兼容性测试通过人工手段进行，存在测试时间长、测试效率低的技术问题。
47.下面结合上述各实施步骤来进一步地说明本发明实施例。
48.作为本实施例一种可选的实施方式，在接收对前端中运行的目标浏览器的测试请求之前，还包括：监听在历史过程中对非目标浏览器的操作行为；在操作行为触发预设事件操作行为后，记录事件类型以及当前被操作的节点信息，其中，节点信息是指在非目标浏览器上被触发的页面节点链接信息。
49.上述非目标浏览器可以指区别于目标浏览器(自行选取)的其他类型浏览器，通过对非目标浏览器的全局事件进行监听，也即是监听历史过程中对非目标浏览器的操作行为，如，对浏览器页面中标签、文字、按钮进行点击的操作，在上述操作行为触发预设事件操作行为后，可以记录事件类型以及当前被操作的节点信息，节点信息可以是指在非目标浏览器上被触发的页面节点链接信息，例如：属性(attribute)、标签(tag)、文本内容(text)、值(value)等。
50.步骤s101，接收对前端中运行的目标浏览器的测试请求，其中，测试请求中至少携带：历史过程中对非目标浏览器执行预设操作行为后得到的测试脚本以及多张参考图片。
51.上述目标浏览器可以指需要开始进行前端兼容性测试的浏览器，测试脚本可以是指历史过程中对非目标浏览器(也即是区别于上述目标浏览器之外的其他浏览器)进行测试过程中，根据操作行为录制的操作行为的脚本，上述操作行为可以包括但不限于指对浏览器进行测试过程中，对页面的点击、资料上传、下载等的操作。在对非目标浏览器执行预设操作行为时，可以同时录制得到多张参考图片，该参考图片是作为后续其他的非目标浏览器进行测试时的对照、比较结果图片。
52.上述多张参考图片可以指执行上述预设操作行为浏览器的响应页面，该页面中包
括但不限于：标题框、文本框、图片框、评论框、广告框等。
53.下面结合录制脚本模块1进行示意说明：录制脚本模块实现在对业务场景进行基础测试的同时，将测试人员的操作行为以脚本的形式录制下来，生成测试用例并根据核心步骤自动生成页面截图获取标准图片(对应于上述多张参考图片)。
54.步骤s102，响应测试请求，在目标浏览器上运行测试脚本，并截取运行测试脚本过程出现的多张页面截图。
55.为提高对目标浏览器的测试效率，解决相关技术中对浏览器的前端兼容性测试只能通过人工手段进行测试，效率低下的问题，在响应上述测试请求时，可以在目标浏览器上运行上述测试脚本，进行测试，在运行上述测试脚本的过程中，可以截取运行测试脚本过程出现的多张页面截图，需要说明的是，上述多张页面截图中的每张页面截图与多张参考图片中的参考图片具有对应关系，也即是一张页面截图可以是与一张参考图片是执行同一操作过程浏览器页面响应操作后生成的页面图像。
56.例如，本地通过调用webdriver服务的能力，在多个不同浏览器上自动运行录制脚本模块1中生成的所有测试用例，并对核心步骤进行页面截图获取其他图片。
57.步骤s103，通过预设图像识别技术，分析每张页面截图与对应的参考图片的差异性，得到差异标注信息。
58.一种可选的实施方式，分析每张页面截图与对应的参考图片的差异性，得到差异标注信息的步骤，包括：采用预设图像识别技术，分析每张页面截图与对应的参考图片之间的差异性指标，其中，差异性指标包括下述至少之一：图片之间的相似度、差异子区域数量；根据差异性指标和差异子区域位置，对出现差异的页面截图进行标注处理，得到差异标注信息。
59.通过上述预设图像识别技术，可以对每张页面截图与对应的参考图片进行中的特征进行提取，进行特征比较，可以得到上述任意一张页面截图与对应的参考图片的相似度，以及差异子区域的数量，在可选的方式中还可以得到差异子区域的区域信息，例如：差异子区域的位置、大小等，根据上述差异性指标和差异子区域的位置，可以对出现差异的页面截图进行标注处理。
60.可选的，根据差异性指标和差异子区域位置，对出现差异的页面截图进行标注处理的步骤，包括：在对页面截图和对应的参考图片进行灰度变换处理后，提取页面截图中的图像特征；分析页面截图中的图像特征与参考图片中的图像特征之间的特征差值；基于特征差值，通过二值化策略从多张页面截图和参考图片中提取关于目标物体的物体图像；对物体图像进行边缘化提取，确定物体图像的边缘点集；结合物体图像的边缘点集，绘制页面截图中与对应的参考图片之间的差异性，完成差异性标注。
61.需要说明的是，本实施例中可以通过图像识别技术调用计算机视觉和机器学习软件库——opencv，将图片进行灰度变换处理，提取特征差值，随后通过图像的二值化方法从多值的数字图像中直接提取出关于目标物体的物体图像，进行边缘化提取，最后根据边缘点集拟合绘制差异标注。
62.步骤s104,根据差异标注信息，确定前端中运行的目标浏览器的兼容性测试结果。
63.一种可选的实施方式，根据差异标注信息，确定前端中运行的目标浏览器的兼容性测试结果的步骤，包括：根据差异标注信息，获取页面截图与对应的参考图片之间的差异
指标；将差异指标作为断言依据进行断言，得到断言结果；根据断言结果，确定兼容性测试结果。
64.根据页面截图与对应的参考图片之间的差异性标注，获取页面截图与对应的参考图片之间的差异指标，也即是获取页面截图与对应的参考图片的差异数据，可以将上述差异指标作为断言的依据，得到断言结果，例如：上述断言可以是判断执行一个操作的页面截图，与对应该操作的非目标浏览器中运行生成的参考图片是否存在差异。
65.上述兼容性测试结果可以是指目标浏览器中执行测试脚本所生成的界面，与非目标浏览器执行操作行为时生成的参考图片的差异数据报表。
66.一种可选的实施方式，在确定前端中运行的目标浏览器的兼容性测试结果之后，还包括：基于目标可视化模式，显示兼容性测试结果，其中，目标可视化模式包括以下其中之一：自定义渲染模式、从链路树模式、脑图模式、全图模式、列表模式。
67.需要说明的是，本实施例可以基于目标可视化模式显示兼容性测试结果，可以通过自定义渲染模式、从链路树模式、脑图模式、全图模式、列表模式的其中一个或多个模式的方式显示兼容性测试结果，以提高兼容性测试结果的可视性，便于测试人员直观查看。
68.作为本实施例一种可选的实施方式，接收对前端中运行的目标浏览器的非资源类请求；响应非资源类请求，通过目标模拟技术，确定模拟请求；在目标浏览器的当前页面运行模拟请求。
69.为避免各种接口响应问题在兼容性测试中对前端渲染造成的影响，本实施例中可以引入浏览器的mock(前端虚拟接口)技术，自动识别所有对前端中运行的目标浏览器出现的非资源类请求，还可以识别生成测试脚本过程中对非目标浏览器的非资源类请求，并在前端进行请求模拟，保证后期兼容性测试目标浏览器的页面渲染的一致性。
70.通过将图像识别技术作为断言依据以及通过浏览器的mock(前端虚拟接口)技术自动识别并模拟所有非资源类请求，有效解决测试覆盖不全面、人工成本高且效率低等技术问题。
71.下面结合另一种可选的实施例来说明本发明。
72.实施例二
73.本实施例提供了一种基于图像识别与浏览器mock(即前端虚拟接口)技术的前端兼容性测试方法，克服了现有人工形式的前端兼容性测试中耗时长、效率低下、覆盖不全的痛点，提供一种实施成本低、效率高、具有较强泛化能力的自动化前端兼容性测试系统。本发明提供一种思路，在前端测试脚本录制和回归测试的基础上，引入基于图像识别技术作为断言依据，可以避免人工编写脚本断言缺漏现象。同时为了避免各种接口响应问题对前端渲染造成的影响，引入浏览器mock技术，自动识别所有非资源类请求并进行前端请求模拟，实现一整条前端兼容性测试的自动化链路，为测试人员提供更便利更精准的测试手段。
74.为测试人员提供更加便利、精准的测试手段。本发明聚焦于通过图像识别技术作为断言依据以及通过浏览器的mock技术自动识别并模拟所有非资源类请求，有效解决测试覆盖不全面、人工成本高且效率低等痛点。
75.下面将对照附图，对本发明的系统及方法进行详细说明。
76.图2是根据本发明实施例的一种可选的系统内部处理过程的流程图。如图2所示，本实施例包含录制脚本模块1、回归测试模块2、数据可视化模块3。
77.录制脚本模块1：本模块实现在对业务场景进行基础测试的同时，将测试人员的操作行为以脚本的形式录制下来，生成测试用例并根据核心步骤自动生成页面截图获取标准图片。本模块根据javascript的事件机制进行全局事件监听，当触发事件操作时，记录事件类型以及当前被操作的节点信息，如属性(attribute)、标签(tag)、文本内容(text)、值(value)等。同时为了避免各种接口响应问题在回归测试中对前端渲染造成的影响，引入浏览器的mock技术，自动识别所有在录制过程中出现的非资源类请求，并在前端进行请求模拟，保证后期回归测试中多浏览器页面渲染的一致性。
78.回归测试模块2：本模块是前端兼容性自动化测试中的核心模块。本地通过调用webdriver服务的能力，在多个不同浏览器上自动运行录制脚本模块1中生成的所有测试用例，并对核心步骤进行页面截图获取其他图片。将录制脚本模块1中获取的标准图片和回归测试模块2中获取的其他图片通过图像识别技术获取图片差异性指标，包括图片之间的相似度计算以及差异的可视化标注，并将其作为后续断言的判断依据。该模块中图像识别技术调用计算机视觉和机器学习软件库——opencv，将图片进行灰度变换处理，提取特征差值，随后通过图像的二值化方法从多值的数字图像中直接提取出目标物体，进行边缘化提取，最后根据边缘点集拟合绘制差异标注。
79.数据可视化模块3：本模块实现了对回归测试模块2返回结果的数据可视化。自定义渲染模板，从链路树模式、脑图模式、全图模式和列表模式多维度呈现直观的运行结果，可以有效做到测试人员效能的大幅度提升。
80.图3是根据本发明实施例的另一种可选的系统内部处理过程的流程图，如图3所示，步骤如下：
81.步骤1：录制脚本并生成标准图片。在某一浏览器中进行基础测试，录制脚本并在过程中生成关键步骤的标准图片。如识别到非资源类请求，使用浏览器mock技术进行前端模拟。
82.步骤2：多浏览器进行回归测试并生成其他图片。根据生成的测试脚本在其他多个浏览器上进行回归测试。
83.步骤2.1：识别为非资源请求。引入浏览器的mock技术，自动识别所有在录制过程中出现的非资源类请求。
84.步骤2.2：mock模拟请求。在前端进行请求模拟，保证后期回归测试中多浏览器页面渲染的一致性。
85.步骤3：图像识别。回归过程中生成的其他图片与录制脚本过程中生成的标准图片通过图像识别技术获取差异指标。
86.步骤4：断言。将差异指标作为断言依据进行断言。
87.步骤5：数据可视化。根据输出结果生成可视化数据报表。
88.本实施例利用技术手段有效降低前端兼容性自动化测试的实施成本，提高整体工作效率，并且具有较强泛化能力，可以覆盖多种浏览器的兼容性测试。
89.本实施例采用浏览器的mock技术，自动识别所有非资源类请求并进行前端请求模拟，避免各种接口响应问题对前端渲染造成的影响。采用图像处理技术，获得图像的差异性指标作为断言的判断依据，避免人工编写脚本断言缺漏现象，有效做到测试的全面覆盖。实现一整条前端兼容性测试的自动化链路，可以有效提升兼容性测试测试效率。
90.下面结合另一种可选的实施例来说明本发明。
91.实施例三
92.本实施例提供了一种可选的前端的兼容性测试装置，该兼容性测试装置所包含的各个实施单元对应于上述各实施例中的各个实施步骤。
93.图4是根据本发明实施例的一种可选的前端的兼容性测试装置的示意图，如图4所示，包括：第一接收单元41，第一处理单元42，第二处理单元43，第一确定单元44。
94.第一接收单元41，用于接收对前端中运行的目标浏览器的测试请求，其中，测试请求中至少携带：历史过程中对非目标浏览器执行预设操作行为后得到的测试脚本以及多张参考图片；
95.第一处理单元42，用于响应测试请求，在目标浏览器上运行测试脚本，并截取运行测试脚本过程出现的多张页面截图；
96.第二处理单元43，用于通过预设图像识别技术，分析每张页面截图与对应的参考图片的差异性，得到差异标注信息；
97.第一确定单元44，用于根据差异标注信息，确定前端中运行的目标浏览器的兼容性测试结果。
98.上述前端的兼容性测试装置，可以通过第一接收单元41接收对前端中运行的目标浏览器的测试请求，其中，测试请求中至少携带：历史过程中对非目标浏览器执行预设操作行为后得到的测试脚本以及多张参考图片，通过第一处理单元42响应测试请求，在目标浏览器上运行测试脚本，并截取运行测试脚本过程出现的多张页面截图，通过第二处理单元43通过预设图像识别技术，分析每张页面截图与对应的参考图片的差异性，得到差异标注信息，通过第一确定单元44，用于根据差异标注信息，确定前端中运行的目标浏览器的兼容性测试结果。在该实施例中，通过非目标浏览器执行预设操作行为获取测试脚本及参考图片，然后通过目标浏览器运行测试脚本得到多张页面截图，通过图像识别技术获取页面截图与参考图片的差异，得到兼容性测试结果，达到了避免采用人工手段对多个浏览器的前端进行兼容性测试的目的，从而实现了提高兼容性测试效率的技术效果，进而解决了相关技术中前端兼容性测试通过人工手段进行，存在测试时间长、测试效率低的技术问题。
99.可选的，第二处理单元，包括：分析子单元，用于采用预设图像识别技术，分析每张页面截图与对应的参考图片之间的差异性指标，其中，差异性指标包括下述至少之一：图片之间的相似度、差异子区域数量；处理子单元，用于根据差异性指标和差异子区域位置，对出现差异的页面截图进行标注处理，得到差异标注信息。
100.可选的，处理子单元包括：第一提取模块，用于在对页面截图和对应的参考图片进行灰度变换处理后，提取页面截图中的图像特征；分析模块，用于分析页面截图中的图像特征与参考图片中的图像特征之间的特征差值；第二提取模块，用于基于特征差值，通过二值化策略从多张页面截图和参考图片中提取关于目标物体的物体图像；确定模块，用于对物体图像进行边缘化提取，确定物体图像的边缘点集；处理模块，用于结合物体图像的边缘点集，绘制页面截图中与对应的参考图片之间的差异性，完成差异性标注。
101.可选的，第一确定单元包括：获取子单元，用于根据差异标注信息，获取页面截图与对应的参考图片之间的差异指标；断言子单元，用于将差异指标作为断言依据进行断言，得到断言结果；确定子单元，用于根据断言结果，确定兼容性测试结果。
102.可选的，前端的兼容性测试装置还包括：显示单元，用于在确定前端中运行的目标浏览器的兼容性测试结果之后，基于目标可视化模式，显示兼容性测试结果，其中，目标可视化模式包括以下其中之一：自定义渲染模式、从链路树模式、脑图模式、全图模式、列表模式。
103.可选的，前端的兼容性测试装置还包括：监听单元，用于在接收对前端中运行的目标浏览器的测试请求之前，监听在历史过程中对非目标浏览器的操作行为；在操作行为触发预设事件操作行为后，记录事件类型以及当前被操作的节点信息，其中，节点信息是指在非目标浏览器上被触发的页面节点链接信息。
104.可选的，前端的兼容性测试装置还包括：第二接收单元，用于接收对前端中运行的目标浏览器的非资源类请求；第二确定单元，用于响应非资源类请求，通过目标模拟技术，确定模拟请求；运行单元，用于在目标浏览器的当前页面运行模拟请求。
105.根据本发明实施例的另一方法，还提供了一种计算机可读存储介质，计算机可读存储介质用于存储的计算机程序，其中，在计算机程序运行时控制计算机可读存储介质所在设备执行上述任意一项的前端的兼容性测试方法。
106.根据本发明实施例的另一方面，还提供了一种电子设备，包括：处理器；以及存储器，用于存储处理器的可执行指令；其中，处理器配置为经由执行可执行指令来执行上述任意一项的前端的兼容性测试方法。
107.上述的前端的兼容性测试装置还可以包括处理器和存储器，上述第一接收单元41，第一处理单元42，第二处理单元43，第一确定单元44等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。
108.上述处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来解决相关技术中前端兼容性测试通过人工手段进行，存在测试时间长、测试效率低的技术问题。
109.上述存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flash ram)，存储器包括至少一个存储芯片。
110.根据本发明实施例的另一方面，还提供了一种电子设备，包括：处理器；以及存储器，用于存储处理器的可执行指令；其中，处理器配置为经由执行可执行指令来执行上述任意一项的前端的兼容性测试方法。
111.根据本发明实施例的另一方面，还提供了一种计算机可读存储介质，计算机可读存储介质包括存储的计算机程序，其中，在计算机程序运行时控制计算机可读存储介质所在设备执行上述任意一项的前端的兼容性测试方法。
112.图5是根据本发明实施例的一种可选的前端的兼容性测试方法的电子设备(或移动设备)的硬件结构框图。如图5所示，电子设备可以包括一个或多个(图中采用502a、502b，
……
，502n来示出)处理器502(处理器502可以包括但不限于微处理器mcu或可编程逻辑器件fpga等的处理装置)、用于存储数据的存储器504。除此以外，还可以包括：显示器、输入/输出接口(i/o接口)、通用串行总线(usb)端口(可以作为i/o接口的端口中的一个端口被包括)、网络接口、键盘、电源和/或相机。本领域普通技术人员可以理解，图5所示的结构仅为示意，其并不对上述电子装置的结构造成限定。例如，电子设备还可包括比图5中所示
更多或者更少的组件，或者具有与图5所示不同的配置。
113.上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
114.在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。
115.在本技术所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。
116.所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
117.另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
118.所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、只读存储器(rom，read-only memory)、随机存取存储器(ram，random access memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。
119.以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。