UI视觉分析在前端自动化的创新质量保障
如果无法正常显示，请先停止浏览器的去广告插件。
1.
2. e
t
s
e
T
o
rH
e
m
UI视觉分析在前端自自动化的
e
m
创新质量量保障
o
H
r
e
t
2019.06
尹⻜飞
s
Te
e
t
s
e
T
o
rH
e
m
3. 提纲
1. UI视觉分析技术现状
o
rH
e
m
2. UI视觉技术应用用痛点
e
t
s
3. 百度搜索公司前端自自动化方方案
e
T
4. iCheck技术栈
4.1 技术架构
4.2 基础切分与语义聚合
e
t
s
e
T
o
rH
e
m
4.3 基于easyDL的深度学习对象检测
4.4 区域模板布局样式校验技术
4.5 能力力力全景
5. 应用用实践
e
t
s
e
T
o
rH
e
m
4. UI视觉分析在前端测试领域现状— 凸显的优点和缺点
名称
时间
e
t
s
e
T
o
rH
公司（组
e
m
织）
MIT
所包含图像分析能力力力总结 利利用用技术点分析
基于屏幕图像控件的识别 1、图像识别
采用用自自适应的算法来进行行行可视化测试，通
过diff发现UI上潜在的错误。 1、机器器学习
2、图像diff
o
rH 1、图像识别
Sikuli 2009开源 Applitools 2017.07
Applitools
（B轮800万） AirTest 2018.03发布 网网易易 基于屏幕图像控件的识别 Test.ai 2018.08
（A轮1100
万） Test.ai 在应用用程序中动态识别屏幕和元素，并自自
动驱动应用用程序执行行行测试用用例例。 1、机器器学习
2、对象检测
Appium1.9 2018.08发布 Appium 加入入基于图像控件的识别定位能力力力 1、图像识别
AppiumPro 2018.11公开 Cloud Grey 将test.ai作为插件，使用用深度对象检测实
现控件识别 缺点是： 1、对象检测
e
t
s
e
T
优点是：
◆ 不不受限于控件获取技术，能扩充前端自自
动化应用用范围（H5⻚页面面）。
e
m
e
t
s
e
T
◆ 识别能力力力存在局限性，导致维护成本
大大。
o
rH
e
m
5. UI视觉技术应用用痛点— 多机兼容性差
o
rH
◆ 目目标任务
e
m
e
t
s
根据图标（
），判断目目标区域
e
T （iPhone7，iPhone X），是否存在图标，
并计算坐标，用用于自自动化的驱动或存在性
校验。
◆ 存在问题
❌
o
rH
icon:
46*48
e
t
s
e
T
e
m
在不不同屏幕大大小小下，相同样式的icon（右
红框），无无统一一算法进行行行准确识别。
iPhone 7 : 750*1334
icon:
70*72
e
t
s
e
T
o
rH
e
m
iPhone X : 1125*2436
6. UI视觉技术应用用痛点— 动态内容干干扰
o
rH
◆ 目目标任务
e
m
e
t
s
对红框区域的feed卡片片区域布局样式校
e
T 验，1个标题（a），3个横排图片片（b），
1个备注（c）。
◆ 存在问题
e
t
s
e
T
1、feed内容动态变化，随机性强。
2、不不同手手机屏幕大大小小不不同，无无统一一规则校
验。
o
rH
e
m
a
a
b
b
b
b
b
c
c
iPhone 7 : 750*1334
b
e
t
s
e
T
o
rH
e
m
iPhone X : 1125*2436
7. 百度搜索公司前端自自动化方方案— 集成UI测试分析
o
rH
设备资源平台
e
t
s
e
T
PC浏览器器
android
e
m
UI分析：iCheck
定位
线上环境
线下环境
数据&环境
iOS
数据mock
网网络重定向
调度执行行行平台
服务环境
基于元素id
基于坐标
e
t
s
e
T
o
rH
UI识别&
定位
e
m
1、基础语义切分
2、对象检测技术
基于UI图像
数据校验
1、模板布局校验
驱动执行行行
UI校验
结果校验
UI问题校
验
o
rH
e
m
2、通用用校验（留留
白白、乱码）
e
t
s
e
T
8. iCheck技术架构
业务目目标
o
rH
e
m
实现多机兼容性测试过程中，自自动
的通用用的控件识别及UIbug检测能
力力力
e
t
s
e
T
技术手手段
1、基于传统计算机视觉分析
2、基于创新的深度学习图像分
类、对象检测技术
实现方方案
1、图片片切分并语义化，进行行行数据
结构表达
2、对整体、局部控件进行行行有参照
和无无参照的视觉分析
3、以服务插件并webAPI，包装提
供通用用识别、校验服务
API封装
策略略管理理平台
服务插件
语义切分插件
文文本遮挡
e
t
s
e
T
e
m
⻚页面面留留白白
o
rH
文文本截断
重复元素 通用用布局
乱码校验 ⻚页面面diff
通用用算法库
图形切分区块提
取算法 区块聚合算法 视觉抗锯⻮齿检测
算法 结构模板生生成匹
配算法 乱码检测算法
文文本截断检测算
法 区块重复检测算
法 字体识别 主体颜色色 自自定义相似度匹
配算法
依赖资源
ocr
NLPC
IDL
paddle
e
t
s
e
T
easyDL
o
rH
e
m
9. 基础切分与语义聚合– 整体思路路
背景和难点
o
rH
e
m
1、控件切分及语义识别是⻚页面面分析的
基础
2、整图⻚页面面像素扫描，因为不不同区块
干干扰，无无法提取控件边界
3、控件语义识别⻚页面面无无参考技术方方案
e
t
s
e
T
1
原始图
片片
2
切分线扫描
[(切分区域rect，
区域块号), …]
图像灰度
多层扫描
区域合并
o
rH
噪声检测
解决方方案
1、采用用分治策略略，进行行行局部区块提取
2、区块内，进行行行行行行、列列扫描，提取控
件边界
3、综合使用用ocr、噪声监测、动态模板
匹配、临近区域聚合算法，实现控件语
义识别
e
t
s
e
T
切分区域
集合
3
几几何属性
语义识别
邻近区域特征
OCR文文字识别
图片片
e
m
5
1
文文字
Icon
4
文文字聚合
邻近区域特征
图片片
文文字块聚合
主颜色色特征
Icon
e
t
s
e
T
o
rH
e
m
10. 基础切分与语义聚合— 递归扫描实现切分
中间产物1
e
t
s
e
T
第一一层
行行行扫描
o
rH
e
m
第一一层
列列扫描
中间产物2
中间产物3
o
rH
第二二层
行行行扫描
e
t
s
e
T
e
m
中间产物4
第二二层
列列扫描
e
t
s
e
T
o
rH
e
m
11. 基础切分与语义聚合- 语义聚合
o
rH
基础切割效果
e
t
s
e
T
基础切割
e
m
图片片/Icon/
文文字识别
语义识别效果
e
t
s
e
T
文文字行行行聚合效果
o
rH
文文字行行行/
块聚合
文文字块聚合效果
e
m
e
t
s
e
T
o
rH
e
m
12. 基础切分与语义聚合— 生生成⻚页面面结构树
e
t
s
e
T
o
rH
e
m
视觉切分聚合
e
t
s
e
T
o
rH
e
m
重建⻚页面面结构树
e
t
s
e
T
o
rH
e
m
13. 基于easyDL的深度学习对象检测
背景和难点
o
rH
解决方方案
e
m
1、对于非非“干干净⻚页面面”，已有基于边界的控件提取技术
失效（层叠控件）。
2、传统计算机视觉，控件定位在精度上难以满足足适用用
需求。（底色色随机）Ps：下图红框为期望检测目目标
e
t
s
e
T
e
t
s
e
T
1、采用用深度学习对象检测技术解决层叠控件识别
2、低成本使用用easyDL已有成熟方方案（降低使用用成
本，线下、线上的样本管理理工工具化）
o
rH
e
m
e
t
s
e
T
o
rH
e
m
14. 基于easyDL的深度学习对象检测— 泛化能力力力强
e
m
可以在⻚页面面背景复杂的情况下，识别众多，“类似”具备相同特征的控件。
e
t
s
e
T
o
rH
e
t
s
e
T
o
rH
e
m
e
t
s
e
T
o
rH
e
m
15. 区域模板局部样式校验技术
技术痛点
e
t
s
e
T
o
rH
e
m
1、控件切分排序
2、距离计算，生生成特性
1、传统的图片片diff方方案，属于像
素级，无无法移植。
2、图片片的视觉布局信息缺少可
度量量的表达方方法。
e
t
s
e
T
解决思路路
1、在图片片切分基础上，分类识
别控件。
2、距离计算，生生成特性。
3、统一一编码。
o
rH
e
m
3、统一一编码
o
rH
e
m
特征向量量示例例 ：[0.5774981676261246, 0.5149165543498025, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
e
t
s
e
T
0.0, 0.0, 0.42922331716845274, 0.0, 0.0, 0.0, 0.0, 0.40583304121575897, 0.47166746959946454, 0.0, 0.0, 0.0, 0.0, 0.0,
16. 视觉分析能力力力全景
e
t
s
e
T
o
rH
e
m
e
t
s
e
T
o
rH
e
m
e
t
s
e
T
o
rH
e
m
17. 典型模板布局校验实践- 大大搜模板UI测试
问题描述
e
t
s
e
T
o
rH
e
m
大大搜模板测试主要关注搜索结果
展现效果，一一直依赖手手工工测试，
越来越多机型、多操作系统、甚
至至多app引入入，不不断增加人人工工测试
成本。常⻅见问题：⻚页面面留留白白、控
件遮挡、控件错位、元素缺失，
如右所示。
e
t
s
e
T
o
rH
e
m
e
t
s
e
T
o
rH
e
m
18. 典型模板布局校验实践- 大大搜模板UI测试
e
t
s
e
T
o
rH
e
m
e
t
s
e
T
o
rH
e
m
e
t
s
e
T
o
rH
e
m
19. 总结与展望
总结：
o
rH
e
m
1、测的更更广广，可以丰富移动测试的范围，例例如，扩展H5等⻚页面面
2、测的更更好，可以更更贴近类比比人人类的测试效果，更更贴近实际结果、
e
t
s
e
T
展望：
e
t
s
e
T
o
rH
e
m
1、大大数据驱动下，基于UI分析的case自自生生成
e
t
s
e
T
o
rH
e
m
20.