一种基于图像的端上智能化页面质量巡检方法技术

本发明专利技术公开了一种基于图像的端上智能化页面质量巡检方法，该方法首先获得正常态和异常态页面的DOM元素矩形框坐标、截图、异常区域位置的矩形框坐标，训练页面异常问题分类和检测模型以及元素语义识别模型，然后获得待检查页面所有DOM元素位置信息和截图，按DOM元素分布特点对各类别模块预分类，采用元素语义识别模型对通用性模块进行识别，采用训练好的检测模型直接检测空坑类和文案重叠类问题，根据有效SURF特征识别空屏类问题，通过相邻楼层标题的距离鉴别空楼层问题，计算商品资源位的相似度来判断相同元素问题。本发明专利技术可解放测试人员进行重复的手工测试工作，会对测试工作和线上监控巡检工作有着显著的降本提效的作用。

【技术实现步骤摘要】
一种基于图像的端上智能化页面质量巡检方法
本专利技术属于测试技术、计算机视觉
，尤其涉及一种基于图像的端上智能化页面质量巡检方法。
技术介绍
随着移动互联网的蓬勃发展，商品对象信息服务系统已然由PC时代转到无线时代。在数字电商行业，由于营销促销活动种类繁多，变动灵活，营销活动的会场H5页面发布往往支持营销规则制定者(非技术人员)随时根据运营及营销需求灵活新建配置或变更配置。变更的灵活性则可能会带来更大的线上质量风险，而这些页面的线上质量往往直接影响到用户体验、营销活动效果，甚至成交。但页面的强分散性大大提升了质量保障难度，尤其是大促期间数百甚至数千个H5活动/会场页数千次变更发布导致投入人力测试成本极高(多人交互沟通、多平台切换操作、任务零碎且分散)。因此，需要一套通用、低成本方案对页面可能出现的空屏、空窗(某些资源位缺失)“空楼层”(模块内容缺失)等共性严重问题进行有效探测进而高效保障页面线上质量。
技术实现思路
本专利技术的目的在于针对现有技术的不足，提供一种基于图像的端上智能化页面质量巡检方法。本专利技术的目的是通过以下技术方案来实现的：一种基于图像的端上智能化页面质量巡检方法，包括以下步骤：S1：获取页面的DOM元素位置信息和页面截图，所述页面截图包括正常态页面截图和异常态页面截图；所述异常态截图包括含有空坑的页面截图和含有文案重叠覆盖问题的页面截图；并额外获取空坑区域和文案重叠覆盖区域对应的DOM元素位置信息；S2：根据步骤S1获得的DOM元素位置信息和页面截图，分别训练条状模块分类模型、资源位模块分类模型、空坑类异常检测模型和文案重叠覆盖识别模型；所述条状模块分类模型和资源位模块分类模型的训练过程具体为：根据步骤S1获得的DOM元素位置信息和页面截图，筛选并截取得到条状元素和资源位元素；根据条状元素ROI及其对应的类别采用深度学习残差网络或自动机器学习技术训练得到条状模块分类模型，输入为条状元素，输出为条状元素类别；根据资源位元素及其对应的类别采用深度学习残差网络或自动机器学习技术训练得到资源位模块分类模型，输入为资源位元素，输出为资源位元素类别；所述条状元素的类别包括电梯导航模块、楼层标题、底部Tab导航栏和其它类；所述资源位元素的类别包括商品资源位类、卡券类、店铺类和其它类；所述空坑类异常检测模型的训练过程具体为：批量执行S1后，首先对于S1中获得的含有空坑的页面截图及空坑元素对应的DOM的包围框坐标的标签进行一轮人工复核打标，即删除实际为非空坑标签的样本和增加标注未标注的空坑区域，得到复核后的含有空坑的页面截图和其标记包围框样本数据后，采用R-FCN目标检测框架训练得到空坑类检测模型，模型的输入为图像，输出为是否含有空坑；所述文案重叠覆盖识别模型的训练过程具体为：根据步骤S1获得的含有文案重叠覆盖问题的页面截图和问题区域的DOM元素位置信息后，采用R-FCN目标检测框架训练得到文案重叠覆盖类检测模型，输入为页面截图，输出为是否存在文案重叠覆盖；S3：获取待检查页面的DOM元素位置信息和待检查页面截图，筛选并截取待检查条状元素和待检查资源位元素；S4：利用步骤S2得到的条状模块分类模型和资源位模块分类模型，分别对步骤S3得到的待检查条状元素和待检查资源位元素进行分类；S5：针对不同页面问题进行识别，具体为：(1)针对空坑类页面问题，利用步骤S2得到的空坑类异常检测模型检测步骤S3获取的待检查页面是否存在空坑；(2)针对空楼层类页面问题，判断步骤S4分类的楼层标题类条状元素的数量是否大于等于2且相邻的两个楼层标题类条状元素的纵向相对距离小于设定的空楼层阈值；如是，则待检查页面存在空楼层，否则不存在空楼层；(3)针对空屏类页面问题，取步骤S3得到的待检查页面截图的中间区域，提取该中间区域内的SURF特征关键点，若提取到的SURF特征关键点的数量小于设定的关键点阈值，则判断待检查页面存在空屏问题，否则不存在空屏问题；(4)针对重复素材问题，对比步骤S5分类的商品资源位类资源位元素的每两个的相似度，判断是否存在不同商品资源位类资源位元素关联相同目标对象信息的异常问题，相似度大于设置的阈值为异常；(5)针对文案重叠覆盖类页面问题，利用步骤S2得到的文案重叠覆盖识别模型检测步骤S3得到的待检查页面截图是否存在文案重叠覆盖。进一步地，利用条状模块分类模型和资源位模块分类模型识别页面中不同类别的条状元素和资源位元素，设置对应的可交互控件位置；配置需要检查的可交互控件位置及顺序，根据配置模拟点击页面中指定的可交互控件位置并获取点击后的页面的DOM元素位置信息和页面截图；若当前屏幕的页面截图中不存在指定点击的可交互控件位置，执行下滑操作到达下一屏位置，继续模拟点击指定的可交互控件位置并获取点击后的页面的DOM元素位置信息和页面截图。进一步地，所述利用条状模块分类模型和资源位模块分类模型识别页面中不同类别的条状元素和资源位元素，设置对应的可交互控件位置具体为：(a)识别出的商品资源位类、卡券类、店铺类的资源位元素的位置直接作为其可交互控件位置；(b)对识别出的电梯导航模块条状元素，采用OCR技术识别得到电梯导航模块中用于到达某一楼层的可交互控件位置，利用模板匹配方法识别得到用于展开电梯导航模块内全部内容的箭头按钮的可交互控件位置；(c)对识别出的底部Tab导航栏条状元素采用OCR技术识别得到用于跳转到其他栏目页面的可交互的控件位置。进一步地，所述模板匹配方法为SURF特征提取算法结合FLANN。进一步地，所述DOM元素位置信息包括DOM元素的矩形包围框在页面截图中的相对坐标、矩形包围框的长宽比、矩形包围框与截图对应的各边之比和矩形包围框的面积。进一步地，所述条状元素的筛选条件为w/h∈(5,6)，w/W∈[1,3)；所述资源位元素的筛选条件为h/w<3且w/h<3.5且15W<h*w<150W；w为元素的宽度，h为元素的高度，W为元素所在图像的宽度。进一步地，所述步骤S5中的所述空楼层阈值为10～20像素。进一步地，所述步骤S5中的所述中间区域的高和宽均大于待检查页面截图对应的高和宽一半。进一步地，所述步骤S5中的所述关键点阈值为10～100。进一步地，所述步骤S5中的所述对比步骤S4分类的商品资源位类资源位元素的每两个的相似度具体为：提取步骤S4分类的商品资源位类资源位元素的HOG特征，计算每两个商品资源位类资源位元素的HOG特征的余弦相似度。本专利技术的有益效果是：本专利技术是针对电商活动会场类页面的常见页面质量问题的一种通用型自动化检查的解决方案，对线下门店型新兴业务和传统电子商务业务都普遍适用。常见页面异常问题的检查能力是模拟测试人员视觉上对异常问题的检查能力；对可交互控件位置的检测和识别，并通过javaScript脚本对控件进行点击操作，可实现页面内的位置切换、浮层弹出等视图变化和页面间的自动化本文档来自技高网...

