基于图像机器学习的自动化应用

原创久凡酷家乐技术质量

一、当前UI自动化存在的问题

1.1 自动化元素定位比较麻烦

通过xpath或selector定位比较麻烦，要手动定位很多元素，写一条用例耗时比较久
业务如果更新频繁，元素重新定位调试起来比较耗时

1.2 特殊元素通过传统方式定位比较困难

对于像全景图、漫游图等展示类的场景来说，元素定位很难
在工具视图中，想要找到某些元素但无法通过selector来定位，比如方案中的柜子

1.3 自动化执行的结果校验比较困难

图片对比失败率较高，之前大多数都是对比整张图片，无关的部分变化也会导致case失败
还有一些特殊的场景，不好判断用例执行的结果是否正常，比如渲染效果的展示，柜体上铺贴材质的正确性

二、通过图像识别来解决

思路：在UI自动化的运行过程中，截取图片，对当前图片进行处理，定位&校验元素

2.1 基于目标检测的模型训练与识别

2.1.1 名词解释

机器学习中大概有如下步骤：确定模型----训练模型----使用模型。模型简单说可以理解为函数。
确定模型是说自己认为这些数据的特征符合哪个函数。
训练模型就是用已有的数据，通过一些方法（最优化或者其他方法）确定函数的参数，参数确定后的函数就是训练的结果。
使用模型就是把新的数据代入函数求值，获取预测的结果。

目标检测：识别图片中有哪些物体以及物体的位置（坐标位置）。

目标检测的位置信息：一般由中心点坐标表示：(x_center, y_center, w, h)，其中x_center，y_center为目标检测框的中心点坐标，一般都以图片左上角为原点(0,0)，向右方向为x轴正方向，向下方向为y轴正方向；w，h目标检测框的宽、高。

假设这个图像是1000x800，所有这些坐标都是构建在像素层面上：

那么图中三个框的中心点坐标结果如下：

Dog：（100，600，150，100）

Horse：（700，300，200，250）

Person：（400，400，100，500）

了解了上述概念后，接下来就需要找到合适的算法模型+训练框架，来实现我们的目标。

目前常用的目标检测算法主要有两种类型：

方式	定义	代表算法	优缺点
两阶段（two-stage）检测	第一步：生成可能包含物体的候选区域。第二步：对候选区域做进一步分类和校准，得到最终的检测结果	R-CNN，SPPNet，Fast R-CNN， Faster R-CNN	经过两步得到结果，运行速度较慢，但准确率较高
一阶段（one-stage）检测	将物体检测作为回归问题求解，直接在网络中提取特征来预测物体分类和位置	Yolo系列	运行速度快，准确率不如上面的方式，但也满足要求

Yolo（you only look once）：one-stage的目标检测算法，将物体的定位和分类在一起完成，在一个输出层回归bounding box的位置和bounding box所属类别。

目前常用的训练框架有：TensorFlow，Caffe，PyTorch，Darknet等，其中Darknet是一个较为轻型的完全基于C与CUDA的开源深度学习框架，

功能虽然不如Tensorflow和Caffe等框架那么强大，但是该框架还是有一些独有的优点：

易于安装
没有任何依赖项
结构明晰，源代码查看、修改方便
提供了方便的python接口

而且Darkent是专门为训练yolo算法而开发的框架，训练步骤简单，适配性强。

因此采用 YOLO（算法模型）+Darknet（训练框架）

2.1.2 流程图

2.1.3 UI自动化实践

为了识别出方案中的组合柜，先获取了一些含有组合柜的场景图片，然后使用Labelimg软件手动标注一下方案中的组合柜数据，生成可用于框架训练的数据集格式，用于后续训练。

收集数据：

标注想要识别的元素：

全部标注完成之后，就建立了完整的数据集，然后使用目标检测的神经网络框架对该数据集进行训练，得到想要的模型。通过训练会得到 网络结构.cfg文件，权重.weights文件和模型类别标签文件.names 三个文件，后续应用模型的话，只需要解析这三个文件就能够从未知图片中成功识别出想要的元素。

训练之后的检测效果如图：

由于本次训练只收集了100张图片（包含200多个目标）用于训练，因此识别的精度不是很高，有些组合模型没有被识别出来，但是从中可以看出大多数情况下是可以把组合模型和单个模型区分出来的。

