H5页面校验方法及装置与流程

本申请属于数据处理技术领域，特别涉及一种h5页面校验的方法及装置。

背景技术：

html5是第五代超文本标记语言/标准，基于此标准形成的页面称作h5页面，现有的手机app软件多采用h5开发完成。相较于原生app来说，h5的优势是开发速度快，具有跨平台的优势，例如一次性开发就能同时适用于安卓和苹果ios双系统。商家或者平台在日常以及节假日举行促销、宣传活动，是目前最常用的营销手段之一。页面频繁出现的ui层面的bug严重影响了用户体验，因此营销活动页的质量需要提前进行检测，以确保使用过程中页面打开顺畅，内容完整。以糯米产品为例，掘金平台承载着糯米首页、各个频道页以及第三方投放的活动配置，每月依赖测试人员审核的活动页面数量极大。上述审核的活动页面均为h5页面，且具有数量多、视觉多样、推广渠道多样的特点。

现有技术中，除依赖人工审核测试以外，主要包括以下两种在移动端h5页面自动化遍历的方案：一种是通过获取页面控件坐标及控件id来获取页面，另一种是采用monkey发送伪随机事件流，遍历app页面。第一种方案具有自动化case复用度差的缺陷，移动自动化case需要已知页面内容，针对指定元素，制定页面的校验case。case无法被未知的、视觉多样性的页面进行复用；其次，第一种方案仅能获取部分控件，并且业界获取控件坐标、控件id的方式，都只能处理部分webview页面，获取到的元素结构可能会不清晰，执行不稳定且耗时长。针对第二种方案，无法自定义遍历范围。monkey向系统发送伪随机的用户事件流，范围不可控，更适用于app级别的压力测试。综上，目前已有的技术不能针对h5页面进行有效的驱动、遍历及校验。

技术实现要素：

为了解决上述技术问题至少之一，本申请提供了一种h5页面校验方法、系统、计算机及可读存储介质。

本申请的第一个方面，一种h5页面校验方法，包括：获取一级h5页面内的所有控件坐标；根据控件坐标触发所有控件，获取与控件所关联的二级h5页面；以及校验二级h5页面。

根据本申请的至少一个实施方式，获取一级h5页面内的所有控件坐标之前包括采用与h5页面类型相适应的驱动打开一级h5页面，以及截图保存一级h5页面。

根据本申请的至少一个实施方式，还包括校验一级h5页面。

根据本申请的至少一个实施方式，获取一级h5页面内的所有控件坐标包括：对一级h5页面进行图像切分，获取一级h5页面的图像控件坐标；以及对一级h5页面进行ocr识别，获取一级h5页面的文字控件坐标。

根据本申请的至少一个实施方式，对一级h5页面进行图像切分包括：对一级h5页面进行图像灰度化处理；对灰度化处理后的页面进行扫描，标记分割线；以及依据分割线对一级h5页面进行切割，获取图像控件坐标。

根据本申请的至少一个实施方式，对一级h5页面进行ocr识别包括：获取一级h5页面内的所有文字区域；以及根据文字区域的覆盖范围构建文字控件结构树，该文字控件结构树内包含所有文字控件坐标。

根据本申请的至少一个实施方式，在获取图像控件坐标及获取文字控件坐标之后，进一步包括构建包含所有图像控件坐标及文字控件坐标在内的控件坐标集合，并去除控件坐标集合内重复的图像控件坐标和/或文字控件坐标。

根据本申请的至少一个实施方式，获取所有二级h5页面包括：确定一级h5页面的第一hash值；确定所有由一级h5页面上的控件所关联的其它h5页面的第二hash值；以及将不同于第一hash值的第二hash值所对应的h5页面作为二级h5页面。

根据本申请的至少一个实施方式，校验二级h5页面包括：根据ui规则校验二级h5页面，ui规则包括空白页面校验规则、异常文案校验规则、重复内容校验规则及字符截断校验规则中的至少一种。

本申请的第二个方面，一种h5页面校验装置，包括：控件获取模块，用于获取一级h5页面内的所有控件坐标；二级h5页面获取模块，用于按控件坐标触发所有控件，并获取由控件所关联的二级h5页面；以及校验模块，用于校验二级h5页面。

