页面异常显示的检测方法、终端设备及存储介质与流程

本申请涉及计算机技术领域，尤其涉及一种页面异常显示的检测方法、终端设备及存储介质。

背景技术：

随着互联网技术的发展普及，互联网网页不仅包含了人们多需要的各种信息，同时还是互联网的用户接口(userinterface，ui)。网页的视觉感知影响着网页的用户体验，诸如页面显示异常等ui典型问题严重影响用户体验。一般而言，开发一款web系统，一般我们都需要兼容很多主流的浏览器，如chrome、ie、firefox等，ie又有9、10、11等众多版本。如果客户有特定的使用习惯，还要根据客户的习惯去兼容一些其他的浏览器，比如360浏览器、qq浏览器等，平均一套web系统开发交付，可能要兼容5种以上浏览器，再加上显示器分辨率的兼容，以此计算，基本每个页面都需要检查6次以上。但是根据实际情况，在产品交付时间内，测试功能的同时要测试多种兼容性，如果多投入测试人员，会导致成本上升，如果针对兼容性的页面检测不全面，产品质量难以保证，导致应用时易发生页面显示异常。

技术实现要素：

本申请实施例提供一种页面异常显示的检测方法、终端设备及存储介质，可以更全面快速地检测页面显示异常问题，以保障浏览器兼容性。

第一方面，本申请实施例提供了一种页面异常显示的检测方法，所述方法包括：

在待检测页面中不包含异常特征图标的情况下，提取所述待检测页面中的图标，所述异常特征图标为页面显示异常时出现的图标；

确定是否能在图标数据库中查找到所述待检测页面中的每个图标；

判断所述待检测页面中是否含有异常字符；

若所述待检测页面含有所述异常字符，或者所述待检测页面中各图标不均与所述图标数据库中的图标匹配，确定所述待检测页面显示异常，生成所述待检测页面的异常信息。

作为一种可能的实施方式，所述确定是否能在图标数据库中查找到所述待检测页面中的每个图标包括：

获取所述待检测页面中的每个图标和所述图标数据库中的每个图标的特征向量；

根据所述待检测页面中的图标的特征向量和所述图标数据库中图标的特征向量的欧式距离，对所述待检测页面中的每个图标和所述图标数据库中的每个图标进行比对，若所述欧式距离均小于距离阈值，确定能在所述图标数据库中查找到所述待检测页面中的每个图标。

作为一种可能的实施方式，所述判断所述待检测页面中各图标是否均与图标数据库中的图标匹配还包括：

若所述待检测页面中各图标的颜色不全属于所述图标数据库对应的颜色集合，则确定不能在所述图标数据库中查找到所述待检测页面中的每个图标；

或者，若所述待检测页面中各图标的形状不全属于所述图标数据库对应的形状集合，则确定不能在所述图标数据库中查找到所述待检测页面中的每个图标。

作为一种可能的实施方式，所述提取所述待检测页面中的图标包括：

获取所述待检测页面的颜色直方图，根据所述颜色直方图分割所述待检测页面的页面背景和所述图标，获得所述待检测页面中的图标；

或者，利用抠图技术提取所述待检测页面中的图标。

作为一种可能的实施方式，所述判断所述待检测页面中是否含有异常字符包括：

识别所述待检测页面中的连续字符区域，提取所述连续字符区域中的多个单字符；

判断所述多个单字符中是否存在与其他字符大小不同的单字符；

若存在，确定所述待检测页面中含有所述异常字符，若不存在，确定所述待检测页面中不含有所述异常字符。

作为一种可能的实施方式，所述判断所述多个单字符中是否存在与其他字符大小不同的单字符包括：

获取所述多个单字符中每个单字符的高度和宽度，判断是否存在高度与所述多个单字符的高度平均值的比值不在第一阈值范围内，或者宽度与所述多个单字符的宽度平均值的比值不在第二阈值范围内的单字符。

作为一种可能的实施方式，所述方法还包括：

调用页面检测程序对所述待检测页面进行检测，确定所述待检测页面是否显示异常，所述页面检测程序由网络模型训练获得；

所述页面检测程序的训练方法包括：

获取多组待训练数据，所述多组待训练数据中每组待训练数据包含样本页面和所述样本页面的异常检测结果，所述异常检测结果包括显示异常或者显示正常；

将所述每组待训练数据输入初始模型以获得预测结果；将所述预测结果与所述异常检测结果进行比对，获得所述样本页面对应的预测偏差；

