页面的测试方法及装置、存储介质和处理器与流程

1.本技术涉及计算机技术领域，具体而言，涉及一种页面的测试方法及装置、存储介质和处理器。


背景技术：

2.相关技术一中，一般使用标准的测试框架对页面进行自动化测试。具体为，web页面(网页页面)在浏览器内存中是以dom tree(文档树)的方式存在的。且页面中的元素都可以在dom tree中找到对应的节点，当dom tree的结构发生改变，或者dom节点的样式发生改变，页面也会发生改变，在内存中直接操作dom节点(文档节点)跟直接在页面中使用鼠标点击，或者在键盘中输入的效果是一致的。所以自动化框架通过操作dom tree的方式实现点击，键盘输入的操作。另外，执行操作之后需要确认页面是否正确，确认方式就是判断对应页面显示的dom节点是否存在，或者对应显示的dom对应的属性是否存在以及属性值是否正常。执行测试框架中的对dom tree(通过xpath(文档树路径查找语言)查找到对应的dom节点，并读取对应的信息)操作的api(接口)就可以判断出对应的dom是否存在以及属性是否正确。
3.但是，相关技术一存在如下缺点：
4.(1)依赖于页面的dom节点，如果是canvas(画布)就不能判断页面是否正常。
5.(2)只能检查页面的节点和属性，不能确定是否真的显示正常。(因为css(层叠样式表)的叠加影响，只判断节点属性不能完整确认显示是否正常)。
6.(3)不能对canvas等页面进行持续交互测试。
7.相关技术二中，一般使用图片对比的方式判断页面是否正常。具体为，先启动正常运行的页面，使用工具截取一些图片用于测试对比。运行测试框架，启动页面，将整个页面或部分页面截图，将截屏的图片与预置的图片进行对比，查看是否相同进行判断页面是否正常。
8.但是，相关技术二存在如下缺点：只能进行完整的图片比对，不能灵活的对页面进行业务编排测试，当页面出现部分变化时，对比失败就结束了，不能持续的进行页面测试。
9.因此，相关技术中，对于web页面自动化测试，存在以下三个问题：
10.(1)无法通过现有的自动化框架测试web页面中canvas的问题。也即，web测试框架都是通过查找dom节点。然后判断其属性值来判断其正确性。但是canvas是通过实时绘制的方式展现在画布上的，不能通过dom有效性的方式进行web页面测试。
11.(2)无法还原真实的所见即所得的场景。也即，在web页面自动化的测试过程中，大多数情况是通过测试框架查找到对应的dom节点，然后判断其属性来确实当前页面是否正确，但是无法完整确认测试的过程中真实展示的样子就是理想中的展示效果。通过本方案可以在测试节点正确的基础上，补充测试展示的效果。
12.(3)不能使用完全基于用户使用视角的方式进行测试(测试的场景与显示与用户真实操作完全相同)。
13.针对相关技术中测试页面的效果较差的问题，目前尚未提出有效的解决方案。


技术实现要素：

