周琦超：大搜模板 UI 自动化测试实践

背景

大搜模板测试主要关注搜索结果的展现效果，长期以来一直依赖手工测试来发现样式问题。而多种机型，不同操作系统，甚至越来越多的 app 都在不断增加测试的人力成本，亟需探索自动化解决方案。

单条结果常见的样式问题有：页面空白、控件遮挡、控件错位、元素缺失等。

要实现展现样式的自动化检查，必须要解决断言的问题。传统的方案是基于参照物的检查方式，分别获取测试环境和基线下结果的展现样式图，然后用图像DIFF 算法计算相似度，从而判断是否有样式异常。这种方案有很大的局限性，一方面，有很多测试场景难以获取参照物，比如监控、真机检查等；另一方面，逐像素的 DIFF 对比可能会有微小的误差，而且一些结果模板中会有动效区域使得文本不断变化，这些都导致了 DIFF 结果的不准确，带来巨大的人工确认成本。

所以大搜模板需要一种更通用的展现断言方案，能满足大搜模板测试的所有场景，能发现常见的展现样式问题。

思路

让计算机自动识别人眼能发现的样式问题，自然而然的我们会想到深度学习，通过大量的正负向图片样本来做模型训练，从而对异常的模板展现样式做预测。但是在实际的大搜业务中，同一个模板如百科，会有多种截然不同的展现样式，有的有图片，有的是纯文字等等。对于模板粒度的特征难以抽象，分类效果不理想。

如果有一种抽象建模方式，只关注视觉的结构和布局，忽略不同文本带来的差异，这样就能将同一模板的多种不同展现效果收敛成有限的结构化模型，最后形成独属于该模板的专家系统，达到自动预测和分类的目的。对大搜模板而言，展现效果图片的视觉布局信息中有两个最重要的要素：逻辑区块和位置。逻辑区块是最基础的元素，增多或缺失都会导致展现问题，而区块间的相对位置构成了整个展现样式的结构，相对位置发生变更就会表现出遮挡和错位等问题。

基于逻辑区块和位置信息对模板样式建模，保证一个模型能表征某个模板的某个具体样式，用大量的正向样本训练出完善的模型知识库，通过和知识库进行模型匹配，就能准确的进行断言。

方案

以逻辑区块和相对位置为要素，将模板展现结构抽象为数学模型，用专家系统的方式对模板展现进行自动分类和断言。

图像建模的过程中涉及到很多基础的图像处理技术，如图像切割等，公司内部已经有较先进和成熟的解决方案，和 icheck 团队合作，复用基础技术，最终孵化了大搜模板的建模方法。模板展现图像建模的流程如下。

a) 元素提取

元素提取是至关重要的一步，只有先获取图像中的有效信息区域，才能做进一步的处理。方案是基于背景色进行轮廓的描绘。对图像横向/纵向进行多轮扫描，将像素一致且和背景色同色的行/列认定为分割区域，对切割出的各有效区块再次扫描获取更细粒度的切割结果，如此往复，获取图像元素的轮廓信息。扫描轮数可根据实际情况指定。

b) 逻辑区块合并

元素分类

元素提取后，要对切割出来的各块做分类，以识别出文本区域和图像区域，后续做分别的处理。首先，图像区域的噪点值一般会较高，可用一个噪点阈值做初步区分，其次，文本切割出来的块面积一般较小，即使是多字连在一起的部分，长高比也远远大于 1。基于噪点值和长高比实现了文本和图像的区分。

文本块合并

对于零散的文本块，要将属于同一逻辑区块的部分做合并，这样才能表征我们视觉上的逻辑结构划分。

对于模板来说，文本块合并遵循几个基本原则：

横向/纵向距离不超过单行文本高度才可以合并

区域主体颜色一致才可以合并（区分标题加黑、正文灰字等）

一些特殊处理：正文中的飘红不影响合并、多个图片下的文字标注不做横向合并等

因同行文本和纵向文本合并策略的不同，整个合并过程分为横向合并和纵向合并。

文本块合并后效果如下：

c) icon 识别

大搜模板中有一些标识业务和操作导航的图标，如标识 mip 页的闪电标和跳转链接的右三角标等。这些图标紧跟在文本之后，但又是独立的逻辑个体，同时这类图标的缺失有过历史线上问题，所以要对这部分 icon做识别并拆分。

将需要识别的原尺寸 icon作为模板，在合并后的文本区块中滑动（从左到右，从上到下），计算各个同尺寸的搜索窗口与 icon 模板的相似度，从而找出最匹配的区域。相似度满足一定阈值，就认定该区域为匹配的 icon。

经过实验，对模板效果最理想的相似度衡量方法为归一化相关性系数匹配法（CV_TM_CCORR_NORMED）。Icon 识别效果举例如下。

d) 模板建模

以各逻辑区块左上角坐标为区块位置，计算出各个区块间横向和纵向的相对距离。然后以各区块为节点，以相对距离作为权值建立有向完全图。

假定节点数为 N，将节点按照图像 y 轴坐标升序排列，将有向完全图转换为 N*N 的矩阵 M，M 中每个元素为对应两个节点 x、y 坐标差除以图像总宽、高的二元组。如 M[0][1]=[(node0_x– node1_x)/img_width,(node0_y – node1_y)/img_height]。这样就可以用三维数组作为该图像的数学模型。

应用

在大搜模板的实际业务中，同一个模板会有不同的展现样式，但同时，这些样式也是可枚举的。对于同一个模板，用大量的真实流量作召回，通过上述的建模方法，可以得到多个模型。对于节点数相同的模型，通过矩阵中各个二元组的对比，误差在 5%以内的认定为同一模型，做归并处理。这样就获得了数目收敛的某个模板的模型集合，作为初始知识库。在模板测试中，对展现建模然后和知识库中的已知模型做匹配，就可以判断展现是否异常。

对于非确定 query 的测试，可辅以人工确认来不断扩充知识库；而对于训练过的 query，可以做到准确的异常识别，可用于模板的精准功能测试。以百科模板为例。

收益

解决了模板展现自动断言的问题，为模板做自动功能验证ᨀ供了基础。

首次实现了模板内的样式全覆盖，让模板测试从模板维度的覆盖发展到 模板内子样式维度的覆盖，进一步保证模板质量，发现展现问题。

当前已完成线上展现 top25 的模板的训练，图像元素切分准确率>95%， 共产出 170 个模板功能 case，用作线下回归，目前已成功召回若干 badcase。

作者介绍

周琦超

百度高级测试开发工程师，在前端自动化测试方向上有丰富的实践经验。目前聚焦图像技术在UI测试中的应用。