基于所述多组待训练数据的样本页面对应的预测偏差进行反向传播，获得所述页面检测程序。

第二方面，本申请实施例提供了一种终端设备，包括：提取模块、第一判断模块、第二判断模块、检测模块和生成模块，其中：

所述提取模块，用于在待检测页面中不包含异常特征图标的情况下，提取所述待检测页面中的图标，所述异常特征图标为页面显示异常时出现的图标；

所述第一判断模块，用于确定是否能在图标数据库中查找到所述待检测页面中的每个图标；

所述第二判断模块，用于判断所述待检测页面中是否含有异常字符；

所述检测模块，用于若所述待检测页面含有所述异常字符，或者所述待检测页面中各图标不均与所述图标数据库中的图标匹配，确定所述待检测页面显示异常；

所述生成模块，用于生成所述待检测页面的异常信息。

第三方面，本申请实施例还提供了一种终端设备，包括处理器、输入设备、输出设备和存储器，所述处理器、输入设备、输出设备和存储器相互连接，其中，所述存储器用于存储计算机程序，所述计算机程序包括程序指令，所述处理器被配置用于调用所述程序指令，执行如第一方面及其任一种可能的实施方式所述的方法。

第四方面，本申请实施例提供了一种计算机存储介质，所述计算机存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被处理器执行时使所述处理器执行上述第一方面及其任一种可能的实施方式的方法。

本申请实施例通过在待检测页面中不包含异常特征图标的情况下，提取所述待检测页面中的图标，所述异常特征图标为页面显示异常时出现的图标；确定是否能在图标数据库中查找到所述待检测页面中的每个图标；判断所述待检测页面中是否含有异常字符；若所述待检测页面含有所述异常字符，或者所述待检测页面中各图标不均与所述图标数据库中的图标匹配，确定所述待检测页面显示异常，生成所述待检测页面的异常信息，更快速全面实现页面显示异常检测，降低人工成本，以及通过检测异常信息可以反映系统对各浏览器的兼容性，便于进一步的改进维护，以降低或避免浏览器的页面显示异常情况，即提高了系统对于各浏览器的兼容性。

附图说明

为了更清楚地说明本申请实施例技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍。

图1是本申请实施例提供的一种页面异常显示的检测方法的流程示意图；

图2是本申请实施例提供的一种待检测页面的图标示意图；

图3是本申请另一实施例提供的一种页面异常显示的检测方法的流程示意图；

图4是本申请实施例提供的一种终端设备的结构示意图；

图5是本申请实施例提供的另一种终端设备的结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。此外，术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其他步骤或单元。

还应当理解，在此本申请说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本申请。如在本申请说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。

还应当进一步理解，在本申请说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。

如在本说明书和所附权利要求书中所使用的那样，术语“如果”可以依据上下文被解释为“当...时”或“一旦”或“响应于确定”或“响应于检测到”。类似地，短语“如果确定”或“如果检测到[所描述条件或事件]”可以依据上下文被解释为意指“一旦确定”或“响应于确定”或“一旦检测到[所描述条件或事件]”或“响应于检测到[所描述条件或事件]”。

为了能够更好地理解本申请实施例，下面将对应用本申请实施例的方法进行介绍。

本申请实施例中提到的终端设备是可以与服务器进行通信的设备，本申请实施例中的服务器也称伺服器，是提供计算服务的设备，可以允许多个终端设备进行访问。上述终端设备包括但不限于台式计算机、移动终端，上述移动终端可包括各种具有无线通信功能的手持设备、可穿戴设备、计算设备或连接到无线调制解调器的其他处理设备，以及各种形式的用户设备(userequipment，ue)，移动台(mobilestation，ms)等等。

请参见图1，是本申请实施例提供的一种页面异常显示的检测方法的示意流程图，如图1所示该方法可包括：

101、在待检测页面中不包含异常特征图标的情况下，提取上述待检测页面中的图标，上述异常特征图标为页面显示异常时出现的图标。

本申请实施例中的执行主体可以为上述终端设备。

具体的，可以启动多种预设类型的浏览器，每个浏览器自动遍历界面(页面)上的每个入口，以获得上述待检测页面。其中，上述待检测页面可以为待检测网站的主页页面，其主页页面的统一资源定位符(uniformresourcelocator，url)是写在其配置文件里面的。在www上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫url，它是www的统一资源定位标志，就是指网络地址。