【技术保护点】
1.一种基于图像的端上智能化页面质量巡检方法，其特征在于，包括以下步骤：/nS1：获取页面的DOM元素位置信息和页面截图，所述页面截图包括正常态页面截图和异常态页面截图等。所述异常态截图包括含有空坑的页面截图和含有文案重叠覆盖问题的页面截图；并额外获取空坑区域和文案重叠覆盖区域对应的DOM元素位置信息。/nS2：根据步骤S1获得的DOM元素位置信息和页面截图，分别训练条状模块分类模型、资源位模块分类模型、空坑类异常检测模型和文案重叠覆盖识别模型。/nS3：获取待检查页面的DOM元素位置信息和待检查页面截图，筛选并截取待检查条状元素和待检查资源位元素等。/nS4：利用步骤S2得到的条状模块分类模型和资源位模块分类模型，分别对步骤S3得到的待检查条状元素和待检查资源位元素进行分类。/nS5：针对不同页面问题进行识别，包括空坑类、空楼层类、空屏类、重复素材和文案重叠覆盖类。/n

【技术特征摘要】
1.一种基于图像的端上智能化页面质量巡检方法，其特征在于，包括以下步骤：
S1：获取页面的DOM元素位置信息和页面截图，所述页面截图包括正常态页面截图和异常态页面截图等。所述异常态截图包括含有空坑的页面截图和含有文案重叠覆盖问题的页面截图；并额外获取空坑区域和文案重叠覆盖区域对应的DOM元素位置信息。
S2：根据步骤S1获得的DOM元素位置信息和页面截图，分别训练条状模块分类模型、资源位模块分类模型、空坑类异常检测模型和文案重叠覆盖识别模型。
S3：获取待检查页面的DOM元素位置信息和待检查页面截图，筛选并截取待检查条状元素和待检查资源位元素等。
S4：利用步骤S2得到的条状模块分类模型和资源位模块分类模型，分别对步骤S3得到的待检查条状元素和待检查资源位元素进行分类。
S5：针对不同页面问题进行识别，包括空坑类、空楼层类、空屏类、重复素材和文案重叠覆盖类。


