基于puppeteer的页面多维度检测方法及系统技术方案

本发明专利技术提出了一种基于puppeteer的页面多维度检测方法及系统，涉及UI测试领域。包括基于现有缺陷现象的页面特点和现象特点得到多个维度的校验手段，包括空白页面校验、空白模块校验、模块缺失校验、模块比对校验和异常文案字符校验；基于puppeteer针对H5页面进行遍历长截图后进行切割；在客户端部署后触发检测，分别对切割后截图进行自动校验；空白页面校验和空白模块校验基于页面像素检测，通过阈值实验训练得到基准像素高度；模块比对校验和模块缺失校验经过模糊匹配、基于Fast检测算法以及特征点匹配计算不同模块图，当未达到阈值时告警。实现了多维度检测APP页面，具有轻量化、即时性和稳定性。即时性和稳定性。即时性和稳定性。

【技术实现步骤摘要】
基于puppeteer的页面多维度检测方法及系统


[0001]本专利技术涉及UI测试领域，具体而言，涉及一种基于puppeteer的页面多维度检测方法及系统。

技术介绍

[0002]随着移动互联网的快速发展，在满足用户的需求的多样化前提下，很多主流APP页面更新迭代频繁，页面数量爆发式增长，甚至达到千量级。现阶段软件对质量的要求，需要开发、测试、运维共同协作，保证更快更好的交付软件项目。而持续交付让软件的构建、测试与发布变得更快以及更频繁。从而对测试的时效性、稳定性有了更高的要求。此外，在快速更迭的需求开发中，APP的连续发布使得H5页面的回归测试频繁，人工成本高。而常规的UI自动化测试，投入产出无法成正比，在迭代频繁的前提下，维护工作较大。在持续交付的模式推进下，UI自动化测试的时效性和稳定性以及高成本输入的问题亟待解决。因此，针对上述背景，一种轻量化，有即时性、稳定性的不依赖用户维护UI测试用例的页面多维度检测方案是大多数客户端/前端测试的诉求。

技术实现思路