在超文本标记语言(hypertextmarkuplanguage，html)中，a标签就是<a></a>或者大写字母a，其中的a是anchor的缩写。这些标签的作用是标明超链接的起始位置或目的位置。

本申请实施例中，上述url里面又会包含多个a标签，点击每个a标签，可以打开一个网页，这个网页的url可能是新的，也可能是之前出现过的，之前出现过的可以不再进行检测，然后这样遍历下去直到没有新的url，确定遍历完全。

本申请实施例中的图标包括用户界面(userinterface，ui)图标，可以是应用程序的应用图标或者网页中的任意图像标识，本申请实施例对此不作限制。上述异常特征图标可以理解为页面显示异常时出现的图标。具体的，上述预设类型的浏览器可以为市面上主流的浏览器，包括但不限于chrome、ie、firefox、ie(9、10、11)、360浏览器、qq浏览器等，本申请实施例对此不做限制。可以通过图像识别技术识别上述待检测页面，提取其中的图标。

在一种可选的实施方式中，上述异常特征图标可以为小红叉图标、惊叹号图标、errordisplay等等，本申请实施例对此不做限制。

若确定上述待检测页面中包含异常特征图标，表示页面显示异常，可以执行步骤105。

在待检测页面中不包含异常特征图标的情况下，可以提取上述待检测页面中的图标。

可选的，可以利用抠图算法将待检测页面中的图标提取出来，比如利用imagematting算法将上述待检测页面中的图标从上述待检测页面中提取出来。抠图只将图片分成前景和背景两块，目的是拿到前景，好的抠图算法会对于头发等细节的处理效果比较精确。分割和抠图的另一个重要区别是分割是返回像素分类结果，分类结果是整型；而抠图返回的是属于前景或背景的概率p，在前景与背景交互区域会产生渐变的效果，使得抠图更加自然。

在一种可选的实施方式中，可以获取待检测页面的颜色直方图，根据颜色直方图区分待检测页面的背景和图标。

本申请实施例中提到的颜色直方图是在许多图像检索系统中被广泛采用的颜色特征。它所描述的是不同色彩在整幅图像中所占的比例，而并不关心每种色彩所处的空间位置，即无法描述图像中的对象或物体。颜色直方图特别适于描述难以进行自动分割的图像。可以参见图2，图2为一种待检测页面的图标示意图，是终端设备显示页面中的部分区域，其中包括日历、设置等8个应用软件的图标。从图2中可以看出ui图标的颜色一般和背景颜色(深度)区别较大，因此基于颜色直方图可以区分出图标边缘，从而将ui图标从页面图像中分出来。

在一种可选的实施方式中，可以利用opencv提取上述待检测页面中预设类型的图标。

本申请实施例中提到的opencv是一个基于bsd许可(开源)发行的跨平台计算机视觉库，可以运行在linux、windows、android和macos操作系统上。它轻量级而且高效——由一系列c函数和少量c++类构成，同时提供了python、ruby、matlab等语言的接口，实现了图像处理和计算机视觉方面的很多通用算法。

具体来讲，比如可以通过opencv比对分离一些后缀名为ico的图标。在该种方法中，需要和网站开发者进行提前达成一致设定，以获得预设类型为ico的图标：图标命名以ico结尾，背景图片命名以bg结尾，logo命名以logo结尾。可以通过模拟http请求，获取网页的html源码，对于源码中的img标签，如果包含类似于xxx_ico.png的图片，就是要分离的图标；如果是包含类似于xxx_bg.png的图片就是背景图片。

在提取上述待检测页面中的图标之后可以执行步骤102。

102、确定是否能在图标数据库中查找到上述待检测页面中的每个图标。

本申请实施例中对待检测页面中各图标的检测是为了确认是否显示有异常图标，可以理解为在上述待检测页面中未正常显示的图标，包括上述异常特征图标，或者说在页面显示检测中不符合预设条件的图标。

本申请实施例中可以设置上述图标数据库，其中，上述图标数据库中可包括一个或者多个符合预设条件的图标，上述图标可以由ui设计人员或系统设计人员上传。

可以利用图像识别技术将上述待检测页面中各图标与图标数据库中的图标进行比对，确认是否为图标数据库中包含的图标。

具体的，上述步骤102可以包括：