根据本申请的至少一个实施方式，还包括一级h5页面获取模块，用于获取一级h5页面，一级h5页面获取模块包括：驱动单元，用于根据h5页面类型，驱动打开一级h5页面；以及图像获取单元，用于截图保存一级h5页面。

根据本申请的至少一个实施方式，校验模块还用于校验一级h5页面。

根据本申请的至少一个实施方式，控件获取模块包括：图像控件坐标获取单元，用于对一级h5页面进行图像切分，获取一级h5页面的图像控件坐标；以及文字控件坐标获取单元，用于对一级h5页面进行ocr识别，获取一级h5页面的文字控件坐标。

根据本申请的至少一个实施方式，图像控件坐标获取单元包括：图像处理子单元，用于对一级h5页面进行图像灰度化处理；扫描子单元，用于对灰度化处理后的页面进行扫描，标记分割线；以及控件切割子单元，用于依据分割线对一级h5页面进行切割，产生图像控件坐标。

根据本申请的至少一个实施方式，文字控件坐标获取单元包括：文字区域识别子单元，用于获取一级h5页面内的所有文字区域；以及结构树生成子单元，用于根据文字区域的覆盖范围构建文字控件结构树，文字控件结构树内包含所有文字控件坐标。

根据本申请的至少一个实施方式，还包括重复控件去除模块，用于在获取图像控件坐标及获取文字控件坐标之后，构建包含所有图像控件坐标及文字控件坐标在内的控件坐标集合，并去除控件坐标集合内重复的图像控件坐标和/或文字控件坐标。

根据本申请的至少一个实施方式，二级h5页面获取模块包括：第一hash值计算单元，用于确定一级h5页面的第一hash值；第二hash值计算单元，用于确定所有由一级h5页面上的控件所关联的其它h5页面的第二hash值；以及判定单元，将不同于第一hash值的第二hash值所对应的h5页面作为二级h5页面。

根据本申请的至少一个实施方式，校验模块用于根据ui规则校验二级h5页面，ui规则包括空白页面校验规则、异常文案校验规则、重复内容校验规则及字符截断校验规则中的至少一种。

本申请的第三个方面，一种计算机设备，包括处理器、存储器以及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序用于实现上述的h5页面测试方法。

本申请的第四个方面，一种可读存储介质，可读存储介质存储有计算机程序，该计算机程序被处理器执行时用于实现如上描述的h5页面测试方法。

本申请针对批量多样的h5页面在不同的app进行驱动、遍历、校验的问题，提出的智能的基于h5页面可控范围的自动化遍历和校验方案。整个系统的输入是批量的h5页面的链接地址，输出为h5页面的校验结果。h5页面的驱动，是根据链接的类型和推广渠道进行划分，采用对应的adb驱动，在不同的app中打开。h5页面的遍历，通过图像切分和ocr技术的结合，稳定生成一级页面的控件结构树。循环遍历点击不同的坐标，通过一二级页面hash值的对比判断是否进入的是新的页面。智能地控制校验范围在一二级页面，并对图像进行定制ui规则的校验，从而得到h5页面是否存在ui层面的问题。该方法实现替代人工在不同手机、不同app端打开h5页面完成页面校验的工作，可大幅释放人力，节约成本。

附图说明

图1是本申请h5页面校验方法的一实施方式的流程图。

图2是本申请图1所示实施方式的获取控件坐标原理图。

图3是本申请图像切割行扫描示意图。

图4是本申请图像切割行扫描及列扫描结合示意图。

图5是本申请二级h5页面推送至校验模块流程图。

图6是本申请h5页面校验一实施方式的系统架构图。

图7是本申请h5页面校验另一实施方式的系统架构图。

图8为适于用来实现本申请实施方式的终端或服务器的计算机设备的结构示意图。

具体实施方式

为使本申请实施的目的、技术方案和优点更加清楚，下面将结合本申请实施方式中的附图，对本申请实施方式中的技术方案进行更加详细的描述。在附图中，自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。所描述的实施方式是本申请一部分实施方式，而不是全部的实施方式。下面通过参考附图描述的实施方式是示例性的，旨在用于解释本申请，而不能理解为对本申请的限制。基于本申请中的实施方式，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施方式，都属于本申请保护的范围。下面结合附图对本申请的实施方式进行详细说明。

如图1所示，根据本申请第一方面，提供了一种h5页面校验方法。