14.本技术的主要目的在于提供一种页面的测试方法及装置、存储介质和处理器，以解决相关技术中测试页面的效果较差的问题。
15.为了实现上述目的，根据本技术的一个方面，提供了一种页面的测试方法。该方法包括：获取目标图片和第一预设图片，其中，所述目标图片为对待测试的目标页面对应的图片，所述第一预设图片为所述目标页面中的节点对应的图片；获取所述第一预设图片在所述目标图片中的位置信息；依据所述第一预设图片在所述目标图片中的位置信息，触发目标指令，其中，所述目标指令用于表示在所述目标页面中对所述第一预设图片进行目标操作；基于所述目标指令，对所述目标页面进行测试。
16.进一步地，基于所述目标指令，对所述目标页面进行测试包括：响应所述目标指令，在所述目标页面中对所述第一预设图片进行目标操作，得到第一页面，其中，所述第一页面中至少包括所述节点和所述节点对应的子节点；对所述第一页面进行截图，生成第一图片；获取所述子节点对应的第二预设图片；基于所述第一图片、所述第一预设图片和所述第二预设图片，对所述目标页面进行测试。
17.进一步地，基于所述第一图片、所述第一预设图片和所述第二预设图片，对所述目标页面进行测试包括：判断所述第一图片中是否存在所述第一预设图片和所述第二预设图片；若所述第一图片中存在所述第一预设图片和所述第二预设图片，则分别获取所述第一预设图片和所述第二预设图片在所述第一图片中的属性信息；判断所述第一预设图片在所述第一图片中的属性信息是否与所述节点在所述目标页面中的属性信息相同，并判断所述第二预设图片在所述第一图片中的属性信息是否与所述子节点在所述第一页面中的属性信息相同；若所述第一预设图片在所述第一图片中的属性信息与所述节点在所述目标页面中的属性信息相同，且所述第二预设图片在所述第一图片中的属性信息与所述子节点在所述第一页面中的属性信息相同，则表示所述目标页面正常；若所述第一预设图片在所述第一图片中的属性信息与所述节点在所述目标页面中的属性信息不相同，和/或，所述第二预设图片在所述第一图片中的属性信息与所述子节点在所述第一页面中的属性信息不相同，则表示所述目标页面异常。
18.进一步地，获取所述第一预设图片在所述目标图片中的位置信息包括：判断所述目标图片中是否存在所述第一预设图片；若所述目标图片中存在所述第一预设图片，则获取所述第一预设图片在所述目标图片中的属性信息；判断所述第一预设图片在所述目标图片中的属性信息是否与所述节点在所述目标页面中的属性信息相同；若所述第一预设图片在所述目标图片中的属性信息与所述节点在所述目标页面中的属性信息相同，则获取所述第一预设图片在所述目标图片中的位置信息。
19.进一步地，在获取目标图片和第一预设图片之后，所述方法还包括：判断所述目标图片中是否存在所述第一预设图片；若所述目标图片中存在所述第一预设图片，则获取所述第一预设图片在所述目标图片中的属性信息；判断所述第一预设图片在所述目标图片中的属性信息是否与所述节点在所述目标页面中的属性信息相同；若所述第一预设图片在所述目标图片中的属性信息与所述节点在所述目标页面中的属性信息相同，则表示所述目标
页面正常；若所述第一预设图片在所述目标图片中的属性信息与所述节点在所述目标页面中的属性信息不相同，则表示所述目标页面异常。
20.进一步地，获取目标图片包括：获取待测试的目标页面；对所述目标页面的大小进行设置，得到第二页面；获取用于将页面转换为图片的脚本；执行所述脚本，将所述第二页面转换为所述目标图片。
21.进一步地，执行所述脚本，将所述第二页面转换为所述目标图片包括：执行所述脚本，获取所述第二页面中每个节点的id信息；依据所述第二页面中每个节点的id信息，得到所述目标图片。
22.为了实现上述目的，根据本技术的另一方面，提供了一种页面的测试装置。该装置包括：第一获取模块，用于获取目标图片和第一预设图片，其中，所述目标图片为对待测试的目标页面对应的图片，所述第一预设图片为所述目标页面中的节点对应的图片；第二获取模块，用于获取所述第一预设图片在所述目标图片中的位置信息；第一触发模块，用于依据所述第一预设图片在所述目标图片中的位置信息，触发目标指令，其中，所述目标指令用于表示在所述目标页面中对所述第一预设图片进行目标操作；第一测试模块，用于基于所述目标指令，对所述目标页面进行测试。
23.进一步地，所述第一测试模块包括：第一响应单元，用于响应所述目标指令，在所述目标页面中对所述第一预设图片进行目标操作，得到第一页面，其中，所述第一页面中至少包括所述节点和所述节点对应的子节点；第一生成单元，用于对所述第一页面进行截图，生成第一图片；第一获取单元，用于获取所述子节点对应的第二预设图片；第一测试单元，用于基于所述第一图片、所述第一预设图片和所述第二预设图片，对所述目标页面进行测试。
24.进一步地，所述第一测试单元包括：第一判断子模块，用于判断所述第一图片中是否存在所述第一预设图片和所述第二预设图片；第一获取子模块，用于若所述第一图片中存在所述第一预设图片和所述第二预设图片，则分别获取所述第一预设图片和所述第二预设图片在所述第一图片中的属性信息；第二判断子模块，用于判断所述第一预设图片在所述第一图片中的属性信息是否与所述节点在所述目标页面中的属性信息相同，并判断所述第二预设图片在所述第一图片中的属性信息是否与所述子节点在所述第一页面中的属性信息相同；第一确定子模块，用于若所述第一预设图片在所述第一图片中的属性信息与所述节点在所述目标页面中的属性信息相同，且所述第二预设图片在所述第一图片中的属性信息与所述子节点在所述第一页面中的属性信息相同，则表示所述目标页面正常；第二确定子模块，用于若所述第一预设图片在所述第一图片中的属性信息与所述节点在所述目标页面中的属性信息不相同，和/或，所述第二预设图片在所述第一图片中的属性信息与所述子节点在所述第一页面中的属性信息不相同，则表示所述目标页面异常。
25.进一步地，所述第二获取模块包括：第一判断单元，用于判断所述目标图片中是否存在所述第一预设图片；第二获取单元，用于若所述目标图片中存在所述第一预设图片，则获取所述第一预设图片在所述目标图片中的属性信息；第二判断单元，用于判断所述第一预设图片在所述目标图片中的属性信息是否与所述节点在所述目标页面中的属性信息相同；第三获取单元，用于若所述第一预设图片在所述目标图片中的属性信息与所述节点在所述目标页面中的属性信息相同，则获取所述第一预设图片在所述目标图片中的位置信
息。
26.进一步地，所述装置还包括：第一判断模块，用于在获取目标图片和第一预设图片之后，判断所述目标图片中是否存在所述第一预设图片；第三获取模块，用于若所述目标图片中存在所述第一预设图片，则获取所述第一预设图片在所述目标图片中的属性信息；第二判断模块，用于判断所述第一预设图片在所述目标图片中的属性信息是否与所述节点在所述目标页面中的属性信息相同；第一确定模块，用于若所述第一预设图片在所述目标图片中的属性信息与所述节点在所述目标页面中的属性信息相同，则表示所述目标页面正常；第二确定模块，用于若所述第一预设图片在所述目标图片中的属性信息与所述节点在所述目标页面中的属性信息不相同，则表示所述目标页面异常。
27.进一步地，所述第一获取模块包括：第四获取单元，用于获取待测试的目标页面；第一设置单元，用于对所述目标页面的大小进行设置，得到第二页面；第五获取单元，用于获取用于将页面转换为图片的脚本；第一转换单元，用于执行所述脚本，将所述第二页面转换为所述目标图片。
28.进一步地，所述第一转换单元包括：第二获取子模块，用于执行所述脚本，获取所述第二页面中每个节点的id信息；第三确定子模块，用于依据所述第二页面中每个节点的id信息，得到所述目标图片。
29.为了实现上述目的，根据本技术的另一方面，提供了一种计算机可读存储介质，所述存储介质存储程序，其中，所述程序执行上述的任意一项所述的页面的测试方法。
30.为了实现上述目的，根据本技术的另一方面，提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行上述的任意一项所述的页面的测试方法。
31.通过本技术，采用以下步骤：获取目标图片和第一预设图片，其中，目标图片为对待测试的目标页面对应的图片，第一预设图片为目标页面中的节点对应的图片；获取第一预设图片在目标图片中的位置信息；依据第一预设图片在目标图片中的位置信息，触发目标指令，其中，目标指令用于表示在目标页面中对第一预设图片进行目标操作；基于目标指令，对目标页面进行测试，解决了相关技术中测试页面的效果较差的问题。通过依据获取到的第一预设图片在目标图片中的位置信息，触发目标指令，并基于目标指令，对目标页面进行测试，从而可以持续的对页面进行测试，且可以提升测试页面的准确性，进而提升了测试页面的效果。
附图说明
32.构成本技术的一部分的附图用来提供对本技术的进一步理解，本技术的示意性实施例及其说明用于解释本技术，并不构成对本技术的不当限定。在附图中：
33.图1是根据本技术实施例提供的页面的测试方法的流程图；
34.图2是根据本技术实施例提供的页面的测试方法的流程图一；
35.图3是根据本技术实施例提供的可选的页面的测试方法的流程图；
36.图4是本技术实施例中截取的页面图片的示意图；
37.图5是本技术实施例中点击页面元素之后生成的截图图片的示意图；
38.图6是根据本技术实施例提供的页面的测试装置的示意图。
具体实施方式
39.需要说明的是，在不冲突的情况下，本技术中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本技术。
40.为了使本技术领域的人员更好地理解本技术方案，下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分的实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本技术保护的范围。
41.需要说明的是，本技术的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本技术的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
42.实施例1
43.下面结合优选的实施步骤对本发明进行说明，图1是根据本技术实施例提供的页面的测试方法的流程图，如图1所示，该方法包括如下步骤：
44.步骤s101，获取目标图片和第一预设图片，其中，目标图片为对待测试的目标页面对应的图片，第一预设图片为目标页面中的节点对应的图片。
45.例如，上述的目标页面可以为待测试的网页页面。首先可以根据需求对网页页面进行图片的截取，得到网页页面的截图图片(上述的目标图片)，并对网页页面中的节点元素进行截图，生成网页页面中的元素对应的截图图片(上述的第一预设图片)。
46.步骤s102，获取第一预设图片在目标图片中的位置信息。
47.例如，使用网页页面中元素对应的图片(上述的第一预设图片)，查找第一预设图片在网页页面的截图图片(上述的目标图片)中的位置。
48.步骤s103，依据第一预设图片在目标图片中的位置信息，触发目标指令，其中，目标指令用于表示在目标页面中对第一预设图片进行目标操作。
49.例如，在查找到查找第一预设图片在网页页面的截图图片(上述的目标图片)中的位置之后，触发执行鼠标移动，键盘输入等动作的目标指令。即通过触发的这些动作指令，对网页页面中元素对应的图片(上述的第一预设图片)进行操作。
50.步骤s104，基于目标指令，对目标页面进行测试。
51.例如，根据触发的目标指令，测试网页页面是否正常。
52.通过上述的步骤s101至s104，通过依据获取到的第一预设图片在目标图片中的位置信息，触发目标指令，并基于目标指令，对目标页面进行测试，从而可以持续的对页面进行测试，且可以提升测试页面的准确性，进而提升了测试页面的效果。
53.为了快速准确的获取目标图片，在本技术实施例提供的页面的测试方法中，还可以通过以下步骤获取目标图片：获取待测试的目标页面；对目标页面的大小进行设置，得到第二页面；获取用于将页面转换为图片的脚本；执行脚本，将第二页面转换为目标图片。
54.例如，可以通过web自动化测试工具启动并加载web页面；再设置页面的大小，即在
测试的过程中，页面可以设置成不同的尺寸，完成不同页面尺寸的测试；然后植入生成图片的脚本，即可以通过web测试框架将js脚本注入到浏览器中，再利用脚本，生成图片(上述的目标图片)。
55.通过上述的方案，可以快速准确的获取到页面的截图图片。另外，通过设置页面的大小，可以测试不同分辨率下的显示以及精确匹配测试点的位置。
56.为了快速准确的得到目标图片，在本技术实施例提供的页面的测试方法中，还可以通过以下步骤得到目标图片：执行脚本，获取第二页面中每个节点的id信息；依据第二页面中每个节点的id信息，得到目标图片。
57.例如，如果测试框架不支持生成图片，可以使js脚本的方式生成图片。通过web测试框架将js脚本注入到浏览器中。注入的js脚本用于测试工具调用，根据传入的参数生成对应的图片。比如根据dom节点的id(identity documen，标识号)生成图片；生成整个页面的图片等。生成的图片回传到测试框架。
58.通过上述的方案，利用脚本，可以快速准确的得到页面的截图图片。
59.为了快速准确的获取第一预设图片在目标图片中的位置信息，在本技术实施例提供的页面的测试方法中，还可以通过以下步骤获取第一预设图片在目标图片中的位置信息：判断目标图片中是否存在第一预设图片；若目标图片中存在第一预设图片，则获取第一预设图片在目标图片中的属性信息；判断第一预设图片在目标图片中的属性信息是否与节点在目标页面中的属性信息相同；若第一预设图片在目标图片中的属性信息与节点在目标页面中的属性信息相同，则获取第一预设图片在目标图片中的位置信息。
60.例如，根据需求进行图片的截取之后，再根据截取到的图片与预置图片(上述的第一预设图片)获取到后续操作需要的信息。
61.比如，图片可以使用开源的库进行识别和匹配。测试框架读取当前步骤预置图片(或文本)和页面生成的图片传入到图片识别系统，查找对应图片是否存在以及对应的坐标位置(坐标可以有多个)、预置在新图面中的大小和数量等属性信息，并进行判断，如果上述信息全部确认正确，则继续后续的操作，获取第一预设图片在网页页面的截图图片(上述的目标图片)中的位置；如果上述信息有错误的地方，则不能继续后续的操作，即不能获取第一预设图片在网页页面的截图图片(上述的目标图片)中的位置，需要重新获取这些信息并进行判断。
62.通过上述的方案，可以快速准确的获取到预置图片在页面的截图图片中的位置。
63.图2是根据本技术实施例提供的页面的测试方法的流程图一，如图2所示，在本技术实施例提供的页面的测试方法中，基于目标指令，对目标页面进行测试包括：
64.步骤s201，响应目标指令，在目标页面中对第一预设图片进行目标操作，得到第一页面，其中，第一页面中至少包括节点和节点对应的子节点；
65.步骤s202，对第一页面进行截图，生成第一图片；
66.步骤s203，获取子节点对应的第二预设图片；
67.步骤s204，基于第一图片、第一预设图片和第二预设图片，对目标页面进行测试。
68.例如，获取到后续操作信息后(如获取图片对应的坐标)，根据对应的信息进行鼠标移动，文本输入等操作。比如将鼠标移动到指定的坐标执行点击操作。具体为，先获取对应节点在整个图片中的位置，再计算鼠标移动的位置，然后将鼠标移动到计算到的鼠标移
动的位置并执行点击操作(可以使用测试框架的方法进行交互)。然后再进行条件判断，可以判断图片(或文本)是否存在，判断完整图片是否一致等，再根据判断结果，测试网页页面。
69.通过上述的方案，可以补充基础的web测试框架覆盖面不足的问题(如canvas的测试)，实现完整的页面测试。
70.为了快速准确的对目标页面进行测试，在本技术实施例提供的页面的测试方法中，还可以通过以下步骤对目标页面进行测试：判断第一图片中是否存在第一预设图片和第二预设图片；若第一图片中存在第一预设图片和第二预设图片，则分别获取第一预设图片和第二预设图片在第一图片中的属性信息；判断第一预设图片在第一图片中的属性信息是否与节点在目标页面中的属性信息相同，并判断第二预设图片在第一图片中的属性信息是否与子节点在第一页面中的属性信息相同；若第一预设图片在第一图片中的属性信息与节点在目标页面中的属性信息相同，且第二预设图片在第一图片中的属性信息与子节点在第一页面中的属性信息相同，则表示目标页面正常；若第一预设图片在第一图片中的属性信息与节点在目标页面中的属性信息不相同，和/或，第二预设图片在第一图片中的属性信息与子节点在第一页面中的属性信息不相同，则表示目标页面异常。
71.例如，将鼠标移动到计算到的鼠标移动的位置并执行点击操作之后，进行条件判断时，具体过程可以为：判断图片(或文本)是否存在，判断完整图片是否一致，或者其他可以用于图片判断的方法，如果判断成功，且如果有后续操作，继续执行后续的操作，且如果没有后续操作，则代表该网页页面正常，如果判断失败，则代表该网页页面异常，并结束测试。
72.通过上述的方案，可以快速准确的对页面进行测试。
73.为了快速准确的对目标页面进行测试，在本技术实施例提供的页面的测试方法中，还可以通过以下步骤对目标页面进行测试：判断目标图片中是否存在第一预设图片；若目标图片中存在第一预设图片，则获取第一预设图片在目标图片中的属性信息；判断第一预设图片在目标图片中的属性信息是否与节点在目标页面中的属性信息相同；若第一预设图片在目标图片中的属性信息与节点在目标页面中的属性信息相同，则表示目标页面正常；若第一预设图片在目标图片中的属性信息与节点在目标页面中的属性信息不相同，则表示目标页面异常。
74.例如，进入页面，并截取完整页面之后，可以先判断预置图片(上述的第一预设图片)是否存在，如果存在，再调用图片识别函数查找预置图片的属性信息，比如预置图片在完整截图中的数量是否与预置真实数据相符，预置图片在完整截图中的大小是否与预置真实数据相符，预置图片在完整截图中的位置是否与预置真实数据相符等属性，如果上述属性信息都判断正确，则表示页面正常，如果上述属性信息出现任意一项或者多项判断不正确的情况，则表示页面异常。另外，如果判断预置图片(上述的第一预设图片)不存在，也表示页面异常。
75.通过上述的方案，可以简化测试流程，只需要知道操作流程，基于视觉的匹配方式进行交互操作，完成自动化测试。
76.例如，图3是根据本技术实施例提供的可选的页面的测试方法的流程图，如图3所示，可以采用web测试工具与图像识别的结果进行交互结合的方式完成页面的自动化测试，
且可选的页面的测试方法包括如下步骤：
77.1.通过web自动化测试工具启动并加载web页面。
78.2.设置页面的大小。在测试的过程中，页面可以设置成不同的尺寸，完成不同页面尺寸的测试。设置页面的大小，主要是为了测试不同分辨率下的显示以及精确匹配测试点的位置(比如一个按钮在页面中的位置)。
79.3.植入生成图片的脚本：如果测试框架可以进行页面截图，可以直接使用自动化框架的截屏函数；如果生成指定dom节点的图片可以使用；如果测试框架不支持生成图片，可以使js脚本的方式生成图片。通过web测试框架将js脚本注入到浏览器中。注入的js脚本用于测试工具调用，根据传入的参数生成对应的图片。比如根据dom节点的id生成图片；生成整个页面的图片等。生成的图片回传到测试框架。
80.4.根据需求进行图片的截取。图片的截取可以通过测试框架的api进行截取，如果框架不支持可以使用注入的js方法进行。
81.5.根据截取到的图片与预置图片获取到后续操作需要的信息。
82.图片可以使用开源的库进行识别和匹配。测试框架读取当前步骤预置图片(或文本)和页面生成的图片传入到图片识别系统，查找对应图片是否存在以及对应的坐标位置(坐标可以有多个)。
83.pre＝预置图片
84.new＝生成图片
85.判读图片是否存在
86.opencv.isexist(pre，new)
87.获取图片的坐标
88.opencv.getcoodinate(pre，new)
89.获取预置在新图面中的大小
90.opencv.getsize(pre，new)
91.6.识别后的可以进行后续操作信息的获取和条件判断。
92.(1)后续操作信息的获取
93.获取到后续操作信息后(如获取图片对应的x，y坐标)，根据对应的信息进行鼠标移动，文本输入等操作。
94.比如将鼠标移动到指定的坐标执行点击操作。
95.先获取对应节点在整个图片中的位置。
96.{x，y}＝opencv.getcoodinate(pre，new)
97.计算鼠标移动的位置。
98.{x1，y1}＝calculate(x，y)
99.将鼠标移动到x1，y1并执行点击操作(可以使用测试框架的方法进行交互)。
100.(2)条件判断
101.判断图片(或文本)是否存在。
102.判断完整图片是否一致。
103.其他可以用于图片判断的方法。
104.如果判断成功，继续执行后续的操作，如果判断失败，测试结束。
105.7.如果有后续流程并且第6步通过则可以继续进行测试，操作回到步骤4；如果没有后续步骤，测试结束。
106.例如，对图形化的拓扑进行测试可以分为如下步骤：
107.(1)进入页面，先截取完整页面，且截取的完整页面如图4所示，图4是本技术实施例中截取的页面图片的示意图。
108.(2)调用图片识别函数查找预置节点(如图4所示)在完整截图中的数量是否与预置真实数据相符。
109.(3)在完整图片中查找“苏州1”预置节点(如图4所示)的位置。
110.(4)将鼠标移到预置图片位置的坐标，执行点击。
111.(5)截图，用于判断，且截图如图5所示，图5是本技术实施例中点击页面元素之后生成的截图图片的示意图，图5中的数字代表ip(internet protocol，网际互连协议)地址。
112.(6)确认展开后的效果：在展开后的图片查找“苏州1”预置节点(如图5所示)，看是否存在。
113.(7)确认展开后的效果：在展开后的图片中查找预置子节点(如图5所示)，看是否存在。
114.(8)找“苏州1”预置节点(如图5所示)的坐标。
115.(9)将鼠标移动到根据查找到的坐标计算出的合适坐标，并点击。
116.(10)截图对比跟原始截图是否相同。此时就完成了一个基于图像识别的节点展开收起的用例测试。
117.综上，本技术实施例提供的页面的测试方法，通过获取目标图片和第一预设图片，其中，目标图片为对待测试的目标页面对应的图片，第一预设图片为目标页面中的节点对应的图片；获取第一预设图片在目标图片中的位置信息；依据第一预设图片在目标图片中的位置信息，触发目标指令，其中，目标指令用于表示在目标页面中对第一预设图片进行目标操作；基于目标指令，对目标页面进行测试，解决了相关技术中测试页面的效果较差的问题。通过依据获取到的第一预设图片在目标图片中的位置信息，触发目标指令，并基于目标指令，对目标页面进行测试，从而可以持续的对页面进行测试，且可以提升测试页面的准确性，进而提升了测试页面的效果。
118.需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
119.实施例2
120.本技术实施例还提供了一种页面的测试装置，需要说明的是，本技术实施例的页面的测试装置可以用于执行本技术实施例所提供的用于页面的测试方法。以下对本技术实施例提供的页面的测试装置进行介绍。
121.图6是根据本技术实施例的页面的测试装置的示意图。如图6所示，该装置包括：第一获取模块601、第二获取模块602、第一触发模块603和第一测试模块604。
122.具体地，第一获取模块601，用于获取目标图片和第一预设图片，其中，目标图片为对待测试的目标页面对应的图片，第一预设图片为目标页面中的节点对应的图片；
123.第二获取模块602，用于获取第一预设图片在目标图片中的位置信息；
124.第一触发模块603，用于依据第一预设图片在目标图片中的位置信息，触发目标指令，其中，目标指令用于表示在目标页面中对第一预设图片进行目标操作；
125.第一测试模块604，用于基于目标指令，对目标页面进行测试。
126.综上，本技术实施例提供的页面的测试装置，通过第一获取模块601获取目标图片和第一预设图片，其中，目标图片为对待测试的目标页面对应的图片，第一预设图片为目标页面中的节点对应的图片；第二获取模块602获取第一预设图片在目标图片中的位置信息；第一触发模块603依据第一预设图片在目标图片中的位置信息，触发目标指令，其中，目标指令用于表示在目标页面中对第一预设图片进行目标操作；第一测试模块604基于目标指令，对目标页面进行测试，解决了相关技术中测试页面的效果较差的问题。通过依据获取到的第一预设图片在目标图片中的位置信息，触发目标指令，并基于目标指令，对目标页面进行测试，从而可以持续的对页面进行测试，且可以提升测试页面的准确性，进而提升了测试页面的效果。
127.可选地，在本技术实施例提供的页面的测试装置中，第一测试模块包括：第一响应单元，用于响应目标指令，在目标页面中对第一预设图片进行目标操作，得到第一页面，其中，第一页面中至少包括节点和节点对应的子节点；第一生成单元，用于对第一页面进行截图，生成第一图片；第一获取单元，用于获取子节点对应的第二预设图片；第一测试单元，用于基于第一图片、第一预设图片和第二预设图片，对目标页面进行测试。
128.例如，获取到后续操作信息后(如获取图片对应的坐标)，根据对应的信息进行鼠标移动，文本输入等操作。比如将鼠标移动到指定的坐标执行点击操作。具体为，先获取对应节点在整个图片中的位置，再计算鼠标移动的位置，然后将鼠标移动到计算到的鼠标移动的位置并执行点击操作(可以使用测试框架的方法进行交互)。然后再进行条件判断，可以判断图片(或文本)是否存在，判断完整图片是否一致等，再根据判断结果，测试网页页面。
129.通过上述的方案，可以补充基础的web测试框架覆盖面不足的问题(如canvas的测试)，实现完整的页面测试。
130.可选地，在本技术实施例提供的页面的测试装置中，第一测试单元包括：第一判断子模块，用于判断第一图片中是否存在第一预设图片和第二预设图片；第一获取子模块，用于若第一图片中存在第一预设图片和第二预设图片，则分别获取第一预设图片和第二预设图片在第一图片中的属性信息；第二判断子模块，用于判断第一预设图片在第一图片中的属性信息是否与节点在目标页面中的属性信息相同，并判断第二预设图片在第一图片中的属性信息是否与子节点在第一页面中的属性信息相同；第一确定子模块，用于若第一预设图片在第一图片中的属性信息与节点在目标页面中的属性信息相同，且第二预设图片在第一图片中的属性信息与子节点在第一页面中的属性信息相同，则表示目标页面正常；第二确定子模块，用于若第一预设图片在第一图片中的属性信息与节点在目标页面中的属性信息不相同，和/或，第二预设图片在第一图片中的属性信息与子节点在第一页面中的属性信息不相同，则表示目标页面异常。
131.例如，将鼠标移动到计算到的鼠标移动的位置并执行点击操作之后，进行条件判断时，具体过程可以为：判断图片(或文本)是否存在，判断完整图片是否一致，或者其他可以用于图片判断的方法，如果判断成功，且如果有后续操作，继续执行后续的操作，且如果
没有后续操作，则代表该网页页面正常，如果判断失败，则代表该网页页面异常，并结束测试。
132.通过上述的方案，可以快速准确的对页面进行测试。
133.可选地，在本技术实施例提供的页面的测试装置中，第二获取模块包括：第一判断单元，用于判断目标图片中是否存在第一预设图片；第二获取单元，用于若目标图片中存在第一预设图片，则获取第一预设图片在目标图片中的属性信息；第二判断单元，用于判断第一预设图片在目标图片中的属性信息是否与节点在目标页面中的属性信息相同；第三获取单元，用于若第一预设图片在目标图片中的属性信息与节点在目标页面中的属性信息相同，则获取第一预设图片在目标图片中的位置信息。
134.例如，根据需求进行图片的截取之后，再根据截取到的图片与预置图片(上述的第一预设图片)获取到后续操作需要的信息。
135.比如，图片可以使用开源的库进行识别和匹配。测试框架读取当前步骤预置图片(或文本)和页面生成的图片传入到图片识别系统，查找对应图片是否存在以及对应的坐标位置(坐标可以有多个)、预置在新图面中的大小和数量等属性信息，并进行判断，如果上述信息全部确认正确，则继续后续的操作，获取第一预设图片在网页页面的截图图片(上述的目标图片)中的位置；如果上述信息有错误的地方，则不能继续后续的操作，即不能获取第一预设图片在网页页面的截图图片(上述的目标图片)中的位置，需要重新获取这些信息并进行判断。
136.通过上述的方案，可以快速准确的获取到预置图片在页面的截图图片中的位置。
137.可选地，在本技术实施例提供的页面的测试装置中，该装置还包括：第一判断模块，用于在获取目标图片和第一预设图片之后，判断目标图片中是否存在第一预设图片；第三获取模块，用于若目标图片中存在第一预设图片，则获取第一预设图片在目标图片中的属性信息；第二判断模块，用于判断第一预设图片在目标图片中的属性信息是否与节点在目标页面中的属性信息相同；第一确定模块，用于若第一预设图片在目标图片中的属性信息与节点在目标页面中的属性信息相同，则表示目标页面正常；第二确定模块，用于若第一预设图片在目标图片中的属性信息与节点在目标页面中的属性信息不相同，则表示目标页面异常。
138.例如，进入页面，并截取完整页面之后，可以先判断预置图片(上述的第一预设图片)是否存在，如果存在，再调用图片识别函数查找预置图片的属性信息，比如预置图片在完整截图中的数量是否与预置真实数据相符，预置图片在完整截图中的大小是否与预置真实数据相符，预置图片在完整截图中的位置是否与预置真实数据相符等属性，如果上述属性信息都判断正确，则表示页面正常，如果上述属性信息出现任意一项或者多项判断不正确的情况，则表示页面异常。另外，如果判断预置图片(上述的第一预设图片)不存在，也表示页面异常。
139.通过上述的方案，可以简化测试流程，只需要知道操作流程，基于视觉的匹配方式进行交互操作，完成自动化测试。
140.可选地，在本技术实施例提供的页面的测试装置中，第一获取模块包括：第四获取单元，用于获取待测试的目标页面；第一设置单元，用于对目标页面的大小进行设置，得到第二页面；第五获取单元，用于获取用于将页面转换为图片的脚本；第一转换单元，用于执
行脚本，将第二页面转换为目标图片。
141.例如，可以通过web自动化测试工具启动并加载web页面；再设置页面的大小，即在测试的过程中，页面可以设置成不同的尺寸，完成不同页面尺寸的测试；然后植入生成图片的脚本，即可以通过web测试框架将js脚本注入到浏览器中，再利用脚本，生成图片(上述的目标图片)。
142.通过上述的方案，可以快速准确的获取到页面的截图图片。另外，通过设置页面的大小，可以测试不同分辨率下的显示以及精确匹配测试点的位置。
143.可选地，在本技术实施例提供的页面的测试装置中，第一转换单元包括：第二获取子模块，用于执行脚本，获取第二页面中每个节点的id信息；第三确定子模块，用于依据第二页面中每个节点的id信息，得到目标图片。
144.例如，如果测试框架不支持生成图片，可以使js脚本的方式生成图片。通过web测试框架将js脚本注入到浏览器中。注入的js脚本用于测试工具调用，根据传入的参数生成对应的图片。比如根据dom节点的id(identity documen，标识号)生成图片；生成整个页面的图片等。生成的图片回传到测试框架。
145.通过上述的方案，利用脚本，可以快速准确的得到页面的截图图片。
146.所述页面的测试装置包括处理器和存储器，上述第一获取模块601、第二获取模块602、第一触发模块603和第一测试模块604等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。
147.处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来提升测试页面的效果。
148.存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flash ram)，存储器包括至少一个存储芯片。
149.本发明实施例提供了一种计算机可读存储介质，其上存储存有程序，该程序被处理器执行时实现所述页面的测试方法。
150.本发明实施例提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行所述页面的测试方法。
151.本发明实施例提供了一种电子设备，设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序，处理器执行程序时实现以下步骤：获取目标图片和第一预设图片，其中，所述目标图片为对待测试的目标页面对应的图片，所述第一预设图片为所述目标页面中的节点对应的图片；获取所述第一预设图片在所述目标图片中的位置信息；依据所述第一预设图片在所述目标图片中的位置信息，触发目标指令，其中，所述目标指令用于表示在所述目标页面中对所述第一预设图片进行目标操作；基于所述目标指令，对所述目标页面进行测试。
152.处理器执行程序时还实现以下步骤：基于所述目标指令，对所述目标页面进行测试包括：响应所述目标指令，在所述目标页面中对所述第一预设图片进行目标操作，得到第一页面，其中，所述第一页面中至少包括所述节点和所述节点对应的子节点；对所述第一页面进行截图，生成第一图片；获取所述子节点对应的第二预设图片；基于所述第一图片、所述第一预设图片和所述第二预设图片，对所述目标页面进行测试。
153.处理器执行程序时还实现以下步骤：基于所述第一图片、所述第一预设图片和所述第二预设图片，对所述目标页面进行测试包括：判断所述第一图片中是否存在所述第一预设图片和所述第二预设图片；若所述第一图片中存在所述第一预设图片和所述第二预设图片，则分别获取所述第一预设图片和所述第二预设图片在所述第一图片中的属性信息；判断所述第一预设图片在所述第一图片中的属性信息是否与所述节点在所述目标页面中的属性信息相同，并判断所述第二预设图片在所述第一图片中的属性信息是否与所述子节点在所述第一页面中的属性信息相同；若所述第一预设图片在所述第一图片中的属性信息与所述节点在所述目标页面中的属性信息相同，且所述第二预设图片在所述第一图片中的属性信息与所述子节点在所述第一页面中的属性信息相同，则表示所述目标页面正常；若所述第一预设图片在所述第一图片中的属性信息与所述节点在所述目标页面中的属性信息不相同，和/或，所述第二预设图片在所述第一图片中的属性信息与所述子节点在所述第一页面中的属性信息不相同，则表示所述目标页面异常。
154.处理器执行程序时还实现以下步骤：获取所述第一预设图片在所述目标图片中的位置信息包括：判断所述目标图片中是否存在所述第一预设图片；若所述目标图片中存在所述第一预设图片，则获取所述第一预设图片在所述目标图片中的属性信息；判断所述第一预设图片在所述目标图片中的属性信息是否与所述节点在所述目标页面中的属性信息相同；若所述第一预设图片在所述目标图片中的属性信息与所述节点在所述目标页面中的属性信息相同，则获取所述第一预设图片在所述目标图片中的位置信息。
155.处理器执行程序时还实现以下步骤：在获取目标图片和第一预设图片之后，所述方法还包括：判断所述目标图片中是否存在所述第一预设图片；若所述目标图片中存在所述第一预设图片，则获取所述第一预设图片在所述目标图片中的属性信息；判断所述第一预设图片在所述目标图片中的属性信息是否与所述节点在所述目标页面中的属性信息相同；若所述第一预设图片在所述目标图片中的属性信息与所述节点在所述目标页面中的属性信息相同，则表示所述目标页面正常；若所述第一预设图片在所述目标图片中的属性信息与所述节点在所述目标页面中的属性信息不相同，则表示所述目标页面异常。
156.处理器执行程序时还实现以下步骤：获取目标图片包括：获取待测试的目标页面；对所述目标页面的大小进行设置，得到第二页面；获取用于将页面转换为图片的脚本；执行所述脚本，将所述第二页面转换为所述目标图片。
157.处理器执行程序时还实现以下步骤：执行所述脚本，将所述第二页面转换为所述目标图片包括：执行所述脚本，获取所述第二页面中每个节点的id信息；依据所述第二页面中每个节点的id信息，得到所述目标图片。
158.本文中的设备可以是服务器、pc、pad、手机等。
159.本技术还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：获取目标图片和第一预设图片，其中，所述目标图片为对待测试的目标页面对应的图片，所述第一预设图片为所述目标页面中的节点对应的图片；获取所述第一预设图片在所述目标图片中的位置信息；依据所述第一预设图片在所述目标图片中的位置信息，触发目标指令，其中，所述目标指令用于表示在所述目标页面中对所述第一预设图片进行目标操作；基于所述目标指令，对所述目标页面进行测试。
160.当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：基于所
述目标指令，对所述目标页面进行测试包括：响应所述目标指令，在所述目标页面中对所述第一预设图片进行目标操作，得到第一页面，其中，所述第一页面中至少包括所述节点和所述节点对应的子节点；对所述第一页面进行截图，生成第一图片；获取所述子节点对应的第二预设图片；基于所述第一图片、所述第一预设图片和所述第二预设图片，对所述目标页面进行测试。
161.当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：基于所述第一图片、所述第一预设图片和所述第二预设图片，对所述目标页面进行测试包括：判断所述第一图片中是否存在所述第一预设图片和所述第二预设图片；若所述第一图片中存在所述第一预设图片和所述第二预设图片，则分别获取所述第一预设图片和所述第二预设图片在所述第一图片中的属性信息；判断所述第一预设图片在所述第一图片中的属性信息是否与所述节点在所述目标页面中的属性信息相同，并判断所述第二预设图片在所述第一图片中的属性信息是否与所述子节点在所述第一页面中的属性信息相同；若所述第一预设图片在所述第一图片中的属性信息与所述节点在所述目标页面中的属性信息相同，且所述第二预设图片在所述第一图片中的属性信息与所述子节点在所述第一页面中的属性信息相同，则表示所述目标页面正常；若所述第一预设图片在所述第一图片中的属性信息与所述节点在所述目标页面中的属性信息不相同，和/或，所述第二预设图片在所述第一图片中的属性信息与所述子节点在所述第一页面中的属性信息不相同，则表示所述目标页面异常。
162.当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：获取所述第一预设图片在所述目标图片中的位置信息包括：判断所述目标图片中是否存在所述第一预设图片；若所述目标图片中存在所述第一预设图片，则获取所述第一预设图片在所述目标图片中的属性信息；判断所述第一预设图片在所述目标图片中的属性信息是否与所述节点在所述目标页面中的属性信息相同；若所述第一预设图片在所述目标图片中的属性信息与所述节点在所述目标页面中的属性信息相同，则获取所述第一预设图片在所述目标图片中的位置信息。
163.当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：在获取目标图片和第一预设图片之后，所述方法还包括：判断所述目标图片中是否存在所述第一预设图片；若所述目标图片中存在所述第一预设图片，则获取所述第一预设图片在所述目标图片中的属性信息；判断所述第一预设图片在所述目标图片中的属性信息是否与所述节点在所述目标页面中的属性信息相同；若所述第一预设图片在所述目标图片中的属性信息与所述节点在所述目标页面中的属性信息相同，则表示所述目标页面正常；若所述第一预设图片在所述目标图片中的属性信息与所述节点在所述目标页面中的属性信息不相同，则表示所述目标页面异常。
164.当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：获取目标图片包括：获取待测试的目标页面；对所述目标页面的大小进行设置，得到第二页面；获取用于将页面转换为图片的脚本；执行所述脚本，将所述第二页面转换为所述目标图片。
165.当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：执行所述脚本，将所述第二页面转换为所述目标图片包括：执行所述脚本，获取所述第二页面中每个节点的id信息；依据所述第二页面中每个节点的id信息，得到所述目标图片。
166.本领域内的技术人员应明白，本技术的实施例可提供为方法、系统、或计算机程序
产品。因此，本技术可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本技术可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
167.本技术是参照根据本技术实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
168.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
169.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
170.在一个典型的配置中，计算设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。
171.存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flash ram)。存储器是计算机可读介质的示例。
172.计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
173.还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。
174.本领域技术人员应明白，本技术的实施例可提供为方法、系统或计算机程序产品。因此，本技术可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本技术可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存
储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
175.以上仅为本技术的实施例而已，并不用于限制本技术。对于本领域技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本技术的权利要求范围之内。