确定上述待检测页面中各图标的颜色是否属于上述图标数据库对应的颜色集合，不属于上述图标数据库对应的颜色集合的图标为上述异常图标。即若上述待检测页面中各图标的颜色不全属于上述图标数据库对应的颜色集合，则确定上述待检测页面中各图标不均与上述图标数据库中的图标匹配。

可选的，可以确定上述待检测页面中各图标的形状是否属于上述图标数据库对应的形状集合，不属于上述图标数据库对应的形状集合的图标为上述异常图标。若即上述待检测页面中各图标的形状不全属于上述图标数据库对应的形状集合，则确定不能在图标数据库中查找到待检测页面中的每个图标。

本申请实施例中可以检测出在当前页面中颜色突兀的图标，或者在当前页面中形状突兀的图标，以初步确定是否存在图标异常显示。

在一种可选的实施方式中，上述步骤102还可以包括：

获取上述待检测页面中的每个图标和上述图标数据库中的每个图标的特征向量；

根据上述待检测页面中的图标的特征向量和上述图标数据库中图标的特征向量的欧式距离，对上述待检测页面中的每个图标和上述图标数据库中的每个图标进行比对，若上述欧式距离均小于距离阈值，确定能在上述图标数据库中查找到上述待检测页面中的每个图标。

具体的，可以利用尺度不变特征变换(scale-invariantfeaturetransform，sift)的特征提取技术，将分离出的图标与图标数据库中的图标进行比对。sift是一种检测局部特征算法，该算法通过求一幅图中的特征点(interestpoints,orcornerpoints)及其有关scale和orientation的描述子得到特征并进行图像特征点匹配，获得了良好效果。sift特征不只具有尺度不变性，即使改变旋转角度，图像亮度或拍摄视角，仍然能够得到好的检测效果。

上述步骤具体可以包括：

生成图标(包括，提取的图标和图标数据库中的图标)的sift特征向量；

采用特征向量的欧式距离作为图标的相似性判定度量，确定是否能在图标数据库中查找到待检测页面中的每个图标。

比如，可以设置距离阈值，若上述特征向量的欧式距离小于距离阈值，则匹配。对所有提取的图标执行上述处理，以确定是否能在图标数据库中查找到待检测页面中的每个图标。若图标数据库中可以找到与全部提取的图标匹配的图标，即能在图标数据库中查找到待检测页面中的每个图标，表示待检测页面中的图标中不存在异常图标。可以执行步骤103。

若待检测页面中的图标中有不存在于图标数据库中的图标，确定待检测页面中的图标中存在异常图标，可以不执行步骤103，执行步骤105。

103、判断上述待检测页面中是否含有异常字符。

上述异常字符可以理解为在上述待检测页面中未正常显示的字符，或者说在页面显示检测中不符合预设条件的字符。

本申请实施例中可以识别上述待检测页面中的字符，判断字符是否出现异常显示。

在一种可选的实施方式中，上述步骤103可以包括：

识别上述待检测页面中的连续字符区域，提取上述连续字符区域中的多个单字符；

判断上述多个单字符中是否存在与其他字符大小不同的单字符；

若存在，确定上述待检测页面中含有上述异常字符，若不存在，确定上述待检测页面中不含有上述异常字符。

具体的，基于文字识别技术或者图像识别技术，可以识别出页面中的字符区域，上述连续字符区域可以理解为包括至少三个单字符的区域。在该待检测页面的连续字符串中，若某个字符大小与相邻的其他字符有明显的区别，可以确定该字符为异常字符。

在一种可选的实施方式中，上述判断上述多个单字符中是否存在与其他字符大小不同的单字符包括：

获取上述多个单字符中每个单字符的高度和宽度，判断是否存在高度与上述多个单字符的高度平均值的比值不在第一阈值范围内，或者宽度与上述多个单字符的宽度平均值的比值不在第二阈值范围内的单字符。

具体来讲，可以对上述连续字符区域进行预处理，进行边缘切割后获取单字符图像，计算并提取每个字符的高度(h)和宽度(w)，当字符的高度和宽度满足预设条件时，确定该字符显示正常，若全部单字符均满足上述预设条件，即确定上述待检测页面中不含有异常字符；若不满足预设条件，该字符显示异常，即确定上述待检测页面中含有异常字符。

可选的，上述预设条件则可以包含上述第一阈值范围和第二阈值范围，可以根据需要进行设置和修改，也可以设置其他参数进行判断，本申请实施例对此不做限制。若上述单字符中任意一个字符的高度与所有字符高度的平均值的比值在上述第一阈值范围内，同时任意一个字符的宽度与所有字符高度的平均值的比值在第二阈值范围内，则确定上述待检测页面中不含有上述异常字符，反之则为上述异常字符。

