一种页面检测方法、装置和用于页面检测的装置与流程

1.本发明涉及计算机技术领域，尤其涉及一种页面检测方法、装置和用于页面检测的装置。


背景技术：

2.随着互联网的迅速发展，人们的日常生活，如购物、阅读、娱乐等都可以在网上轻松完成。由于人们越来越离不开网络，因此网站的可用性与稳定性显得尤为重要。
3.为保证网站的可用性与稳定性，需要对网站的页面进行检测，如检测是否存在ui(user interface，用户界面)异常，以确保及时发现网站页面的异常，减少对用户的影响。
4.目前，对于ui(user interface，用户界面)异常的检测，仍没有较好的技术解决方案，通常是通过人工进行检测，例如通过编写测试用例进行测试覆盖。然而，实际应用中导致ui异常的原因较多，例如，有可能是页面代码问题所导致，也有可能是浏览器的兼容性问题所导致。因此，众多的ui异常类型以及复杂的场景问题使得人工编写测试用例等方法难以推行，导致ui异常检测的效率和准确率较低。


技术实现要素：

5.本发明实施例提供一种页面检测方法、装置和用于页面检测的装置，可以提高ui异常检测的效率和准确率。
6.为了解决上述问题，本发明实施例公开了一种页面检测方法，所述方法包括：
7.根据预设的异常类型，修改第一页面的层叠样式表css，得到包含异常元素的第二页面；
8.对所述第一页面对应的第一图片和所述第二页面对应的第二图片进行匹配，确定所述异常元素在所述第二图片中的位置信息；
9.根据所述异常元素对应的异常类型和位置信息，生成所述第二图片对应的标注信息；
10.根据批量的第二图片以及第二图片对应的标注信息，训练异常检测模型；
11.通过所述异常检测模型，对实时获取的页面图片进行异常检测。
12.另一方面，本发明实施例公开了一种页面检测装置，所述装置包括：
13.样式修改模块，用于根据预设的异常类型，修改第一页面的层叠样式表css，得到包含异常元素的第二页面；
14.位置确定模块，用于对所述第一页面对应的第一图片和所述第二页面对应的第二图片进行匹配，确定所述异常元素在所述第二图片中的位置信息；
15.标注生成模块，用于根据所述异常元素对应的异常类型和位置信息，生成所述第二图片对应的标注信息；
16.模型训练模块，用于根据批量的第二图片以及第二图片对应的标注信息，训练异常检测模型；
17.在线检测模块，用于通过所述异常检测模型，对实时获取的页面图片进行异常检测。
18.再一方面，本发明实施例公开了一种用于页面检测的装置，包括有存储器，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器执行所述一个或者一个以上程序包含用于进行以下操作的指令：
19.根据预设的异常类型，修改第一页面的层叠样式表css，得到包含异常元素的第二页面；
20.对所述第一页面对应的第一图片和所述第二页面对应的第二图片进行匹配，确定所述异常元素在所述第二图片中的位置信息；
21.根据所述异常元素对应的异常类型和位置信息，生成所述第二图片对应的标注信息；
22.根据批量的第二图片以及第二图片对应的标注信息，训练异常检测模型；
23.通过所述异常检测模型，对实时获取的页面图片进行异常检测。
24.又一方面，本发明实施例公开了一种机器可读介质，其上存储有指令，当由一个或多个处理器执行时，使得装置执行如前述一个或多个所述的页面检测方法。
25.本发明实施例包括以下优点：
26.本发明实施例根据预设的异常类型，对无ui异常的第一页面的css进行修改，得到有ui异常的第二页面；并且将第一页面对应的第一图片和第二页面对应的第二图片进行匹配，可以确定第二图片中异常元素的位置信息。基于上述修改过程，辅以自动化流程可以形成批量的训练样本。其中，每一个训练样本可以包括一个第二图片，以及该第二图片的标注信息，该标注信息中包括该第二图片中异常元素对应的异常类型和位置信息。通过批量的训练样本，可以训练得到异常检测模型，进而可以通过该异常检测模型，对实时获取的页面图片进行异常检测。
27.本发明实施例在构建训练样本的过程中，根据预先分析总结得到的预设异常类型，对真实页面的css进行修改，得到包含预设异常类型的异常元素的第二页面。在此基础上构建训练样本，使得构建的训练样本更加符合真实场景，进而可以提高异常检测模型识别ui异常的准确率。
28.此外，本发明实施例构建训练样本的过程可以通过自动化流程实现，并且根据大量的训练样本训练得到的异常检测模型，可以在训练过程中不断提高识别的精准度，训练完成后使用该异常检测模型可以自动检测页面中的ui异常，可以避免编写大量测试用例导致测试效率较低、以及测试用例覆盖不全面导致检测不够准确等问题，可以提高页面ui异常检测的效率和准确率。
附图说明
29.为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
30.图1是本发明的一种页面检测方法实施例的步骤流程图；
31.图2是本发明的一种页面检测装置实施例的结构框图；
32.图3是本发明的一种用于页面检测的装置800的框图；及
33.图4是本发明的一些实施例中服务器的结构示意图。
具体实施方式
34.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
35.方法实施例
36.参照图1，示出了本发明的一种页面检测方法实施例的步骤流程图，具体可以包括如下步骤：
37.步骤101、根据预设的异常类型，修改第一页面的css(cascading style sheets，层叠样式表)，得到包含异常元素的第二页面；
38.步骤102、对所述第一页面对应的第一图片和所述第二页面对应的第二图片进行匹配，确定所述异常元素在所述第二图片中的位置信息；
39.步骤103、根据所述异常元素对应的异常类型和位置信息，生成所述第二图片对应的标注信息；
40.步骤104、根据批量的第二图片以及第二图片对应的标注信息，训练异常检测模型；
41.步骤105、通过所述异常检测模型，对实时获取的页面图片进行异常检测。
42.本发明实施例的页面检测方法可用于检测网站的页面中是否存在ui异常，如果存在ui异常，可以识别出ui异常的异常类型和ui异常在页面中的位置信息。由此可以记录ui异常信息，并生成相应的异常错误信息数据，以便技术人员可以根据该数据对网站页面进行调整或优化。
43.本发明实施例的页面检测方法可适用于电子设备，所述电子设备包括但不限于：服务器、智能手机、录音笔、平板电脑、电子书阅读器、mp3(动态影像专家压缩标准音频层面3，moving picture experts group audio layer iii)播放器、mp4(动态影像专家压缩标准音频层面4，moving picture experts group audio layer iv)播放器、膝上型便携计算机、车载电脑、台式计算机、机顶盒、智能电视机、可穿戴设备等等。
44.为提高ui异常检测的效率和准确率，本发明实施例可以预先获取线上实际产生的各类ui异常的日志数据，对所述日志数据进行分析、总结，得到较为常见的预设ui异常类型。针对各种预设的异常类型，构建训练样本，进而可以根据训练样本训练异常检测模型。在实际应用中，可以通过所述异常检测模型自动检测页面中是否存在ui异常。进而可以避免编写大量测试用例导致测试效率较低、以及测试用例覆盖不全面导致检测不够准确等问题，可以提高页面ui异常检测的效率和准确率。
45.在本发明的一种可选实施例中，所述预设的异常类型至少可以包括如下任意一种：字体重叠、异常折行、以及异常遮盖。
46.其中，字体重叠指页面中上一行文字与下一行文字产生重叠。异常折行指页面中
本应显示在同一行的内容被拆分成两行显示。异常遮盖指页面中某些元素的部分内容被其它元素遮挡。
47.可以理解，上述三种异常类型仅作为本发明的一种示例。本发明实施例对预设的异常类型不加以限制，例如，所述异常类型还可以包括页面中的图像绘制异常、页面中的按键未完全展开、页面中的输入框显示过小等。为便于描述，本发明实施例中均以字体重叠的异常类型为例进行说明，其它异常类型的处理过程类似，相互参照即可。
48.css为html(hypertext markup language，超级文本标记语言)页面提供了一种样式规则，定义了页面中各元素的显示方式。本发明实施例根据预设的异常类型，修改第一页面的css，可以得到包含异常元素的第二页面，且该异常元素符合该预设的异常类型。其中，第一页面指的是不包含ui异常的正常页面，第二页面指的是对所述第一页面的css修改之后，得到的包含ui异常的异常页面。例如，对于第一页面，根据字体重叠的异常类型对第一页面的css进行修改，得到的第二页面中包含异常元素，且该异常元素的ui异常类型为字体重叠。
49.在本发明的一种可选实施例中，步骤101根据预设的异常类型，修改第一页面的层叠样式表css，得到包含异常元素的第二页面，具体可以包括：
50.步骤s11、在所述第一页面的css中随机确定目标元素；
51.步骤s12、根据所述预设的异常类型，修改所述目标元素的样式属性值，将所述目标元素修改为所述异常类型的异常元素，得到第二页面。
52.css的样式规则可用于描述网页中的元素，样式规则由一个或多个样式属性及其值组成。样式属性可以包括字体、字体大小、背景颜色、行间距、行高等。本发明实施例通过修改第一页面中目标元素的样式属性值，可以将该目标元素修改为异常元素。
53.在具体应用中，通常使用div标签定义html页面中的一个分隔区块或者一个区域部分，html页面中的一个分隔区块或者一个区域部分称为div元素。div元素经常与css一起使用，用来布局网页，以便通过css对这些div元素进行格式化。本发明实施例中提及的页面中的元素可以指html页面中的div元素。
54.由于一个页面中通常包含大量的div元素，因此，本发明实施例可以在第一页面的css中随机选择一个div元素作为目标元素。根据预设的异常类型，修改该目标元素的样式属性值，以将该目标元素修改为符合该异常类型的异常元素，得到第二页面。例如，根据字体重叠的异常类型修改该目标元素的样式属性值，如缩小该目标元素的行间距，可以将该目标元素修改为字体重叠的异常元素，得到第二页面。
55.在本发明的一种可选实施例中，所述方法还可以包括：在修改第一页面的css之前，获取所述第一页面对应的第一图片；以及，在修改第一页面的层叠样式表css，得到包含异常元素的第二页面之后，获取所述第二页面对应的第二图片。
56.其中，第一图片可以为第一页面的页面截图，第一图片中不包含ui异常的异常元素。第二图片可以为第二页面的页面截图，第二图片中包含对第一页面的目标元素进行修改得到的符合预设ui异常类型的异常元素。
57.在获取所述第一页面对应的第一图片和所述第二页面对应的第二图片之后，可以对第一图片和第二图片进行匹配，以确定所述异常元素在所述第二图片中的位置信息。
58.在本发明的一种可选实施例中，步骤102对所述第一页面对应的第一图片和所述
第二页面对应的第二图片进行匹配，确定所述异常元素在所述第二图片中的位置信息，具体可以包括：
59.步骤s21、采用边缘检测技术，分别识别出所述第一图片和所述第二图片中的结构化元素；
60.步骤s22、对所述第一图片和所述第二图片中的结构化元素进行逐一比对，确定第二图片与第一图片中相应位置的不匹配的结构化元素为异常元素；
61.步骤s23、将所述异常元素对应的区域图像与所述第二图片进行匹配，确定所述异常元素在所述第二图片中的位置信息。
62.边缘检测是图像处理和计算机视觉中的基本问题，边缘检测的目的是标识图像中变化明显的点。图像中的显著变化通常反映了属性的重要事件和变化，如深度上的不连续、表面方向不连续、物质属性变化和场景照明变化等。通过边缘检测可以将图像划分为若干个区域，相同区域中的像素点具有相同或者相似的特征。
63.对于一个html页面，一般由大量的div元素构成。从图像上来看，不同的div元素之间一般会存在深度上的不连续、场景照明变化等结构上的显著变化。因此，本发明实施例中所述的结构化元素指的是第一页面和第二页面中的div元素，依据第一页面和第二页面中每个div元素在第一图片和第二图片中的显示区域，对第一图片和第二图片进行边缘检测，可以识别得到第一图片和所述第二图片中的结构化元素，该结构化元素即为第一页面和第二页面中的div元素。
64.由此，本发明实施例可以将第一图片和第二图片划分为若干个区域，每个区域对应一个结构化元素(如div元素)。边缘检测算法可以采用凯尼(canny)、索贝尔(sobel)等算子，本发明实施例对此不做限制。
65.可选地，如果第一图片和第二图片为彩色图片，可以在边缘检测之前，先对第一图片和第二图片进行灰度化处理得到灰度图像，得到的灰度图像具有彩色无关性，进而可以将邻域内灰度值突变的点作为边缘，以提高边缘检测的准确率。然后根据灰度图像大小，采用自适应确定降采样率，以对灰度图像进行降采样；接下来可以对降采样后的图像进行边缘检测，以提高边缘检测的效率。
66.通过边缘检测分别识别出第一图片和第二图片中的结构化元素之后，可以对两个图片中的结构化元素逐一进行比对，确定第二图片中与第一图片中相应位置的不匹配的结构化元素为异常元素。由此，可以在第二图片中找到异常元素。
67.在本发明的一种可选实施例中，步骤s22对所述第一图片和所述第二图片中的结构化元素进行逐一比对之后，所述方法还可以包括：
68.若确定所述第二图片中的结构化元素与所述第一图片中的结构化元素全部匹配，或者，若确定所述第二图片中与所述第一图片中不匹配的结构化元素的个数超过预设数值，则确定所述第二图片为失败图片。
69.在具体应用中，修改第一页面的css之后，有可能存在修改失败的情况。例如，在第一页面的css中随机确定目标元素，按照预设的异常类型(如字体重叠)修改该目标元素的样式属性值，得到第二页面。如果该目标元素的样式属性值修改的差异较小，有可能导致第二页面中该目标元素并未发生字体重叠的情况。这样，在对该第一图片和该第二图片中的结构化元素进行逐一比对之后，发现该第二图片中的结构化元素与该第一图片中的结构化
元素全部匹配，没有不匹配的结构化元素，也即，在修改第一页面的css之后，第一页面并未发生改变，说明本次修改失败。本发明实施例将该第二图片确定为失败图片，可以丢弃失败图片，重新对第一页面的css进行修改。
70.在具体应用中，还可能存在另一种修改失败的情况。例如，在第一页面的css中随机确定目标元素，按照预设的异常类型(如字体重叠)修改该目标元素的样式属性值。由于该目标元素是随机确定的，因此该目标元素可能是html页面外层结构中的某个div元素。html页面中的div元素通常是层层嵌套的，内层结构的div元素的改变可能对页面整体结构产生较小的影响，而外层结构的div元素的改变有可能对页面整体结构产生较大的影响。例如，某个div元素的样式属性值的改变，可能导致其它多个div元素的位置发生错位，进而影响页面的整体结构。或者，如果该目标元素的样式属性值修改的差异较大，也有可能影响到其它div元素的显示。
71.这样，在对该第一图片和该第二图片中的结构化元素进行逐一比对之后，可能会发现该第二图片中存在大量与该第一图片不匹配的结构化元素。这种情况也说明本次修改失败，本发明实施例将该第二图片确定为失败图片，可以丢弃失败图片，重新对第一页面的css进行修改。
72.可选地，在对第一图片和第二图片中的结构化元素进行逐一比对的过程中，可以对不匹配的结构化元素进行计数，如果确定第二图片中与第一图片中不匹配的结构化元素的个数超过预设数值，则确定第二图片为失败图片。
73.为尽量避免出现修改失败的情况，可选地，本发明实施例在第一页面的css中随机确定目标元素时，可以在第一页面的内层结构的div元素中确定目标元素。由此，可以尽量减少对外层div元素的修改导致其它div元素错位的情况发生。
74.此外，还可以限制每次修改的目标元素的个数，例如，每次只修改第一页面的css中的一个目标元素，以减少修改失败的概率。
75.在第二图片中找到异常元素之后，需要确定该异常元素在第二图片中的位置信息。具体地，可以对该异常元素所在的区域进行截图，得到该异常元素对应的区域图像。通过将所述异常元素对应的区域图像与所述第二图片进行匹配，可以确定所述异常元素在所述第二图片中的位置信息。
76.在本发明实施例中，可以对所述异常元素对应的区域图像与所述第二图片对应的图像进行模板匹配。模板匹配是一种用于在源图像s(即第二图片对应的图像)中寻找给定的模板图像t(即异常元素对应的区域图像)的技术。其原理是通过一些相似度准则来衡量两个图像之间的相似度similarity(s,t)。通过模板匹配技术，可以在第二图片中定位异常元素对应的区域图像所在的位置信息，该位置信息可以为异常元素在第二图片中的坐标。如该异常元素的左上角在第二图片中的坐标。
77.在确定异常元素在第二图片中的位置信息之后，可以根据异常元素对应的异常类型和位置信息，生成第二图片对应的标注信息，以得到用于训练异常检测模型的训练样本。
78.在本发明的一种可选实施例中，步骤103根据所述异常元素对应的异常类型和位置信息，生成所述第二图片对应的标注信息，具体可以包括：将所述异常元素对应的异常类型和位置信息写入预置文件，生成所述第二图片对应的标注文件。
79.具体地，在确定异常元素在第二图片中的位置信息之后，可以将该异常元素对应
的异常类型和位置信息写入预置文件，生成所述第二图片对应的标注文件，该标注文件用于记录该第二图片对应的标注信息，该标注信息包括该第二图片中异常元素对应的异常类型和位置信息。其中，所述预置文件可以包括json文件或xml文件等。
80.由此，可以将一个第二图片以及该第二图片对应的标注文件作为一条训练样本，该标注文件中包括该第二图片中异常元素对应的异常类型和位置信息。
81.在本发明的一种可选实施例中，步骤104根据批量的第二图片以及第二图片对应的标注信息，训练异常检测模型，具体可以包括：
82.步骤s31、将所述第二图片和所述第二图片对应的标注文件作为训练样本；
83.步骤s32、根据批量的第二图片和第二图片对应的标注文件，构建训练样本集；
84.步骤s33、根据所述训练样本集，训练异常检测模型。
85.本发明实施例可以收集大量的第一页面，并且对收集的第一页面自动执行步骤101至103，进而可以自动获取批量的第二图片以及第二图片对应的标注信息。
86.需要说明的是，本发明实施例对自动执行步骤101至103过程中修改第一页面css的具体方式不加以限制。在本发明的一个示例中，假设预设有n种异常类型，且收集了m个第一页面，n和m均为正整数。对这m个第一页面可以自动执行步骤101至103，例如，对于第i个第一页面(1≤i≤m)，可以从n种异常类型中依次选择1种对第i个第一页面的css进行修改，得到第i个第二页面。如选择第1种异常类型修改第1个第一面的css，得到第1个第二页面；选择第2种异常类型修改第2个第一页面的css，得到第2个第二页面；依次类推，直到m个第一页面修改完成，得到m个第二页面。
87.又如，还可以建立n个线程，每个线程对应一种异常类型。通过n个线程同时根据n种异常类型对n个第一页面的css进行修改，进而可以同时生成对应n种异常类型的第二页面，直到m个第一页面修改完成，得到m个第二页面。
88.需要说明的是，本发明实施例中均以在第一页面中确定一个目标元素，以及将这一个目标元素修改为某预设异常类型的异常元素为例。在实际应用中，本发明实施例对第一页面中需要修改的目标元素的数量不加以限制，以及对某个目标元素修改的预设异常类型的种类和数量均不加以限制。
89.在本发明的一个示例中，对于第一页面a1，假设确定其中的目标元素为元素div1，以及确定待修改的异常类型为文字重叠。对第一页面a1的css中的div1的样式属性值进行修改，使得div1修改为文字重叠的异常元素，得到第二页面a2，则a2中包括一个异常元素，该异常元素的异常类型为文字重叠。
90.在本发明的另一个示例中，对于第一页面a，假设确定其中的目标元素包括元素div1和div2，以及确定待修改的异常类型为文字重叠。对第一页面a的css中的div1和div2的样式属性值进行修改，使得div1和div2修改为文字重叠的异常元素，得到第二页面a3，则a3中包括两个异常元素，这两个异常元素的异常类型均为文字重叠。
91.在本发明的又一个示例中，对于第一页面a，假设确定其中的目标元素包括元素div1和div2，以及确定待修改的异常类型为文字重叠和异常折行。对第一页面a的css中的div1和div2的样式属性值进行修改，使得div1修改为文字重叠的异常元素，以及div2修改为异常折行的异常元素，得到第二页面a4，则a4中包括两个异常元素，这两个异常元素的异常类型分别为文字重叠和异常折行。
92.每次根据预设的异常类型自动修改某个第一页面的css得到第二页面之后，即可自动对该第一页面对应的第一图片和该第二页面对应的第二图片进行匹配，确定该第二页面中异常元素的位置信息，进而可以将该异常元素对应的异常类型和位置信息作为该第二图片的标注信息，自动写入预置文件。由此，本发明实施例可以自动获取批量的第二图片以及第二图片对应的标注信息，进而可以构建训练样本集，并训练异常检测模型。该训练样本集中的每一条训练样本包括一个第二图片以及该第二图片对应的标注信息，该标注信息可以为json文件或xml文件，其中记录有该第二图片中异常元素对应的异常类型和位置信息。
93.所述异常检测模型可以为根据大量的训练样本和机器学习方法，对现有的神经网络进行有监督训练而得到的。需要说明的是，本发明实施例对所述异常检测模型的模型结构以及训练方法不加以限制。所述异常检测模型可以是融合了多种神经网络的分类模型。所述神经网络包括但不限于以下的至少一种或者至少两种的组合、叠加、嵌套：cnn(convolutional neural network，卷积神经网络)、lstm(long short-term memory，长短时记忆)网络、rnn(simple recurrent neural network，循环神经网络)、注意力神经网络等。在本发明的一种可选实施例中，所述异常检测模型可以包括基于yolo的神经网络模型。
94.首先，本发明实施例可以基于yolo模型结构，构建并初始化异常检测模型，设置初始模型的模型参数；然后，将训练样本逐个输入所述初始模型，根据初始模型的输出结果与训练样本中的标注信息之间的差异，以及梯度下降算法对该初始模型进行迭代优化，调整模型参数，直到优化的模型达到预设条件时，停止迭代优化，将最后一次优化得到的模型作为训练完成的异常检测模型。
95.需要说明的是，本发明实施例对yolo模型的类型不加以限制。例如，可以使用yolov1、yolov2、yolov3中的任意一种。优选的，本发明实施例使用yolov3的模型结构。yolov3是yolo系列目标检测算法中的第三版，相比之前的算法，在针对小目标的检测场景，精度有显著提升。
96.需要说明的是，在本发明实施例中，可以构建单一异常类型的训练样本集，训练用于检测某一种ui异常类型的异常检测模型。例如，可以构建由字体重叠的异常类型的训练样本组成的训练样本集，根据该训练样本集训练的异常检测模型可用于检测页面中的字体重叠的ui异常。或者，可以构建由异常折行的异常类型的训练样本组成的训练样本集，根据该训练样本集训练的异常检测模型可用于检测页面中的异常折行的ui异常等。
97.或者，本发明实施例还可以构建包括多种异常类型的训练样本集，训练用于检测多种异常类型的异常检测模型。例如，构建的训练样本集中包括5种异常类型，则训练得到的异常检测模型可以输出异常元素分别对应这5种异常类型的概率值，以及每种异常类型的异常元素对应的位置信息。
98.在本发明的一种可选实施例中，在使用训练样本集训练异常检测模型之前，还可以对训练样本集中的第二图片进行预处理。所述预处理可以包括二值化处理，二值化处理可以将图像中的像素点的灰度值设置为0或255，也就是将整个图像呈现出明显的黑白效果的过程。通过二值化处理可以极大地减少图像中的数据量，从而可以凸显出第二图片中各元素的轮廓。根据预处理之后的训练样本集训练异常检测模型，可以进一步提高异常检测模型识别的准确率。
99.在本发明的一种可选实施例中，步骤105通过所述异常检测模型，对实时获取的页
面图片进行异常检测，具体可以包括：
100.步骤s41、实时获取待检测页面；
101.步骤s42、对所述待检测页面进行截图，得到所述待检测页面对应的页面图片；
102.步骤s43、将所述页面图片输入已训练的异常检测模型，通过所述异常检测模型输出所述页面图片中异常元素对应的异常类型和位置信息。
103.在训练得到异常检测模型之后，可以使用已训练的异常检测模型检测页面中是否存在ui异常，如果存在ui异常，异常检测模型可以输出存在ui异常的异常元素对应的异常类型以及该异常元素在页面中的位置。
104.具体地，可以实时获取待检测页面，对该待检测页面进行截图，得到该待检测页面对应的页面图片；将该页面图片输入已训练的异常检测模型，即可通过该异常检测模型输出该页面图片中异常元素对应的ui异常的异常类型和位置信息。
105.可选地，本发明实施例在使用异常检测模型对页面进行在线实时检测之后，可以收集异常检测结果。所述异常检测结果中包括检测出的包含ui异常的异常页面，以及该异常页面中异常元素对应的异常类型和位置信息，进而可以将该异常检测结果作为训练样本，用于继续训练所述异常检测模型，以对所述异常检测模型不断进行优化。
106.综上，本发明实施例根据预设的异常类型，对无ui异常的第一页面的css进行修改，得到有ui异常的第二页面；并且将第一页面对应的第一图片和第二页面对应的第二图片进行匹配，可以确定第二图片中异常元素的位置信息。基于上述修改过程，辅以自动化流程可以形成批量的训练样本。其中，每一个训练样本可以包括一个第二图片，以及该第二图片的标注信息，该标注信息中包括该第二图片中异常元素对应的异常类型和位置信息。通过批量的训练样本，可以训练得到异常检测模型，进而可以通过该异常检测模型，对实时获取的页面图片进行异常检测。
107.本发明实施例在构建训练样本的过程中，根据预先分析总结得到的预设异常类型，对真实页面的css进行修改，得到包含预设异常类型的异常元素的第二页面。在此基础上构建训练样本，使得构建的训练样本更加符合真实场景，进而可以提高异常检测模型识别ui异常的准确率。
108.此外，本发明实施例构建训练样本的过程可以通过自动化流程实现，并且根据大量的训练样本训练得到的异常检测模型，可以在训练过程中不断提高识别的精准度，训练完成后使用该异常检测模型可以自动检测页面中的ui异常，可以避免编写大量测试用例导致测试效率较低、以及测试用例覆盖不全面导致检测不够准确等问题，可以提高页面ui异常检测的效率和准确率。
109.需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明实施例并不受所描述的动作顺序的限制，因为依据本发明实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本发明实施例所必须的。
110.装置实施例
111.参照图2，示出了本发明的一种页面检测装置实施例的结构框图，所述装置具体可以包括：
112.样式修改模块201，用于根据预设的异常类型，修改第一页面的层叠样式表css，得到包含异常元素的第二页面；
113.位置确定模块202，用于对所述第一页面对应的第一图片和所述第二页面对应的第二图片进行匹配，确定所述异常元素在所述第二图片中的位置信息；
114.标注生成模块203，用于根据所述异常元素对应的异常类型和位置信息，生成所述第二图片对应的标注信息；
115.模型训练模块204，用于根据批量的第二图片以及第二图片对应的标注信息，训练异常检测模型；
116.在线检测模块205，用于通过所述异常检测模型，对实时获取的页面图片进行异常检测。
117.可选地，所述样式修改模块201，具体可以包括：
118.目标确定子模块，用于在所述第一页面的css中随机确定目标元素；
119.目标修改子模块，用于根据所述预设的异常类型，修改所述目标元素的样式属性值，将所述目标元素修改为所述异常类型的异常元素，得到第二页面。
120.可选地，所述位置确定模块202，具体可以包括：
121.边缘检测子模块，用于采用边缘检测技术，分别识别出所述第一图片和所述第二图片中的结构化元素；
122.元素匹配子模块，用于对所述第一图片和所述第二图片中的结构化元素进行逐一比对，确定第二图片与第一图片中相应位置的不匹配的结构化元素为异常元素；
123.模板匹配子模块，用于将所述异常元素对应的区域图像与所述第二图片进行匹配，确定所述异常元素在所述第二图片中的位置信息。
124.可选地，所述装置还可以包括：
125.失败图片确定模块，用于若确定所述第二图片中的结构化元素与所述第一图片中的结构化元素全部匹配，或者，若确定所述第二图片中与所述第一图片中不匹配的结构化元素的个数超过预设数值，则确定所述第二图片为失败图片。
126.可选地，所述标注生成模块203，具体用于将所述异常元素对应的异常类型和位置信息写入预置文件，生成所述第二图片对应的标注文件。
127.可选地，所述模型训练模块204，具体可以包括：
128.样本确定子模块，用于将所述第二图片和所述第二图片对应的标注文件作为训练样本；
129.集合构建子模块，用于根据批量的第二图片和第二图片对应的标注文件，构建训练样本集；
130.模型训练子模块，用于根据所述训练样本集，训练异常检测模型。
131.可选地，所述模型训练模块205，具体可以包括：
132.页面获取子模块，用于实时获取待检测页面；
133.图片获取子模块，用于对所述待检测页面进行截图，得到所述待检测页面对应的页面图片；
134.模型检测子模块，用于将所述页面图片输入已训练的异常检测模型，通过所述异常检测模型输出所述页面图片中异常元素对应的异常类型和位置信息。
135.可选地，所述异常检测模型包括基于yolo的神经网络模型。
136.可选地，所述预设的异常类型至少包括如下任意一种：字体重叠、异常折行、以及异常遮盖。
137.对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
138.本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。
139.关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。
140.本发明实施例提供了一种用于页面检测的装置，包括有存储器，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器执行所述一个或者一个以上程序包含用于进行以下操作的指令：根据预设的异常类型，修改第一页面的层叠样式表css，得到包含异常元素的第二页面；对所述第一页面对应的第一图片和所述第二页面对应的第二图片进行匹配，确定所述异常元素在所述第二图片中的位置信息；根据所述异常元素对应的异常类型和位置信息，生成所述第二图片对应的标注信息；根据批量的第二图片以及第二图片对应的标注信息，训练异常检测模型；通过所述异常检测模型，对实时获取的页面图片进行异常检测。
141.图3是根据一示例性实施例示出的一种用于页面检测的装置800的框图。例如，装置800可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。
142.参照图3，装置800可以包括以下一个或多个组件：处理组件802，存储器804，电源组件806，多媒体组件808，音频组件810，输入/输出(i/o)的接口812，传感器组件814，以及通信组件816。
143.处理组件802通常控制装置800的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理元件802可以包括一个或多个处理器820来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件802可以包括一个或多个模块，便于处理组件802和其他组件之间的交互。例如，处理组件802可以包括多媒体模块，以方便多媒体组件808和处理组件802之间的交互。
144.存储器804被配置为存储各种类型的数据以支持在设备800的操作。这些数据的示例包括用于在装置800上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器804可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(sram)，电可擦除可编程只读存储器(eeprom)，可擦除可编程只读存储器(eprom)，可编程只读存储器(prom)，只读存储器(rom)，磁存储器，快闪存储器，磁盘或光盘。
145.电源组件806为装置800的各种组件提供电力。电源组件806可以包括电源管理系统，一个或多个电源，及其他与为装置800生成、管理和分配电力相关联的组件。
146.多媒体组件808包括在所述装置800和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(lcd)和触摸面板(tp)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感
器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件808包括一个前置摄像头和/或后置摄像头。当设备800处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。
147.音频组件810被配置为输出和/或输入音频信号。例如，音频组件810包括一个麦克风(mic)，当装置800处于操作模式，如呼叫模式、记录模式和语音信息处理模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器804或经由通信组件816发送。在一些实施例中，音频组件810还包括一个扬声器，用于输出音频信号。
148.i/o接口812为处理组件802和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。
149.传感器组件814包括一个或多个传感器，用于为装置800提供各个方面的状态评估。例如，传感器组件814可以检测到设备800的打开/关闭状态，组件的相对定位，例如所述组件为装置800的显示器和小键盘，传感器组件814还可以页面检测装置800或装置800一个组件的位置改变，用户与装置800接触的存在或不存在，装置800方位或加速/减速和装置800的温度变化。传感器组件814可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件814还可以包括光传感器，如cmos或ccd图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件814还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。
150.通信组件816被配置为便于装置800和其他设备之间有线或无线方式的通信。装置800可以接入基于通信标准的无线网络，如wifi，2g或3g，或它们的组合。在一个示例性实施例中，通信组件816经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件816还包括近场通信(nfc)模块，以促进短程通信。例如，在nfc模块可基于射频信息处理(rfid)技术，红外数据协会(irda)技术，超宽带(uwb)技术，蓝牙(bt)技术和其他技术来实现。
151.在示例性实施例中，装置800可以被一个或多个应用专用集成电路(asic)、数字信号处理器(dsp)、数字信号处理设备(dspd)、可编程逻辑器件(pld)、现场可编程门阵列(fpga)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。
152.在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器804，上述指令可由装置800的处理器820执行以完成上述方法。例如，所述非临时性计算机可读存储介质可以是rom、随机存取存储器(ram)、cd-rom、磁带、软盘和光数据存储设备等。
153.图4是本发明的一些实施例中服务器的结构示意图。该服务器1900可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上中央处理器(central processing units，cpu)1922(例如，一个或一个以上处理器)和存储器1932，一个或一个以上存储应用程序1942或数据1944的存储介质1930(例如一个或一个以上海量存储设备)。其中，存储器1932和存储介质1930可以是短暂存储或持久存储。存储在存储介质1930的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对服务器中的一系列指令操作。更进
一步地，中央处理器1922可以设置为与存储介质1930通信，在服务器1900上执行存储介质1930中的一系列指令操作。
154.服务器1900还可以包括一个或一个以上电源1926，一个或一个以上有线或无线网络接口1950，一个或一个以上输入输出接口1958，一个或一个以上键盘1956，和/或，一个或一个以上操作系统1941，例如windows servertm，mac os xtm，unixtm,linuxtm，freebsdtm等等。
155.一种非临时性计算机可读存储介质，当所述存储介质中的指令由装置(服务器或者终端)的处理器执行时，使得装置能够执行图1所示的页面检测方法。
156.一种非临时性计算机可读存储介质，当所述存储介质中的指令由装置(服务器或者终端)的处理器执行时，使得装置能够执行一种页面检测方法，所述方法包括：根据预设的异常类型，修改第一页面的层叠样式表css，得到包含异常元素的第二页面；对所述第一页面对应的第一图片和所述第二页面对应的第二图片进行匹配，确定所述异常元素在所述第二图片中的位置信息；根据所述异常元素对应的异常类型和位置信息，生成所述第二图片对应的标注信息；根据批量的第二图片以及第二图片对应的标注信息，训练异常检测模型；通过所述异常检测模型，对实时获取的页面图片进行异常检测。
157.本发明实施例公开了a1、一种页面检测方法，包括：
158.根据预设的异常类型，修改第一页面的层叠样式表css，得到包含异常元素的第二页面；
159.对所述第一页面对应的第一图片和所述第二页面对应的第二图片进行匹配，确定所述异常元素在所述第二图片中的位置信息；
160.根据所述异常元素对应的异常类型和位置信息，生成所述第二图片对应的标注信息；
161.根据批量的第二图片以及第二图片对应的标注信息，训练异常检测模型；
162.通过所述异常检测模型，对实时获取的页面图片进行异常检测。
163.a2、根据a1所述的方法，所述根据预设的异常类型，修改第一页面的层叠样式表css，得到包含异常元素的第二页面，包括：
164.在所述第一页面的css中随机确定目标元素；
165.根据所述预设的异常类型，修改所述目标元素的样式属性值，将所述目标元素修改为所述异常类型的异常元素，得到第二页面。
166.a3、根据a1所述的方法，所述对所述第一页面对应的第一图片和所述第二页面对应的第二图片进行匹配，确定所述异常元素在所述第二图片中的位置信息，包括：
167.采用边缘检测技术，分别识别出所述第一图片和所述第二图片中的结构化元素；
168.对所述第一图片和所述第二图片中的结构化元素进行逐一比对，确定第二图片与第一图片中相应位置的不匹配的结构化元素为异常元素；
169.将所述异常元素对应的区域图像与所述第二图片进行匹配，确定所述异常元素在所述第二图片中的位置信息。
170.a4、根据a3所述的方法，所述对所述第一图片和所述第二图片中的结构化元素进行逐一比对之后，所述方法还包括：
171.若确定所述第二图片中的结构化元素与所述第一图片中的结构化元素全部匹配，
或者，若确定所述第二图片中与所述第一图片中不匹配的结构化元素的个数超过预设数值，则确定所述第二图片为失败图片。
172.a5、根据a1所述的方法，所述根据所述异常元素对应的异常类型和位置信息，生成所述第二图片对应的标注信息，包括：
173.将所述异常元素对应的异常类型和位置信息写入预置文件，生成所述第二图片对应的标注文件。
174.a6、根据a5所述的方法，所述根据批量的第二图片以及第二图片对应的标注信息，训练异常检测模型，包括：
175.将所述第二图片和所述第二图片对应的标注文件作为训练样本；
176.根据批量的第二图片和第二图片对应的标注文件，构建训练样本集；
177.根据所述训练样本集，训练异常检测模型。
178.a7、根据a1所述的方法，所述通过所述异常检测模型，对实时获取的页面图片进行异常检测，包括：
179.实时获取待检测页面；
180.对所述待检测页面进行截图，得到所述待检测页面对应的页面图片；
181.将所述页面图片输入已训练的异常检测模型，通过所述异常检测模型输出所述页面图片中异常元素对应的异常类型和位置信息。
182.a8、根据a1至a7任一所述的方法，所述预设的异常类型至少包括如下任意一种：字体重叠、异常折行、以及异常遮盖。
183.本发明实施例公开了b9、一种页面检测装置，包括：
184.样式修改模块，用于根据预设的异常类型，修改第一页面的层叠样式表css，得到包含异常元素的第二页面；
185.位置确定模块，用于对所述第一页面对应的第一图片和所述第二页面对应的第二图片进行匹配，确定所述异常元素在所述第二图片中的位置信息；
186.标注生成模块，用于根据所述异常元素对应的异常类型和位置信息，生成所述第二图片对应的标注信息；
187.模型训练模块，用于根据批量的第二图片以及第二图片对应的标注信息，训练异常检测模型；
188.在线检测模块，用于通过所述异常检测模型，对实时获取的页面图片进行异常检测。
189.b10、根据b9所述的装置，所述样式修改模块，包括：
190.目标确定子模块，用于在所述第一页面的css中随机确定目标元素；
191.目标修改子模块，用于根据所述预设的异常类型，修改所述目标元素的样式属性值，将所述目标元素修改为所述异常类型的异常元素，得到第二页面。
192.b11、根据b9所述的装置，所述位置确定模块，包括：
193.边缘检测子模块，用于采用边缘检测技术，分别识别出所述第一图片和所述第二图片中的结构化元素；
194.元素匹配子模块，用于对所述第一图片和所述第二图片中的结构化元素进行逐一比对，确定第二图片与第一图片中相应位置的不匹配的结构化元素为异常元素；
195.模板匹配子模块，用于将所述异常元素对应的区域图像与所述第二图片进行匹配，确定所述异常元素在所述第二图片中的位置信息。
196.b12、根据b11所述的装置，所述装置还包括：
197.失败图片确定模块，用于若确定所述第二图片中的结构化元素与所述第一图片中的结构化元素全部匹配，或者，若确定所述第二图片中与所述第一图片中不匹配的结构化元素的个数超过预设数值，则确定所述第二图片为失败图片。
198.b13、根据b9所述的装置，所述标注生成模块，具体用于将所述异常元素对应的异常类型和位置信息写入预置文件，生成所述第二图片对应的标注文件。
199.b14、根据b13所述的装置，所述模型训练模块，包括：
200.样本确定子模块，用于将所述第二图片和所述第二图片对应的标注文件作为训练样本；
201.集合构建子模块，用于根据批量的第二图片和第二图片对应的标注文件，构建训练样本集；
202.模型训练子模块，用于根据所述训练样本集，训练异常检测模型。
203.b15、根据b9所述的装置，所述模型训练模块，包括：
204.页面获取子模块，用于实时获取待检测页面；
205.图片获取子模块，用于对所述待检测页面进行截图，得到所述待检测页面对应的页面图片；
206.模型检测子模块，用于将所述页面图片输入已训练的异常检测模型，通过所述异常检测模型输出所述页面图片中异常元素对应的异常类型和位置信息。
207.b16、根据b9至b15任一所述的装置，所述预设的异常类型至少包括如下任意一种：字体重叠、异常折行、以及异常遮盖。
208.本发明实施例公开了c17、一种用于页面检测的装置，包括有存储器，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器执行所述一个或者一个以上程序包含用于进行以下操作的指令：
209.根据预设的异常类型，修改第一页面的层叠样式表css，得到包含异常元素的第二页面；
210.对所述第一页面对应的第一图片和所述第二页面对应的第二图片进行匹配，确定所述异常元素在所述第二图片中的位置信息；
211.根据所述异常元素对应的异常类型和位置信息，生成所述第二图片对应的标注信息；
212.根据批量的第二图片以及第二图片对应的标注信息，训练异常检测模型；
213.通过所述异常检测模型，对实时获取的页面图片进行异常检测。
214.c18、根据c17所述的装置，所述根据预设的异常类型，修改第一页面的层叠样式表css，得到包含异常元素的第二页面，包括：
215.在所述第一页面的css中随机确定目标元素；
216.根据所述预设的异常类型，修改所述目标元素的样式属性值，将所述目标元素修改为所述异常类型的异常元素，得到第二页面。
217.c19、根据c17所述的装置，所述对所述第一页面对应的第一图片和所述第二页面
对应的第二图片进行匹配，确定所述异常元素在所述第二图片中的位置信息，包括：
218.采用边缘检测技术，分别识别出所述第一图片和所述第二图片中的结构化元素；
219.对所述第一图片和所述第二图片中的结构化元素进行逐一比对，确定第二图片与第一图片中相应位置的不匹配的结构化元素为异常元素；
220.将所述异常元素对应的区域图像与所述第二图片进行匹配，确定所述异常元素在所述第二图片中的位置信息。
221.c20、根据c19所述的装置，所述装置还经配置以由一个或者一个以上处理器执行所述一个或者一个以上程序包含用于进行以下操作的指令：
222.若确定所述第二图片中的结构化元素与所述第一图片中的结构化元素全部匹配，或者，若确定所述第二图片中与所述第一图片中不匹配的结构化元素的个数超过预设数值，则确定所述第二图片为失败图片。
223.c21、根据c17所述的装置，所述根据所述异常元素对应的异常类型和位置信息，生成所述第二图片对应的标注信息，包括：
224.将所述异常元素对应的异常类型和位置信息写入预置文件，生成所述第二图片对应的标注文件。
225.c22、根据c21所述的装置，所述根据批量的第二图片以及第二图片对应的标注信息，训练异常检测模型，包括：
226.将所述第二图片和所述第二图片对应的标注文件作为训练样本；
227.根据批量的第二图片和第二图片对应的标注文件，构建训练样本集；
228.根据所述训练样本集，训练异常检测模型。
229.c23、根据c17所述的装置，所述通过所述异常检测模型，对实时获取的页面图片进行异常检测，包括：
230.实时获取待检测页面；
231.对所述待检测页面进行截图，得到所述待检测页面对应的页面图片；
232.将所述页面图片输入已训练的异常检测模型，通过所述异常检测模型输出所述页面图片中异常元素对应的异常类型和位置信息。
233.c24、根据c17至c23任一所述的装置，所述预设的异常类型至少包括如下任意一种：字体重叠、异常折行、以及异常遮盖。
234.本发明实施例公开了d25、一种机器可读介质，其上存储有指令，当由一个或多个处理器执行时，使得装置执行如a1至a8中一个或多个所述的页面检测方法。
235.本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本发明的其它实施方案。本发明旨在涵盖本发明的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本发明的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本发明的真正范围和精神由下面的权利要求指出。
236.应当理解的是，本发明并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本发明的范围仅由所附的权利要求来限制。
237.以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
238.以上对本发明所提供的一种页面检测方法、一种页面检测装置和一种用于页面检测的装置，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。