背景

随着当下国内外手机厂商的百花齐放，Android和ios都呈现出一定的碎片化。同时，作为App应用载体的无线终端，在不同的系统版本、品牌、分辨率和容器等各方面也都相差甚远。因此，为了保证大多数手机用户的体验，我们在实际业务迭代变更中出现新页面、模块发布时所需要进行的适配工作也愈加繁重。

如上图所示，我们可以看到，在适配工作的整个流转机制中，研发和测试之间最为积累的往往是bug修复、验证以及期间的沟通成本。尽管样式问题往往'食之无味'，一来二去的沟通通常也会是 项目Delay 、 人员陷入测试疲劳期 的罪魁祸首，但bug未能及时修复依然令人'夜不能寐'。 由此我们看到，适配工作亟待提效的部分，首先就需要减少测试与开发之间往复的bug修复和验收环节。减少这个环节的前置条件即,提交给测试或外包同学做质量验收的功能页面/模块在多数主流机型中已得到较为充分的自测。

除此外，我们收集了几个前台导购型项目的大改版适配bug池，发现了以下两个要素，这两大问题也直接引导我们一期方案的落地。

• ①.研发同学缺乏自测所需的大多数主流机型,无法较为全面的了解当前页面的质量表现

• ②.适配过程往往是发现和解决一些常见的页面问题,且这些问题基本集中在安卓手机中

  • 加载性能差(白屏、模糊、持续加载)
  • 数据/模块加载失效(空窗)
  • 组件加载失败(安卓的中低端机型常见)

一种基于图像识别提效适配工作的方法

得益于测试智能化的趋势性启发，我们看到了 图像识别 在适配中能够作为的可能性。因为既然要减少"往复"沟通的积累，又要从适配最相关的UI Check涉及的UI自动化“脚本维护成本高”的历史诟病中挣脱，还要尽可能多的检查出适配工作的常见问题。所以，我们制定出了以下的智能适配流程。

• 流程图
  

• 步骤

  • Step1.确定 基线图 (即最标准的页面视觉图)
  • Step2:由自动化截图工具获得当前机型和系统下适配的页面,即 对比图
  • Step3:对step2中的截图进行 预处理检查(白屏、模糊、空窗等) ,如有异常,则直接过滤
  • Step4:通过直方图对比的方式 对比基线图和对比图大致的相似性 ,相似性低，则直接过滤
  • Step5:通过 图像特征对比 ，检查并标识出两张图片中存在 差异的模块
  • Step6:返回检查结果，继续适配下一个机型的对比图

在整个流程的最上层，是由我们的无线适配平台提供当前功能页面在不同机型、系统、App版本的运行截图，除了在各种真机和模拟机上所使用的截图和轮播技术略有技术方面的差别，其余无论是预处理流程还是对比检查环节，均不涉及任何脚本的维护。研发同学在适配流程前，可在我们的平台前置运行预交付功能页面，尤其可重点关注的中低端机型中的问题并提前fix。基于此，再将质量已进一步保障的页面流转给测试同学验收。整个工作的流程，在图像识别助力之下，使 '发现问题->解决问题->验收问题' 的过程得以缩减，实现提效。

核心算法技术

• 基于直方图的图像相似性预处理技术

  • 概述

    • 先获取图像的直方图数据(即图像各像素点的数量Array)
    • 对比基准图和对比图各像素分布差异(算法处理逻辑见贴图代码)
    • 输出相似性百分比
  • 技术实现方案
    

• 基于FAST+SIFT+FLANN算法处理图像相似特征技术

  • 概述

    • 通过FAST+SIFT算法计算得到对比图和基线图的特征点向量描述算子, ReferKeyPints、CompareKeyPoints.
    • 基于FLANN特征向量匹配得到两张图片的相似特征向量 MatchPoints
    • 通过计算公式:差异特征向量=基线图特征向量-相似特征向量 得到差异特征
    • 将差异特征绘制在对比图中(即描绘出差异、缺失等情况下的模块特征点)
    • 通过比例分割对比图ROI区域,以形状显示的模式绘制差异区域
  • 技术实现方案
    

落地效果

目标明确，一期方案也在我们满怀期待中浮出水面。实际落地时，我们看到，目前基于图像识别能够检测到的问题，已经较为完整地覆盖了适配测试中常见的异常。无论是开发自测，还是外包同学正式介入验收，都能够借助我们的平台，对当前的功能页面做一次针对多机的适配测试，让往日需要来回沟通的常见适配问题得以前置，也间接推进项目进度，缩减适配环节人力和精力 。

• 常见异常问题检查
  

• 中低端机常见模块加载问题检查

  • icon缺失且有数据加载差异
    

- 模块缺失

展望

经过'图像识别'去提效适配工作让我们初次感受到'智能化'真正的魅力,近来年，深度学习的概念与应用也越来越火。我们也发现：由无监督学习、聚类算法等构建起来的神经网络架构，其自适应和自学习能力或许比我们的图像特征识别来的更加智能。同时，集团也有bu对此作出一定的研究和场景应用。但尝试对比后，我们发现无论是测试领域还是我们集团，由适配场景所积累的样本几乎为0，故对于深度学习(无监督、半监督学习)而言，即缺乏其运作的养料；与此同时，适配是一项讲究速成速得的工作，于是我们初期无论是试错与否，都无法容忍深度学习(无监督、半监督学习)较长的训练周期。

也正是如此，我们发现，由我们平台所带来的，除了基于图像识别去解决适配的问题，我们还能形成一个自取自存的页面异常大数据样本库。而形成这个库的时间和人力成本，不过是举手之劳而已( 将适配平台中标识error的页面留存即可,见下图右部 ) 。有了这个大数据样本库，似乎感受到了深度学习在适配提效未来以及我们大数据库开源的可能性。

激动之余，不忘再复习一下无线适配的定义。即验证所需功能在不同机型、系统中功能、交互、性能、安全等指标的正常表现。所以，我们所做的基于图像识别提效无线适配的方法，仅仅只是无线适配工作所覆盖的一部分。所以，真正能将适配能力建立一套较为完整的解决方案，让页面功能冒烟、页面在不同终端的性能表现、页面的安全指数等指标都能归一地输出给研发、测试、外包甚至PM，相信这会是一件功德圆满的事情。

很高兴地是，以上的设想，已由我们的天云平台小组成员合力设计产出，设计的简要模式如上图所示，大家可以见个预告。目前天云平台已在逐个功能模块发布内测，相信不久的未来，天云平台会给大家带来一份更大的惊喜。

项目成员

基于图像识别提效适配的方法(专利)

• 御之、赚俭、玄扬、初枝

天云平台

• 西涯、玄扬、赚俭、园直、静阳、御之
• 如有合作需求和疑问，欢迎联系我们 。