其中，上述步骤103和上述步骤103可以不分先后顺序执行。

在一种可选的实施方式中，可以调用页面检测程序对上述待检测页面进行检测，确定上述待检测页面是否显示异常。

若上述待检测页面不含有上述异常字符，并且上述待检测页面中各图标与上述图标数据库中的图标匹配，可以调用页面检测程序对上述待检测页面进行检测，确定上述待检测页面是否显示异常。

上述页面检测程序为训练后的用于页面显示异常检测的程序，根据训练学习的结果，可以进一步检测上述待检测页面是否有图标异常、字符(字体)异常等，以确定上述待检测页面是否显示异常。

104、若上述待检测页面含有上述异常字符，或者上述待检测页面中各图标不均与上述图标数据库中的图标匹配，确定上述待检测页面显示异常，生成上述待检测页面的异常信息。

若上述待检测页面含有上述异常字符，或者上述待检测页面中各图标不均与上述图标数据库中的图标匹配，可以确定上述待检测页面显示异常。可以生成上述待检测页面的异常信息，上述异常信息为该待检测页面中异常字符或者异常图标、异常特征图标的信息。

具体的，可以将上述异常信息上报到统计中心，同时发送邮件给相关的开发人员和测试人员，准确及时地知晓检测结果，并且可以依靠人工辅助确定是否显示异常。

本申请实施例通过在待检测页面中不包含异常特征图标的情况下，提取所述待检测页面中的图标，所述异常特征图标为页面显示异常时出现的图标；确定是否能在图标数据库中查找到所述待检测页面中的每个图标；判断所述待检测页面中是否含有异常字符；若所述待检测页面含有所述异常字符，或者所述待检测页面中各图标不均与所述图标数据库中的图标匹配，确定所述待检测页面显示异常，生成所述待检测页面的异常信息，可以更快速全面实现页面显示异常检测，降低人工成本，通过检测异常信息可以反映系统对各浏览器的兼容性，便于进一步的改进维护，以降低或避免浏览器的页面显示异常情况，即提高了系统对于各浏览器的兼容性。

参见图3，是本申请实施例提供的另一种页面异常显示的检测方法的示意流程图，图3所示的实施例可以是在图1所示的实施例的基础上得到的，如图3所示该方法可包括：

201、判断待检测页面中是否包含异常特征图标。

本申请实施例中的执行主体可以为上述终端设备。

具体的，可以启动多种预设类型的浏览器，每个浏览器自动遍历界面(页面)上的每个入口，以获得上述待检测页面。其中，上述待检测页面可以为待检测网站的主页页面，其主页页面的统一资源定位符(uniformresourcelocator，url)是写在其配置文件里面的。在www上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫url，它是www的统一资源定位标志，就是指网络地址。

在超文本标记语言(hypertextmarkuplanguage，html)中，a标签就是<a></a>或者大写字母a，其中的a是anchor的缩写。这些标签的作用是标明超链接的起始位置或目的位置。

本申请实施例中，上述url里面又会包含多个a标签，点击每个a标签，可以打开一个网页，这个网页的url可能是新的，也可能是之前出现过的，之前出现过的可以不再进行检测，然后这样遍历下去直到没有新的url，确定遍历完全。

本申请实施例中的图标包括用户界面(userinterface，ui)图标，可以是应用程序的应用图标或者网页中的任意图像标识，本申请实施例对此不作限制。上述异常特征图标可以理解为页面显示异常时出现的图标。具体的，上述预设类型的浏览器可以为市面上主流的浏览器，包括但不限于chrome、ie、firefox、ie(9、10、11)、360浏览器、qq浏览器等，本申请实施例对此不做限制。可以通过图像识别技术识别上述待检测页面，提取其中的图标。

在一种可选的实施方式中，上述异常特征图标可以为小红叉图标、惊叹号图标、errordisplay等等，本申请实施例对此不做限制。

在待检测页面中不包含上述异常特征图标的情况下，可以执行步骤202。若上述待检测页面中包含上述异常特征图标，可以执行步骤203。

202、调用页面检测程序对上述待检测页面进行检测，确定上述待检测页面是否显示异常。

本申请实施例中的上述页面检测程序可以是模型训练后获得的。根据训练学习的结果，可以进一步检测上述待检测页面是否有图标异常、字体异常等，以确定上述待检测页面是否显示异常。