因为解析训练得到的三个文件需要opencv的库，而python对于引入opencv库很方便，因此需要安装python环境，来运行python代码，而且还需要安装opencv的库：

pip install opencv-python

pip install opencv-contrib-python

同时由于UI自动化框架用的是js代码，也需要安装Nodejs环境，来保证UI自动化框架的运行。最终就可以使用js代码，调用执行python文件获取想要的结果：

调用python文件的代码

//调用child_process模块(同步进程const { execSync } = require("child_process");                     const syncGet = (url) => {  //执行python文件，获取结果到data  var data = execSync(`python ${url}`).toString();    //将data以换行符分割，并去除空数组                     data = data.split(/\s*[\r\n]+\s*/).filter(function(n){return n})       position=data[0].split(" ")  return position;};var position  = syncGet("test-xiugai.py");console.log(position)

然后在UI自动化框架中，完成一个case，启动浏览器，进入方案，识别出场景中的组合柜，拖动组合柜到指定坐标位置

test("获取组合柜的坐标并移动到指定坐标", async () => {  let buffer = await pyBell.screenshot()  //截图存到指定目录  await pyBell.screenshot({path: "./screenshot/11.png"})                          const { execSync } = require("child_process");  const syncGet = (url) => {    var data = execSync(`python ${url}`).toString();    data = data.split(/\s*[\r\n]+\s*/).filter(function(n){return n})    position=data[0].split(" ")    return position.map(Number);                                               };  //执行python文件，返回坐标  var position  = syncGet("__tests__/test-xiugai.py");  //鼠标左键点击返回的坐标                          await pyBell.mouseClick({x:position[2], y:position[3]}, {button: "left"})     await pyBell.sleep(2000)  //鼠标在当前坐标左键按下  await pyBell.mouseDown({button: "left"})                                      //鼠标从当前坐标移动到x值+300的位置  await pyBell.mouseMove(undefined,{x:position[2]+300, y:position[3]}, 50)      //鼠标左键松开  await pyBell.mouseUp({button: "left"})                                     }, 150000)

最终运行效果：

2.2 基于opencv的模板匹配与识别

2.2.1 名词解释

OpenCV是一个跨平台计算机视觉和机器学习软件库，可以运行在Linux、Windows、Android和Mac OS操作系统上。它轻量级而且高效——由一系列 C 函数和少量 C++ 类构成，

同时提供了Python、Ruby、MATLAB等语言的接口，实现了图像处理和计算机视觉方面的很多通用算法。

模板就是一副已知的小图像，而模板匹配就是在一副大图像中搜寻目标，已知该图中有要找的目标，且该目标同模板有相同的尺寸、方向和图像元素，通过一定的算法可以在图中找到目标，确定其坐标位置。

原图：

模板:

匹配后的图：

通过模板匹配可以获得该模板图片在原图中的位置坐标。

2.2.2 流程图

2.2.3 UI自动化实践

以“测试定制安装编码”case来举例说明，进入定制环境后，首先需要hover”文件“，然后hover”导出安装编码“，再点击”全屋家具“，最后判断是否出现生成完成的图标，来决定case的通过与否。

当前场景中的鼠标的操作有两种：hover和click。因此可以封装两个函数HoverByPicture和ClickByPicture，只需要传入想要点击的模板图片即可。为了验证结果的正确性，还需要一个函数CheckByPicture，来判断case的正确性。

实际的case如下：

test("opencv检测test", async () => {  //hover 文件  await HoverByPicture('./template/wenjian.png');                    //hover 导出安装编码  await HoverByPicture('./template/daochuanzhuang.png');             //点击 全屋家具  await ClickByPicture('./template/quanwujiaju.png');                await pyBell.sleep(5000)  //判断结果中是否出现 预期的结果图  let bool = await CheckByPicture('./template/jieguo.png')          expect(bool).toBe(true)}, 150000)

通过传入模板图片来进行点击的ClickByPicture函数为：（HoverByPicture与CheckByPicture原理相同）

//通过传入模板图片，判断模板在图片中的坐标，并鼠标左键点击async function ClickByPicture(str) {       //截取当前页面的图存到指定目录                                         await pyBell.screenshot({path: "./screenshots/click.png"})                        const { execSync } = require("child_process");  const syncGet = (url) => {    var data = execSync(`python `+url+' '+str).toString();    data = data.split(/\s*[\r\n]+\s*/).filter(function(n){return n})    let position=data[0].split(" ")    return position.map(Number);                                               };  //调用执行python文件，返回模板在图片中的坐标  let position  = syncGet("pipei.py ./screenshots/click.png");     //鼠标左键点击返回的坐标                     await pyBell.mouseClick({x:position[0], y:position[1]}, {button: "left"})         }

pipei.py的代码为

import cv2import numpy as npimport sys one=sys.argv[1]two=sys.argv[2]img_rgb = cv2.imread(one)                                              #读取大图img_gray = cv2.cvtColor(img_rgb, cv2.COLOR_BGR2GRAY)                   #转化为灰度图像  template = cv2.imread(two,0)                                           #读取小图w, h = template.shape[::-1]                                            #获取小图的w和hres = cv2.matchTemplate(img_gray,template,cv2.TM_CCOEFF_NORMED)        #将小图在大图上进行模板匹配，res越接近1，说明匹配程度越高threshold = 0.9                                                        #设置一个阈值，超过这个阈值时，被认为是需要匹配的对象loc = np.where( res >= threshold)x=loc[0]y=loc[1]if len(x) and len(y):    for pt in zip(*loc[::-1]):        cv2.rectangle(img_rgb, pt, (pt[0] + w, pt[1] + h), (0,0,255), 2)    print(pt[0]+w/2,pt[1]+h/2)                                         #如果在大图中匹配到了模板，那么打印出模板在大图中的中心坐标else:    print(0,0)                                                         #如果在大图中没有匹配到模板，那么说明模板在原图中不存在，打印出坐标0，0

最终运行效果：

2.2.4 改进优化

将某个case操作路径下所需要鼠标操作地方截图保存下来，放在一个文件夹下，并按照操作顺序命名：01.png，02.png，03.png.........，jieguo.png

然后封装一个函数，执行case的时候自动遍历获取该文件夹下的所有图片，按照命名顺序依次点击，最后一张jieguo.png图用来check，判断结果。

有时候会遇到hover的操作，或点击后由于网络加载需要等一会才能出现结果的情况时，可以在起文件名字的时候加个字母“h”表示是hover操作，加个字母“t”表示执行完click操作后，等待2s。

这样，完成一个UI自动化case只需要截图保存就行了，降低了编写难度，完成速度也更快，后续有变化也只需要维护该文件夹。

test("opencv检测test", async () => {  let jieguo=await RunCase('./ceshi1/')                    //运行函数，只需要传入case的文件夹地址  expect(jieguo).toBe(true)}, 150000)

三、总结

方法	优点	缺点
目标检测模型训练	进行元素定位与校验，更为灵活，训练效果好的话，任意方案中想要识别的元素都可以被定位出来同时页面变化也不会有很大影响，测试用例更为稳定，方便后期维护	可能需要采集大量目标元素图片数据来进行标注训练，有一定的成本
Opencv模板匹配	不需要进行模型训练，解决了寻找定位元素的麻烦，方便快捷降低了编写自动化用例的成本，提高效率可以识别到通过xpath等传统方式无法定位到的元素能够对一些特殊场景进行用例执行结果校验	需要识别的场景一般比较固定，且元素样式不能发生太大的变化，图片分辨率也会影响元素的定位与校验界面发生较大改变的话，后期用例维护可能存在问题
传统xpath,selector等	定位元素比较准确，不受界面变化的影响	寻找元素比较麻烦，写一条自动化用例耗时比较久有些特殊元素无法定位到，比如全景图等展示类场景，画布中的柜子等

基于图片识别的UI自动化适用于那些界面UI变化不大的业务场景，可以很大提升UI自动化case的编写效率，降低UI自动化的复杂度；对于一些定位比较困难的元素和用例执行结果的校验上，也能够提供很大的帮助。但是对于UI变化比较频繁的业务，用该方法可能需要维护的成本更大。需要结合自身的业务场景来选择最适合的方法，或者多种方法结合使用，提升UI自动化的效能，发挥更大的作用。

推荐阅读

继续滑动看下一个