首先需要说明的是，本申请上述一级h5页面及二级h5页面中的“一、二级”仅为相对而言，并非限定一级h5页面为由app驱动打开的第一个页面；可以理解的是，一级h5页面可以是由app驱动打开的第一个页面，相应的二级h5页面则是点击第一个h5页面产生的第二个h5页面；一级h5页面还可以是由前驱h5页面(n-1级)内点击的某个控件所生成的第n级h5页面，此时二级h5页面为n+1级h5页面。可以理解的是，此处未限制一级h5页面，由此可以自定义想要校验的页面以及页面的层级深度，假设需要校验第“3-5级页面”，则将“第3级页面”作为本申请的一级h5页面，获得并校验“4级页面”，之后将“4级页面”作为本申请的一级h5页面，获得并检验“5级页面”。考虑到在实际页面校验中主要是针对由app直接驱动打开的一级页面及对应的下一级页面，完成这些页面的校验基本上已经保证了ui层面的用户体验，因此，下述实施方式以前者为例进行说明。

以下对本申请h5页面校验方法包括的步骤进行详细说明。

s100、获取一级h5页面内的所有控件坐标。

为了获取二级h5页面，本申请首先在步骤s100中获得了一级h5页面内的所有控件坐标，以便后续步骤中通过点击坐标来打开二级h5页面。

s200、按控件坐标遍历触发所有控件，获取由控件所关联的二级h5页面。

在一些可选的实施方式中，触发所有控件包括采取发送点击命令的方式来点击这些控件，系统在接收到点击指令时，弹出与所点击的控件相关联的“弹出页面”，基于上述对一二级页面的定义，在一个可选实施方式中，从上述“弹出页面”中挑选出二级h5页面以便进行后续的校验工作。

s300、校验二级h5页面。

步骤s300用于对推送过来的h5页面进行校验，主要是指根据ui规则校验所有二级h5页面，ui规则可以是空白页面校验规则、异常文案校验规则、重复内容校验规则或者字符截断校验规则。

空白页面校验规则用于进行空白页面校验，包括：

设置留白阈值，通过计算页面留白区域占比是否超过阈值，判断页面是否为空白页面，例如空白页面校验规则中设定空白占比后，采用图片上下像素来确定留白范围，针对不同页面，一般具有30-50％的空白区域的页面可以认为是异常的。

异常文案校验规则用于校验打开的h5页面是否异常，例如h5页面显示“错误404”、“该活动已过期”、“页面链接失效”等，在进行校验之前，首先采集这些异常文案样本生成异常文案模型，根据模型校验页面中是否存在异常文案。

重复内容校验规则用于校验同一页面中是否存在重复显示的异常情况，通过结合图片相似度和文字重复度的方法，校验页面中是否存在重复内容。

字符截断校验规则采用像素抗锯齿算法实现，例如检测部分字符是否被遮挡。

在一些可选的实施方式中，在获取一级h5页面内的所有控件坐标之前还包括获取一级h5页面，获取一级h5页面包括采用与h5页面类型相适应的驱动打开一级h5页面，以及截图保存一级h5页面。

示例性的，打开一级h5页面采用按渠道驱动的方式打开，具体为根据h5页面类型，采用不同的驱动方式，在对应的渠道中打开页面；例如百度糯米的h5页面类型为schema，则采用相应的schema驱动方式打开。

在一些可选的实施方式中，也可以包括采用上述ui校验规则对一级h5页面进行校验。

如图2所示，在一些可选的实施方式中，在获取一级h5页面之后，可以通过以下两种方式获得所有控件，通过对一级h5页面进行图像切分，获取一级h5页面的图像控件坐标；以及通过对一级h5页面进行ocr识别，获取一级h5页面的文字控件坐标。

在一些可选的实施方式中，对一级h5页面进行图像切分包括：对一级h5页面的图像进行灰度化处理；对灰度化处理后的页面进行扫描，标记分割线；以及依据分割线对一级h5页面进行切割，获取所有图像控件坐标。