[0003]本专利技术的目的在于提供一种基于puppeteer的页面多维度检测方法，其能够基于puppeteer截图实现APP页面的多维度检测，不依赖用户维护UI测试用例，具有轻量化、即时性和稳定性。
[0004]本专利技术的另一目的在于提供一种基于puppeteer的页面多维度检测系统，其能够基于puppeteer截图实现APP页面的多维度检测，不依赖用户维护UI测试用例，具有轻量化、即时性和稳定性。
[0005]本专利技术的实施例是这样实现的：
[0006]第一方面，本申请实施例提供一种基于puppeteer的页面多维度检测方法，其包括如下步骤，收集客户端的缺陷，基于现有页面的缺陷现象进行分析，以根据页面特点和现象特点得到多个维度的校验手段；所述校验手段包括空白页面校验、空白模块校验、模块缺失校验、模块比对校验和异常文案字符校验；基于puppeteer针对H5页面进行遍历长截图后，根据不同模块对长截图进行切割；在客户端部署后触发检测，分别对切割后的截图进行自动校验；其中，所述空白页面校验和所述空白模块校验均基于页面像素检测，通过阈值实验训练得到基准像素高度，用以检测遍历长截图；所述模块比对校验和所述模块缺失校验对不同模块图经过模糊匹配、基于Fast检测算法以及特征点匹配计算出结果，当结果未达到基准阈值进行告警。
[0007]在本专利技术的一些实施例中，上述缺陷现象包括页面故障、模块异常和页面样式错乱多种缺陷类型；所述页面故障包括白屏或黑屏、404、crash和重复跳转；所述模块异常包括缺失或多余、空白模块或空白行、内容异常和点击无反应；所述页面样式错乱上包括超长未截断、文字或图片重叠、图片展示问题、异常文字展示和兼容性问题。
[0008]在本专利技术的一些实施例中，上述页面特点包括缺陷类型，以及静态或动态，所述现象特点包括现象出现概率。
[0009]在本专利技术的一些实施例中，上述异常文案字符校验基于OCR能力对页面长截图进行文字识别后，对抓捕到的异常文字或特殊符号进行配置检测告警。
[0010]在本专利技术的一些实施例中，多个维度包括UI样式和页面Log；所述页面Log基于JS的console log对Error的log进行降噪过滤，进行配置检测。
[0011]在本专利技术的一些实施例中，上述特征点匹配包括通过基准图遍历对比各模块图，筛选匹配相似度最高的图片进行对比，当筛选不到相匹配的模块图或相似度未达到所述基准阈值时进行告警；所述基准阈值通过所述基准图得到。
[0012]第二方面，本申请实施例提供一种基于puppeteer的页面多维度检测系统，其包括，目标确定模块：收集客户端的缺陷，基于现有页面的缺陷现象进行分析，以根据页面特点和现象特点得到多个维度的校验手段；所述校验手段包括空白页面校验、空白模块校验、模块缺失校验、模块比对校验和异常文案字符校验；截图切割模块：基于puppeteer针对H5页面进行遍历长截图后，根据不同模块对长截图进行切割；截图校验模块：在客户端部署后触发检测，分别对切割后的截图进行自动校验；其中，所述空白页面校验和所述空白模块校验均基于页面像素检测，通过阈值实验训练得到基准像素高度，用以检测遍历长截图；所述模块比对校验和所述模块缺失校验对不同模块图经过模糊匹配、基于Fast检测算法以及特征点匹配计算出结果，当结果未达到基准阈值进行告警。
[0013]针对第一方面～第二方面，相对于现有技术，本专利技术的实施例至少具有如下优点或有益效果：
[0014]1.本申请适用于前端/客户端服务代码的持续交付流水线中，可以快速、高频率的用于千量级页面的回归测试使用，解决了传统UI自动化测试，人工编写UI case，且维护难的问题。
[0015]2.辅助测试回归，在保证精准度的同时，降低了人工测试成本，与传统的UI自动化测试相比，不需要测试人员投入成本，且不重依赖于某一算法的精确度，实现了轻量化多维度检测，具有较高稳定性。
[0016]3.提供的基于puppeteer截图的多维度检测的自动化测试方案，能够自动化检测快速遍历千量级页面，适用于前端/客户端的项目的持续交付适用。
附图说明
[0017]为了更清楚地说明本专利技术实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本专利技术的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
[0018]图1为本专利技术实施例1基于puppeteer的页面多维度检测方法的原理图；
[0019]图2为本专利技术实施例1的基于UI缺陷现象确定多维度检测对象的原理图；
[0020]图3为本专利技术实施例1的基于puppeteer的页面长截图的原理图；
[0021]图4为本专利技术实施例1的长截图的效果图；
[0022]图5为本专利技术实施例1的基于特征点匹配的模块对比原理图；
[0023]图6为本专利技术实施例1中投入客户端自动化检测的实例效果图；
[0024]图7为本专利技术实施例2基于puppeteer的页面多维度检测系统的原理图；
[0025]图8为本专利技术实施例3电子设备的原理图。
具体实施方式
[0026]为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。
[0027]实施例1
[0028]请参阅图1～图6，图1～图6所示为本申请实施例提供的基于puppeteer的页面多维度检测方法的示意图。基于puppeteer的页面多维度检测方法，其包括如下步骤，收集客户端的缺陷，基于现有页面的缺陷现象进行分析，以根据页面特点和现象特点得到多个维度的校本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.基于puppeteer的页面多维度检测方法，其特征在于，包括如下步骤，收集客户端的缺陷，基于现有页面的缺陷现象进行分析，以根据页面特点和现象特点得到多个维度的校验手段；所述校验手段包括空白页面校验、空白模块校验、模块缺失校验、模块比对校验和异常文案字符校验；基于puppeteer针对H5页面进行遍历长截图后，根据不同模块对长截图进行切割；在客户端部署后触发检测，分别对切割后的截图进行自动校验；其中，所述空白页面校验和所述空白模块校验均基于页面像素检测，通过阈值实验训练得到基准像素高度，用以检测遍历长截图；所述模块比对校验和所述模块缺失校验对不同模块图经过模糊匹配、基于Fast检测算法以及特征点匹配计算出结果，当结果未达到基准阈值进行告警。2.如权利要求1所述的基于puppeteer的页面多维度检测方法，其特征在于，所述缺陷现象包括页面故障、模块异常和页面样式错乱多种缺陷类型；所述页面故障包括白屏或黑屏、404、crash和重复跳转；所述模块异常包括缺失或多余、空白模块或空白行、内容异常和点击无反应；所述页面样式错乱上包括超长未截断、文字或图片重叠、图片展示问题、异常文字展示和兼容性问题。3.如权利要求1所述的基于puppeteer的页面多维度检测方法，其特征在于，所述页面特点包括缺陷类型，以及静态或动态，所述现象特点包括现象出现概率。4.如权利要求1所述的基于puppeteer的页面多维度检测方法，其特征在于，所述异常文案字...

【专利技术属性】
技术研发人员：周云霞，
申请(专利权)人：天翼电子商务有限公司，
类型：发明
国别省市：