Macaca [解锁 UI 自动化新姿势]- Macaca+ 计算机视觉

小斤 · 2017年04月20日 · 最后由 Heroman 回复于 2021年11月09日 · 4217 次阅读

本帖已被设为精华帖！

【解锁 UI 自动化新姿势】- Macaca+ 计算机视觉

OpenCV 是计算机视觉领域广泛使用的开发库之一，现在 Macaca 已集成并提供 OpenCV 能力，用来支撑自动化测试过程中的计算视觉需要。

1 计算机视觉？你能够做什么？

现在的 UI 自动化用例大都使用工具，围绕着各种 id, text, xpath 等信息进行采集和编写，有了 OpenCV 的支持，你可以直接对着 Screen 截图，保存元素图像，然后解锁新姿势：

用作元素验证：输入元素图路径与屏幕截图路径进行 match，确认元素是否出现。
用作元素定位：输入元素图路径与屏幕截图路径，得到元素出现的坐标，进行下一步操作。
有了图像匹配，图像相似度计算，人脸识别等功能，发挥想象力，你可以做得更多！

2 看上去很不错！但我有些顾虑？

Q: 我们用 Macaca 或 Appium 已经写了很多自动化用例，测试框架也都在顺畅运行，接入后会不会破坏当前的和谐？

A：接入成本几乎为零，现有的测试框架和用例无需改造，部署 nodecv-server 后，在需要的地方调用就行。

Q: 我们的自动化用例是 Java 写的，还有 Python 写的，甚至是 C 写的...

A: 没关系，我们已提供 Node.js, Java, Python 的 Sample 供你选择使用，只要你可以发送 post 请求就行。

Q: 我们的用例跑在不同的设备上，需要重复部署吗？

A: 建议部署 nodecv-server，提供服务供多个设备调用（支持 Docker 部署，环境不再是问题），另外，你也可以选择单机直接调用 OpenCV API。

3 好的！我要怎么上车？

3.1 安装 OpenCV

Mac:

$ brew tap homebrew/science
$ brew install opencv

Windows：

网上 Windows 安装 OpenCV 教程非常多，可自行选择参考，建议安装 OpenCV 2.4 版本，此版本稳定。

3.2 截屏

关于自动化用例的截屏，大部分框架都有现成的 API 可以使用，传入保存路径即可，如 Macaca 的 screenshot(path)

关于元素图，可根据当前的实现进行图像文件管理，等同于用例的测试数据部分。

3.3.1 服务调用：

1) 安装部署 Node 服务

$ git clone git@github.com:macacajs/nodecv-server.git --depth=1
$ cd nodecv-server
$ npm i
$ make server

启动服务后，访问本地 Demo Page: http://localhost:9900/opencv/demo

2) 目前支持 Node,Python,Java 的调用方式，以下用法以 Python 为例：

将待匹配图像发送 POST 请求/opencv/findpairs 进行处理，其中 file1 为元素图（小图），file2 为 Screen 截屏（大图）

得到响应为：

{"match":{"result":true,"width":1258,"height":308,"match_x1":184,"match_y1":69,"match_x2":334,"match_y2":112},"urls":[{"name":"nodecv_button.png","url":"d6175319f3319e736a2351c37480bb4f.png"},{"name":"nodecv_page.png","url":"0446ea910f55ddc27f82d8778b836cdf.png"}]}

其中 width 为大图宽，height 为大图高，(match_x1,match_y1) 为匹配矩形区域的左上角坐标，(match_x2,match_y2) 为匹配矩形区域右下角坐标

class nodecvSample:

    def __init__(self, host):
        self.host = host

    def getresult(self, files):
        url = self.host + '/opencv/findpairs'
        res = requests.post(url, files=files)
        try:
            jsonres = json.loads(res.text)
            match_res=jsonres["match"]
            if match_res["result"] == True:
                print "Match"
            else:
                print "Not Match"
        except:
            print "Exception"
        return res.text

if __name__ == '__main__':
    sample = nodecvSample('http://localhost:9900')
    print sample.getresult({
        'file1': ('nodecv_button.png', open('./fixture/nodecv_button.png', 'rb'), 'image/jpeg', {'Expires': '0'}),
        'file2': ('nodecv_page.png', open('./fixture/nodecv_page.png', 'rb'), 'image/jpeg', {'Expires': '0'})
    })

3）除了 findpairs 之外，nodecv-server 目前也提供了 dissimilarity 相似度计算，matchtemplate 模板匹配等服务。

3.3.2 本地 CV 调用

1) 安装 Python OpenCV

$ git clone https://github.com/macaca-sample/cv-sample-python
$ pip install -r requirements.txt

2) 本地调用 OpenCV API 进行开发，目前有 Python 版本 Sample，参考 opencv-sample.py

4 参考资料

联系方式：

微博：小斤陈

Email: shchenxin@aliyun.com

