智能测试实践之路 - UI缺陷检测
The following article is from TesterHome Author 邹军、肇飞、文博
国内首个移动测试交流社区，最专业的 Appium 交流社区。专注于移动互联网测试和 Web 相关测试技术研究。我们的理念：Coding Share Show Cool
![]()
Tech
导读
本文核心内容是讲如何通过视觉算法能力来检测系统中的图文缺陷，涉及业务痛点、测试集构建、模型效果验证与落地实践。读者可以从本文了解智能测试的背景、实现方式、以及CV与CNN如何在测试域达成落地实践。希望读者能本文中受益，理解测试的痛点与难点，关注智能测试的发展，有兴趣的同学共同参与。
![]()
Tech
导读
对于大型的APP而言，往往承载了公司触达用户的大量业务类型，通过前中后台数以万计的服务链条支撑，而高DAU多类型设备覆盖的用户场景成为产研测质量控制的挑战。代码后向兼容、模块依赖、数据一致性、业务策略重叠等，都可能引起用户侧的系统问题，比如空白屏、空白块、文字重叠截断、图文遮挡、字符乱码、货币符号错误、兜底图文缺失等。问题列表：
研测阶段关注点在业务功能实现层面，人工甄别上述问题的成本非常高且容易形成疲劳遗漏，智能化在研测阶段和线上监控上识别此类问题正是Test By AI的切入点。在智能化切入目的性测试领域前，从结果诊断逻辑上探索异常巡检的落地技术实践是一种有效方式。
从实现方案上，有多种可能：
一、基于GUITree控件的节点信息，来判断节点是否存在，节点属性是否正确，以此来匹配到功能或者业务逻辑上，比如出现图片加载失败，网络加载超时，价格缺失，商品描述缺失等。但是，无法判断纯图形类型的问题，比如文字重叠、图文错位等。
二、基于图形的特征比对，判断两张图片的相似度。CV现有成熟的算法有SIFT、SURF、ORB等，但特征比对的逻辑是预判，事前知道错误图形的类型，且要与错误图形库逐一比对判断，计算资源与耗时随着问题类型的增加线性增长。
三、基于模型训练，通过深度学习对训练集中的大量数据进行特征提取，达到一次性的类别与阈值判决，以此作为测试结果判定的主要手段。同时，辅助二次检验的手段来提高判决的准确率。
图2 图像训练与检测逻辑图
通过AI建设智能测试基础能力，核心在于数据与模型，再者是在业务域的工程落地实践。从数据上来看，需要建立主站app各类页面的遍历能力，以便实现业务域场景的覆盖。依托现有测试遍历技术和自动化测试能力，可以实现周期性遍历页面，跟进业务迭代引入的主站app端变化。同时，将探索式遍历、脚本业务域遍历与赛博云真机平台融合，可以保障兼容性覆盖与效率提升。这样，可以实现正向样本数据的收集。
另外，负向图像样本的收集也极为重要。由于缺陷、异常问题反馈的图像数据相对较少，难以覆盖所有的异常场景，所以需要按照发现问题的图像特点，以正向训练集来批量地构建各种错误类型的负向样本，作为负向训练集和测试集，以提供给模型训练与效果验证。
04 异常构建能力建设
4.1 图片缺失
图片缺失会出现在多种场景中，比如，首页商品图片加载整体失败、活动页/搜索结果页/购物车/结算页图片缺失、带顶栏空白页、广告位动图缺失等。这些场景从技术维度都可以归结为异常白块。从CV的角度构建，可先找出页面中的图片元素。对图片进行二值化处理，然后根据阈值判断灰化图片的各类元素轮廓，对用角点定位的矩形轮廓进行消噪处理，去除点位为0的情况以避免图片内外部连接，最后在原有的图片像素点上定位，用白色填充矩形区域。对于边界区分度不高的图片，可加入膨胀、或腐蚀的图形化处理。
图示中蓝色框中图片会被白块所依次取代：
图3 京东APP首页界面
4.2 文字重叠
文字重叠异常在整体异常占比是最高的，发生的场景存在于APP的各个角落，这一部分力求把异常样本构造的更贴近真实样本，保证最终训练模型识别的准确度。
首先通过ocr准确识别页面中的文字位置，然后筛选掉包含空格，数字和比较短的文字区域，保证对构造不产生影响。
图4 京东APP首页部分区域截图
然后随机挑选一个文字区域，利用cv的能力进行二值转化，计算面积较少的区域为文字区域，如下图：
图5 二值转化后的区域截图
获取“京东会员”文字区域黑色坐标集合，利用该集合在原图获取并计算文字像素均值，获取颜色，同时根据文字区域像素范围计算出字号，最终通过PIL的图形处理能力，利用获取的相关文字信息（大小，颜色，位置）进行构造，最终效果如下图：
图6 异常情况构造效果图
通过如上方法，构建文字重叠异常的数据集，异常图片量级达到W级，并且基本不用投入人力。
05 算法开发实践
在UI测试过程，异常图片种类繁多、不同缺陷的表现形式多样，且不同页面的样式、排版经常发生变化，传统的CV算法（如模版匹配、滤波等）难以实现逐个缺陷判定。因此，采用深度学习（Deep Learning）的方法成为优选方案。
开发环境搭建
样本数据准备
网络结构设计
模型训练与测试
算法迭代优化
5.1 开发环境搭建
5.2 样本数据准备
样本数据是整个工作最基础、最重要的一环。数据质量的好坏决定算法模型性能的优劣。根据经验判断，构建优质的样本数据集，包括数据搜集、数据整理、数据去噪声、数据构造、数据增强、数据迭代等步骤，大致需要花费整个实践工程70%甚至80%的时间。本项目实践的任务属于有监督训练学习，搜集的样本数据集包括图片和其对应的label。智能测试过程最常见的两类异常缺陷为空白块异常和文字重叠异常；设定没有异常缺陷的样本为正常样本（标记为-1），每类异常情况标注不同的label（空白块异常标记 0，文字重叠异常标记为1）。对于图像分类任务，每张图片对应于某个类别（正常、空白块、文字重叠）；对于目标检测任务，每张图片对应于多个目标的检测框，每个检测框同时包含类别信息和位置信息。作者将本实践中的异常检测问题定义为目标检测问题，不仅标注出缺陷的类别信息，同时标注出缺陷的具体位置。从已标注的样本集中随机抽取10条目的展示结果，如下图所示：
最左边一列代表随机抽取样本的index，后面依次是 image_path，class_label，defect_pos， xyhw。
图7 随机抽取的10条标注样本示例图
其中，image_path 为图片的存储路径，class_label为异常缺陷的类型，defect_pos为异常缺陷在图像中的坐标位置（x1,y1,x2,y2)，xyhw为缺陷位置的相对坐标（这样即使图片发生了resize，缺陷坐标保持不变）和缺陷的类型。正常样本在class_label中记为NaN，在目标检测标注中记为（-1，0，0，0，0）。
5.3 网络结构设计
图8 带有SELayer的Restnet18网络结构图
具体每层的featumap大小和参数量如下图所示（部分展示），可以看出，整个模型大小为58.54M。
06 模型训练与测试
07 算法迭代优化
本文提取Restnet18的Layer4，构建了特征热力图，如下图所示。分析热力图发现，缺陷在空白块处响应最大，说明缺陷的特征已被分类器准确学习到。
Bad Case分析：
Case 1: 算法模型判定为正常，标注为异常的样本，如图（a）所示。经过二次check后，确认为标注错误。因此，识别“算法模型得分较高而与真实标注信息不一致”的样本，可作为快速去噪的有效方法。
Case 2：模型未识别出来的异常空白块，分析原因发现目前的训练样本集中没有“粉色底”的空白块。 在后续样本采集的过程中，可持续增强此类样本的搜集。
a.模型发现的标注错误 b.样本集缺失的“粉色底”空白块
真实样本的匮乏构成算法实践探索的最大壁垒。作者尝试了多种方式去尽可能搜集完备的样本集：其一，人工构建异常样本，此类方式的构建步骤繁琐，人力成本耗费较大且某些异常情况无法人工构造；其二，采用无监督学习的方式构建样本，该方式通过大量正样本的学习来识别异常样本，此类方式能节约大量的人工标注时间和成本，非常值得进一步探究，也将成为后续重要的研究方向。