具体的，上述页面检测程序的训练方法包括：

获取多组待训练数据，上述多组待训练数据中每组待训练数据包含样本页面和上述样本页面的异常检测结果，上述异常检测结果包括显示异常或者显示正常；

将上述每组待训练数据输入初始模型以获得预测结果；将上述预测结果与上述异常检测结果进行比对，获得上述样本页面对应的预测偏差；

基于上述多组待训练数据的样本页面对应的预测偏差进行反向传播，获得上述页面检测程序。

具体的，上述训练的过程包括预先标记出正常和异常的样本页面作为上述待训练数据，上传到训练库中训练检测程序的初始模型进行训练。其中，可以将上述ui设计者设计的ui页面作为显示正常的样本，上述步骤105中判定异常的页面可作为显示异常的样本。

本申请实施例中提到的反向传播(backpropagation，bp)算法是适合于多层神经元网络的一种学习算法，它建立在梯度下降法的基础上。bp网络的输入输出关系实质上是一种映射关系：一个n输入m输出的bp神经网络所完成的功能是从n维欧氏空间向m维欧氏空间中一有限域的连续映射，这一映射具有高度非线性。它的信息处理能力来源于简单非线性函数的多次复合，因此具有很强的函数复现能力。

bp算法的学习过程由正向传播过程和反向传播过程组成。在正向传播过程中，输入信息通过输入层经隐含层，逐层处理并传向输出层。如果在输出层得不到期望的输出值，则取输出与期望的误差的平方和作为目标函数，转入反向传播，逐层求出目标函数对各神经元权值的偏导数，构成目标函数对权值向量的梯量，作为修改权值的依据，网络的学习在权值修改过程中完成。误差达到所期望值时，网络学习结束。

具体的，可获取多组待训练数据。每组待训练数据中都包括ui设计页面在web系统中使用不同浏览器(chrome、ie、firefox、ie(9、10、11)、360浏览器、qq浏览器等)打开的页面和与页面对应的ui设计页面。接着，利用多组待训练数据对初始模型进行一次或多次训练，从而获得训练好的神经网络模型。具体的，可从每组待训练数据输入初始模型中计算该待训练数据对应的预测结果(即样本页面是否异常)，然后将预测结果和真实的异常检测结果进行对比，得到对应的预测偏差。接着，根据该预测偏差对初始模型进行反向传播，即对初始模型中的每个网络层的权值(当网络层中还包括偏置时，还可包括偏置)进行调整，以获得上述训练好的神经网络模型。

进一步的，图标与ui页面之间存在映射关系，当页面中的图标均在图标数据库中查找到对应图标时，根据图标与ui页面之间存在映射关系查找到包含全部页面图标的ui页面，上述包含全部页面图标的ui页面为第一对比页面。