2.如权利要求1所述基于图像的端上智能化页面质量巡检方法，其特征在于，所述DOM元素位置信息包括DOM元素的矩形包围框在页面截图中的相对坐标、矩形包围框的长宽比、矩形包围框与截图对应的各边之比和矩形包围框的面积。


3.如权利要求1所述基于图像的端上智能化页面质量巡检方法，其特征在于，所述步骤S2中，所述条状模块分类模型和资源位模块分类模型的训练过程具体为：根据步骤S1获得的DOM元素位置信息和页面截图，筛选并截取得到条状元素和资源位元素；根据条状元素ROI及其对应的类别采用深度学习残差网络或自动机器学习技术训练得到条状模块分类模型，输入为条状元素，输出为条状元素类别；根据资源位元素及其对应的类别采用深度学习残差网络或自动机器学习技术训练得到资源位模块分类模型，输入为资源位元素，输出为资源位元素类别；
所述空坑类异常检测模型的训练过程具体为：批量执行S1后，首先对于S1中获得的含有空坑的页面截图及空坑元素对应的DOM的包围框坐标的标签进行一轮人工复核打标，即删除实际为非空坑标签的样本和增加标注未标注的空坑区域，得到复核后的含有空坑的页面截图和其标记包围框样本数据后，采用R-FCN目标检测框架训练得到空坑类检测模型，模型的输入为图像，输出为是否含有空坑；
所述文案重叠覆盖识别模型的训练过程具体为：根据步骤S1获得的含有文案重叠覆盖问题的页面截图和问题区域的DOM元素位置信息后，采用R-FCN目标检测框架训练得到文案重叠覆盖类检测模型，输入为页面截图，输出为是否存在文案重叠覆盖。


4.如权利要求3所述基于图像的端上智能化页面质量巡检方法，其特征在于，所述条状元素的筛选条件为w/h∈(5,6)，w/W∈[1,3)；所述资源位元素的筛选条件为h/w<3且w/h<3.5且15W<h*w<150W；w为元素的宽度，h为元素的高度，W为元素所在图像的宽度。


5.如权利要求3所述基于图像的端上智能化页面质量巡检方法，其特征在于，所述条状元素的类别包括电梯导航模块、楼层标题、底部Tab导...

【专利技术属性】
技术研发人员：陈琴，周小群，邓水光，
申请(专利权)人：浙江大学，
类型：发明
国别省市：浙江;33