在一些可选的实施方式中，对一级h5页面的图像进行灰度化处理后，以矩阵形式表示，从而在对灰度化处理后的页面进行扫描时，即可以扫描上述矩阵，便于对其标记切割线。这里的矩阵扫描包括行扫描和/或列扫描，行扫描如图3所示，行列扫描如图4所示；可以理解的是，包括h5在内的html页面均是由矩形框架构成，h5页面的控件点击范围基本涵盖了整个矩形框架，也就是说，用户在涵盖文字或图片的矩形框架中的任意位置点击，都会链接到相应的二级h5页面，这为行列扫描切割控件提供了先行条件。在一个备选实施方式中，为保证切割线为直线，可以采用霍夫曼直线检测算法进行直线检测，之后，依据属于直线的切割线对目标区域进行切割，生成图像控件坐标。

随后，本申请该实施方式中基于ocr技术获取图片的所有文字区域。ocr技术是光学字符识别的缩写(opticalcharacterrecognition)，是通过扫描等光学输入方式将各种票据、报刊、书籍、文稿及其它印刷品的文字转化为图像信息，再利用文字识别技术将图像信息转化为可以使用的计算机输入技术。本实施方式利用这一技术，可以直接从图3或图4的影像中提取文字资料等重要数据，生成所需的新文本，并生成h5页面的文字控件结构树。

结构树是一种非线性数据结构，是数据元素(在树中称为结点)按分支关系组织起来的结构，本实施方式中，如图3所示，“推荐”“小说”等标题为父节点，页面正文中的四个标题即为“推荐”的子节点。

在一些可选实施方式中，当获取到图像控件坐标及文字控件坐标之后，可以进一步构建包含所有图像控件坐标及文字控件坐标在内的控件坐标集合，并去除控件坐标集合内重复的控件坐标，这里重复的控件坐标主要是由于图像中包含文字导致该区域既作为图像控件坐标，又作为文字控件坐标；需要说明的是，在备选实施方式中，控件坐标可以由两个坐标值确定，例如采用矩形对角线的两个坐标值表示该矩形区域，假设以2*2的二维数组a1表示，如果该矩形区域上具有一个控件，则控件坐标在程序中以数组a1传递。

在实际应用过程中，一级h5页面的控件并不一定全部指向二级h5页面，有可能在一级页面的不同位置进行跳转，这样程序在触发控件并获得的“弹出页面”中有可能存在多个重复的一级h5页面，为此，前述从“弹出页面”从中挑选出二级h5页面的过程可以采用如下的一个实施方式实施：包括确定一级h5页面的第一hash值的步骤；确定所有由一级h5页面上的控件所关联的其它h5页面的第二hash值的步骤；以及将不同于第一hash值的第二hash值所对应的h5页面作为二级h5页面的步骤。

需要说明的是，步骤s300可以在步骤s200获取到一个二级h5页面后启动，也可以是在步骤s200获取到所有二级h5页面后启动；以前者为例进行说明，如图5所示，包括：

s201、截图保存一级h5页面之后，计算其第一hash值，同时推送至校验模块进行校验；s202、获取到控件坐标集合后，按顺序/遍历点击控件，进入二级h5页面，并计算该二级h5页面的第二hash值；s203、判断第一hash值与第二hash值是否相同，若不同，则执行步骤s204，如相同，则返回步骤s202，重新点击下一个控件，直至遍历点击完成所有控件；s204、将二级h5页面推送至校验模块。

本申请结合图像切分和ocr技术，可以有效解决h5页面控件坐标获取不到的问题，且可控范围在h5页面的一二级页面，避免随机case产生的影响，并在工程中落地实现，大幅度提供h5页面校验的效率，节省测试人力成本。

作为对上述各图所示方法的实现，本申请提供了一种用于校验h5页面的装置的一个实施方式，该装置实施方式与图1所示的方法实施方式相对应，该装置具体可以应用于各种电子设备中。

本实施方式h5页面校验系统包括：控件获取模块，用于获取一级h5页面的所有控件坐标；二级h5页面获取模块，用于按控件坐标遍历点击所有控件，获取所有二级h5页面；以及校验模块，用于校验所有二级h5页面。

在一些可选实施方式中，将选取后的二级h5页面进行检验，包括根据ui规则校验一级h5页面及所有二级h5页面，ui规则至少包括空白页面校验规则、异常文案校验规则、重复内容校验规则及字符截断校验规则中的至少一种。