举例来说，可以对待检测页面中的图标进行编号(a、b、c、d、e、f…)，第一对比页面的图标进行编号(a#、b#、c#、d#、e#、f#…)，所述a与a#相互对应。例如a(x1，y1，n1，m)表示图标a中心点的坐标为(x1，y1)图标所占用的像素点为n1个，待检测页面的像素点为m个。a#(x1#，y1#n1#，z)表示图标a#中心点的坐标为(x1#，y1#)，图标所占用的像素点为n1#，待识别页面的像素点为z个a#表示与图标a对应的图标。图标的位置a(x1，y1)和a#(x1#，y1#)的差值不超过阈值，且图标的大小n1/m和〖n1〗^#/z的比值不超过阈值。将所有图标都进行上述比对。所有图标均不超过阈值时，判定待检测页面正常。其中，上述方法适用于页面检测程序的训练和应用中的具体数据处理。

上述训练可以是基于gmm-ubm的增量训练方法。其它训练方法诸如i-vector、d-vector等均可实现图片识别模型训练。上述识别模型但不限于卷积神经网络模型、循环神经网络模型、深度神经网络模型、前馈神经网络模型、深度信念网络模型、生成式对抗网络模型以及其他深度学习模型等。

通过训练后的页面检测程序，可以确定待检测页面是否显示异常，比如判断是否存在上述异常图标或者上述异常字符等。其中，对于一个待检测页面，可以基于每个入口可以确定每个入口的优先级；在遍历每个入口的过程中，可以基于该优先级进行遍历。例如，如查询功能用的比较多，则可以设置较高优先级。

其中，上述步骤202还可以参考图1所示实施例的步骤104中的具体描述，此处不再赘述。

若确定上述待检测页面显示异常，可以执行步骤203。

203、生成上述待检测页面的异常信息，向用户终端发送上述异常信息。

在确定上述待检测页面显示异常时，可以生成上述待检测页面的异常信息，上述异常信息为该待检测页面中异常字符或者异常图标的信息，可以指示异常类型或者异常的具体位置。

具体的，可以将上述异常信息上报到统计中心，上述用户终端为预先设置的相关开发人员或者测试人员的终端，可以使用发送邮件或者短信的形式进行传输，准确及时地通知检测结果，并且可以依靠人工辅助更准确地确定是否显示异常。

使用页面异常显示检测系统后，在浏览器兼容性方面的测试人力会减少，可以投入更多的人力到web系统的业务逻辑功能测试上面。这样能在产品交付时间内，提供更好的产品质量。

在用户使用过程中遇到页面显示异常，检测系统立马上报；开发人员收到问题后修复该问题，测试验证通过后再根据问题严重等级和相关人员确认发版时间，同时由对应人员告知用户该问题将于何时修复，让用户感知到我们积极处理问题的态度，提升产品专业度和用户好感度。

本申请实施例中，可以判断待检测页面中是否包含异常特征图标，若包含，确定待检测页面显示异常，若不包含，调用页面检测程序对上述待检测页面进行检测，确定上述待检测页面是否显示异常，若确定待检测页面显示异常，可以生成上述待检测页面的异常信息，向用户终端发送上述异常信息。可以利用训练好的检测程序更快速全面实现页面显示异常检测，降低人工成本，通过检测异常信息可以反映系统对各浏览器的兼容性，便于进一步的改进维护，以降低或避免浏览器的页面显示异常情况，即提高了系统对于各浏览器的兼容性。

请参见图4，图4是本申请实施例提供的一种终端设备的结构示意图，该终端设备400包括：提取模块410、第一判断模块420、第二判断模块430、检测模块440和生成模块450，其中：

上述提取模块410，用于在待检测页面中不包含异常特征图标的情况下，提取上述待检测页面中的图标，上述异常特征图标为页面显示异常时出现的图标；

上述第一判断模块420，用于确定是否能在图标数据库中查找到上述待检测页面中的每个图标；

上述第二判断模块430，用于判断上述待检测页面中是否含有异常字符；

上述检测模块440，用于若上述待检测页面含有上述异常字符，或者上述待检测页面中各图标不均与上述图标数据库中的图标匹配，确定上述待检测页面显示异常；

上述生成模块450，用于生成上述待检测页面的异常信息。

可选的，上述第一判断模块420具体用于：

获取上述待检测页面中的每个图标和上述图标数据库中的每个图标的特征向量；

根据上述待检测页面中的图标的特征向量和上述图标数据库中图标的特征向量的欧式距离，对上述待检测页面中的每个图标和上述图标数据库中的每个图标进行比对，若上述欧式距离均小于距离阈值，确定能在上述图标数据库中查找到上述待检测页面中的每个图标。

可选的，上述第一判断模块420还具体用于：

若上述待检测页面中各图标的颜色不全属于上述图标数据库对应的颜色集合，则确定不能在上述图标数据库中查找到上述待检测页面中的每个图标；

或者，若上述待检测页面中各图标的形状不全属于上述图标数据库对应的形状集合，则确定不能在上述图标数据库中查找到上述待检测页面中的每个图标。

可选的，上述提取模块410具体用于：

获取上述待检测页面的颜色直方图，根据上述颜色直方图分割上述待检测页面的页面背景和上述图标，获得上述待检测页面中的图标；

或者，利用抠图技术提取上述待检测页面中的图标。

可选的，上述第二判断模块430具体用于：

识别上述待检测页面中的连续字符区域，提取上述连续字符区域中的多个单字符；

判断上述多个单字符中是否存在与其他字符大小不同的单字符；

若存在，确定上述待检测页面中含有上述异常字符，若不存在，确定上述待检测页面中不含有上述异常字符。

可选的，上述第二判断模块430还具体用于：

获取上述多个单字符中每个单字符的高度和宽度，判断是否存在高度与上述多个单字符的高度平均值的比值不在第一阈值范围内，或者宽度与上述多个单字符的宽度平均值的比值不在第二阈值范围内的单字符。

可选的，还包括处理模块460；

上述检测模块440还用于，调用页面检测程序对上述待检测页面进行检测，确定上述待检测页面是否显示异常，上述页面检测程序由网络模型训练获得；

上述处理模块460，用于训练上述页面检测程序；上述处理模块具体用于：

获取多组待训练数据，上述多组待训练数据中每组待训练数据包含样本页面和上述样本页面的异常检测结果，上述异常检测结果包括显示异常或者显示正常；

将上述每组待训练数据输入初始模型以获得预测结果；将上述预测结果与上述异常检测结果进行比对，获得上述样本页面对应的预测偏差；

基于上述多组待训练数据的样本页面对应的预测偏差进行反向传播，获得上述页面检测程序。

根据本申请实施例的具体实施方式，图1与图3所示的页面异常显示的检测方法涉及的步骤101～103、201～203可以是由图3所示的终端设备400中的各个模块来执行的。

通过本申请实施例的终端设备400，终端设备400可以在待检测页面中不包含异常特征图标的情况下，提取所述待检测页面中的图标，所述异常特征图标为页面显示异常时出现的图标；确定是否能在图标数据库中查找到所述待检测页面中的每个图标；判断所述待检测页面中是否含有异常字符；若所述待检测页面含有所述异常字符，或者所述待检测页面中各图标不均与所述图标数据库中的图标匹配，确定所述待检测页面显示异常，生成所述待检测页面的异常信息，可以更快速全面实现页面显示异常检测，降低人工成本，通过检测异常信息可以反映系统对各浏览器的兼容性，便于进一步的改进维护，以降低或避免浏览器的页面显示异常情况，即提高了系统对于各浏览器的兼容性。

请参阅图5，图5是本申请实施例公开的另一种终端设备的结构示意图。如图5所示，该终端设备500包括处理器501和存储器502，其中，终端设备500还可以包括总线503，处理器501和存储器502可以通过总线503相互连接，总线503可以是外设部件互连标准(peripheralcomponentinterconnect，pci)总线或扩展工业标准结构(extendedindustrystandardarchitecture，eisa)总线等。总线503可以分为地址总线、数据总线、控制总线等。为便于表示，图5中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。其中，终端设备500还可以包括输入输出设备504，输入输出设备504可以包括显示屏，例如液晶显示屏。存储器502用于存储包含指令的一个或多个程序；处理器501用于调用存储在存储器502中的指令执行上述图1和图3实施例中提到的部分或全部方法步骤。

应当理解，在本申请实施例中，所称处理器501可以是中央处理单元(centralprocessingunit，cpu)，该处理器还可以是其他通用处理器、数字信号处理器(digitalsignalprocessor，dsp)、专用集成电路(applicationspecificintegratedcircuit，asic)、现成可编程门阵列(field-programmablegatearray，fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

输入设备502可以包括触控板、指纹采传感器(用于采集用户的指纹信息和指纹的方向信息)、麦克风等，输出设备503可以包括显示器(lcd等)、扬声器等。

该存储器504可以包括只读存储器和随机存取存储器，并向处理器501提供指令和数据。存储器504的一部分还可以包括非易失性随机存取存储器。例如，存储器504还可以存储设备类型的信息。

通过本申请实施例的终端设备500，终端设备500可以在待检测页面中不包含异常特征图标的情况下，提取所述待检测页面中的图标，所述异常特征图标为页面显示异常时出现的图标；确定是否能在图标数据库中查找到所述待检测页面中的每个图标；判断所述待检测页面中是否含有异常字符；若所述待检测页面含有所述异常字符，或者所述待检测页面中各图标不均与所述图标数据库中的图标匹配，确定所述待检测页面显示异常，生成所述待检测页面的异常信息，可以更快速全面实现页面显示异常检测，降低人工成本，通过检测异常信息可以反映系统对各浏览器的兼容性，便于进一步的改进维护，以降低或避免浏览器的页面显示异常情况，即提高了系统对于各浏览器的兼容性。

本申请实施例还提供一种计算机存储介质，其中，该计算机存储介质存储用于电子数据交换的计算机程序，该计算机程序使得计算机执行如上述方法实施例中记载的任何一种页面异常显示的检测方法的部分或全部步骤。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置，可通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个地方，或者也可以分布到多个网络模块上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储器中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储器中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储器包括：u盘、只读存储器(read-onlymemory，rom)、随机存取存储器(randomaccessmemory，ram)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。