基于图片相似度算法在UI自动化测试过程中的应用

作者：中国移动云能力中心  ——李吉双

概要：采用基于图像相似度的算法（SSIM算法和余弦算法）进行UI自动化识别的过程，文章中识别两张图片并输出识别的结果，从基于页面元素判断UI自动化测试结果的过程转变成基于图像相似度差异化的识别UI自动化结果的转变，探索使用AI的技术融入到自动化测试的过程。

背景：
- 1.UI测试中若测试数据和前端界面设计都不发生变化则每次回归测试得到的结果应该是一致的；
- 2.UI测试中判断结果预期的过程都是通过页面元素的断言实现；

基于以上的背景下提出了一个问题：怎么样才能基于每次回归的结果更快的实现自动化的比较过程，若前端的UI本身没发生变化，则代表功能基本在回归之前与之后保持一致，那怎么快速的测试能达到省时省力的作用？

基于以上的背景，提出了采用机器学习中的图片相似度比较的算法并结合UI自动化测试的流程（采用selenium+python）实现差异化比较，对回归的每个流程进行自动化的判别过程；

整体实现思路

项目流程图如下：

整体流程图

相关说明如下:

• 1.系统分为两个模块FindHander和PicHander两个功能类模块；
• 2.其中系统先执行FindHander模块的get_pic_traverse的API接口，其实现过程涵盖了创建目录，截图的过程；
• 3.系统比较的图片包括标准的图片：标准图片可以在每次测试开始前进行生成和检查；
• 4.待两组图片都生成完毕后，执行PicHnader类的generate_diff_pic_between_ssim接口（SSIM算法）或者generate_diff_pic_between_vector（余弦算法）生成相似度得分，其中得分在[0,1]之间，分数越高越好；

相似度算法SSIM

SSIM（structural similarity）是一种用来衡量图片相似度的指标，也可用来判断图片压缩后的质量。SSIM由亮度对比、对比度对比、结构对比三部分组成。参考

SSIM算法的流程

主要通过分别比较两个图像的亮度(l)、对比度©、结构(s)，然后对这三个要素加权并乘积表示：

指标计算过程

这里 μx 为均值，σx 为方差，σxy 表示协方差。这里 C1、C2、C3 是为了避免当分母为 0 时造成的不稳定问题（所以写算法的时候可以放心，一定不会出现除 0 的情况）

更多的SSIM算法的介绍可以自行百度一下；

余弦算法

余弦算法比较图片的相似度是把图片转换成向量空间的两个向量的夹角的余