图6给出了h5页面校验系统的一实施方式示意图，其包括控件提取模块、h5页面遍历模块以及规则校验模块，其中，控件提取模块用于获取控件坐标merge，h5页面遍历模块兼具图片推送功能，将获取到的二级h5页面推送至规则校验模块，规则校验模块则根据图示中的校验方式进行页面内容校验。

与上述方法相对应的，本实施方式h5页面校验系统还包括一级h5页面获取模块，用于获取一级h5页面，该一级h5页面获取模块包括：驱动单元501，用于根据h5页面类型，驱动打开一级h5页面；以及图像获取单元502，用于截图保存一级h5页面。

在一些可选实施方式中，还用于对上述获取的一级h5页面进行校验，校验方式可以参考校验二级h5页面的方式。

参考图7，在一些可选实施方式中，控件获取模块包括：图像控件坐标获取单元503，用于对一级h5页面进行图像切分，获取一级h5页面的图像控件坐标；以及文字控件坐标获取单元504，用于对一级h5页面进行ocr识别，获取一级h5页面的文字控件坐标。

在一些可选实施方式中，图像控件坐标获取单元503包括：图像处理子单元5031，用于对一级h5页面的图像进行灰度化处理；扫描子单元5032，用于扫描对灰度化处理后的页面进行扫描，并对一级h5页面标记分割线；以及控件切割子单元5033，用于依据分割线对一级h5页面进行切割，产生图像控件坐标。

在一些可选实施方式中，文字控件坐标获取单元504包括：文字区域识别子单元5041，用于获取一级h5页面的所有文字区域；以及结构树生成子单元5042，用于根据文字区域的覆盖范围构建文字控件结构树，文字控件结构树内包含所有文字控件坐标。

在一些可选实施方式中，当获取到控件坐标之后，还包括重复控件去除模块505，用于在获取图像控件坐标及获取文字控件坐标之后，构建包含所有图像控件坐标及文字控件坐标在内的控件坐标集合，并去除控件坐标集合内重复的控件坐标。

在一些可选实施方式中，二级h5页面获取模块还包括：第一hash值计算单元506，用于计算一级h5页面的第一hash值；第二hash值计算单元507，用于计算各二级h5页面的第二hash值；以及判定单元508，用于比较第一hash值与第二hash值，并获取所有不同于第一hash值的第二hash值所对应的二级h5页面。

本申请的另一方面，一种计算机设备，包括处理器、存储器以及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序用于实现上述h5页面测试方法。

下面参考图8，其示出了适于用来实现本申请实施方式的计算机设备800的结构示意图。图8示出的计算机设备仅仅是一个示例，不应对本申请实施方式的功能和使用范围带来任何限制。

如图8所示，计算机设备800包括中央处理单元(cpu)801，其可以根据存储在只读存储器(rom)802中的程序或者从存储部分708加载到随机访问存储器(ram)803中的程序而执行各种适当的动作和处理。在ram803中，还存储有设备800操作所需的各种程序和数据。cpu801、rom802以及ram803通过总线804彼此相连。输入/输出(i/o)接口805也连接至总线804。

以下部件连接至i/o接口805：包括键盘、鼠标等的输入部分806；包括诸如阴极射线管(crt)、液晶显示器(lcd)等以及扬声器等的输出部分807；包括硬盘等的存储部分808；以及包括诸如lan卡、调制解调器等的网络接口卡的通信部分809。通信部分809经由诸如因特网的网络执行通信处理。驱动器810也根据需要连接至i/o接口805。可拆卸介质811，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器810上，以便于从其上读出的计算机程序根据需要被安装入存储部分808。

特别地，根据本申请的实施方式，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本申请的实施方式包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施方式中，该计算机程序可以通过通信部分809从网络上被下载和安装，和/或从可拆卸介质811被安装。在该计算机程序被中央处理单元(cpu)801执行时，执行本申请的方法中限定的上述功能。需要说明的是，本申请的计算机存储介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、光纤、便携式紧凑磁盘只读存储器(cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、rf等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本申请各种实施方式的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本申请实施方式中所涉及到的模块或单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块或单元也可以设置在处理器中，这些模块或单元的名称在某种情况下并不构成对该模块或单元本身的限定。

作为另一方面，本申请还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施方式中描述的装置中所包含的；也可以是单独存在，而未装配入该装置中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被该装置执行时按上述方法对数据进行处理。

以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。