最后打个广告，支付宝国际无线团队正在大力招聘测试开发专家/Senior Engineer，有兴趣欢迎联系！

19 个赞

共收到 25 条回复时间点赞

Duke #1 · 2017年04月20日

不错，找时间试试～

Yuri #2 · 2017年04月20日

666 opencv 这个还是蛮吊的，但是不知道效果咋样

达峰的夏天 #3 · 2017年04月20日

好文，楼主是这方面的大牛，应该能帮到更多人

孟德功 #4 · 2017年04月20日

在http://localhost:9900/opencv/demoMatch中的 Template 点击 click to match template 报错,楼主帮忙看下如何解决!

小斤 #26 · 2017年04月20日 Author

对

孟德功回复

你的输入图方便发我邮箱吗？我看下哪里出了问题

小胖。 #6 · 2017年04月21日

用视觉对比么？其实应该也还有文字（字体，颜色），坐标点（颜色），可以看看按键精灵，基于视图做的。

Zhhh #5 · 2017年04月22日

按键精灵的各种插件死在沙滩上了

万匹丝 #8 · 2017年05月04日

这个 python 的例子，不能用 python3 是吗

9楼已删除

思寒_seveniruby 将本帖设为了精华贴 05月04日 13:45

bauul #11 · 2017年05月04日

以前用过一款老美 Bsquare 的 CountDown 自动化测试工具，就是基于图片识别的

匿名 #12 · 2017年05月08日

运行 python nodecv-server-sample.py，会提示：TypeError: Cannot read property 'name' of undefined，Python：2.7，macOS：10.12

匿名 #13 · 2017年05月08日

弄好了，原来是是楼主给的代码有问题，
可以看出，楼主的代码，“file1，file2” 应该改成 “image1，image2”

匿名 #14 · 2017年05月08日

这个是为什么呀？

小斤 #15 · 2017年05月10日 Author

建议使用 FindPairs，它是提取特征进行匹配的，对图像缩放等情况有更好的普适性。MatchTemplate 是模板匹配。

小斤 #16 · 2017年05月10日 Author

对

万匹丝回复

可以用 python3 模仿例子写一下，发送 HTTP 请求，解析 json 的结果就可以了

Liangjun Jiang #17 · 2017年05月11日

Sample code (https://github.com/macaca-sample/cv-sample-python) 已经更新了，修复了评论中提到的这些问题。也可以用curl直接 post

curl -i -X POST \
  -H "Content-Type: multipart/form-data" \
  -F "image1=@./fixture/T-shirt-logo.jpg" \
  -F "image2=@./fixture/T-shirt.jpg" \
  http://localhost:9900/opencv/findpairs

孟德 #18 · 2017年05月12日

请问我这个是什么情况？

$ make server
/Users/caolinming/Desktop/githubDir/macaca/nodecv-server/node_modules/.1.2.1@bindings/bindings.js:91
  throw err
  ^

Error: Could not locate the bindings file. Tried:
 → /Users/caolinming/Desktop/githubDir/macaca/nodecv-server/node_modules/.1.0.5@nodecv/build/nodecv.node
 → /Users/caolinming/Desktop/githubDir/macaca/nodecv-server/node_modules/.1.0.5@nodecv/build/Debug/nodecv.node
 → /Users/caolinming/Desktop/githubDir/macaca/nodecv-server/node_modules/.1.0.5@nodecv/build/Release/nodecv.node
 → /Users/caolinming/Desktop/githubDir/macaca/nodecv-server/node_modules/.1.0.5@nodecv/out/Debug/nodecv.node
 → /Users/caolinming/Desktop/githubDir/macaca/nodecv-server/node_modules/.1.0.5@nodecv/Debug/nodecv.node
 → /Users/caolinming/Desktop/githubDir/macaca/nodecv-server/node_modules/.1.0.5@nodecv/out/Release/nodecv.node
 → /Users/caolinming/Desktop/githubDir/macaca/nodecv-server/node_modules/.1.0.5@nodecv/Release/nodecv.node
 → /Users/caolinming/Desktop/githubDir/macaca/nodecv-server/node_modules/.1.0.5@nodecv/build/default/nodecv.node
 → /Users/caolinming/Desktop/githubDir/macaca/nodecv-server/node_modules/.1.0.5@nodecv/compiled/6.9.5/darwin/x64/nodecv.node
    at bindings (/Users/caolinming/Desktop/githubDir/macaca/nodecv-server/node_modules/.1.2.1@bindings/bindings.js:88:9)
    at Object.<anonymous> (/Users/caolinming/Desktop/githubDir/macaca/nodecv-server/node_modules/.1.0.5@nodecv/lib/nodecv.js:5:31)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/caolinming/Desktop/githubDir/macaca/nodecv-server/node_modules/.1.0.5@nodecv/index.js:3:18)
make: *** [server] Error 1