通用技术 利用图像识别技术解决非原生控件的定位问题

hello · 2018年10月23日 · 最后由 醋精测试媛 回复于 2020年11月27日 · 6884 次阅读

缘起

前天同桌妹纸问一个控件怎么定位的问题,我张口就来,ID,xpath。。。。。妹纸说这些我都试过了,还是无法定位,不信我 Debug 给你看。N 种方法尝试后,只能接受现实,非原生控件,于是老脸一红,告诉妹纸,这是非原生控件,无法通过常规方式定位。搜索了一下,很多帖子都反映过这个问题,但是都没给出解决策略。不知道这些小伙伴最终有没有解决。遂决定,吃个大闸蟹,研究一下看能否解决。

非原生控件给自动化带来的痛点

  • View 里控件都定位不到
  • 控件随机变化(如支付密码键)
    密码键盘每次页面打开或者页面刷新键位都不一样

  • 常规定位方式无法识别
    智能货架,经常变换的显示位置

常规解决方式

  • 坐标大法:但是坐标大法对于有些随机变化密码键就无法操作了。
  • 开发配合:给特定的 app 包,解除安全键盘。这种操作无异于饮鸩止渴。

图像识别尝试

由于我们页面控件不会像验证码那么多干扰难识别,现在图形识别技术 Java,Python,C++ 等都非常成熟。一通百度后在 OpenCV 发现了 matchTemplate 方法,在图片中找指定的图片。主要用的以下两种方法:

  • 使用 OpenCV 函数 matchTemplate 在模板块和输入图像之间寻找匹配,获得匹配结果图像
  • 使用 OpenCV 函数 minMaxLoc 在给定的矩阵中寻找最大和最小值 (包括它们的位置).

具体实现

  1. 截取图

    1. 滑动到非原生控件,使元素可见
    2. 截取截目画面即为原图像
    3. 用画图工具打开原图像(不要人为放大或者缩小原图像),截取非原生控件的图像即为模板图像
    4. 原图像:
    5. 如下用画图工具打开,保证分别率不变下截取目标图像作为模板图像
    6. 模板图像(非原生控件图像)
  2. 取坐标

    1. 执行 OpenCV 函数 matchTemplate 获取坐标
    2. 为方便公司同事和社区伸手党使用,直接上码 LvmamaKit 代码工程 Git 传送门,调用 LvmamaKit.find2BElementPoint4Debug 会在原图像上标识出是否匹配成功
    3. 第二步成功后,调用 LvmamaKit.find2BElementPoint 返回 Json 格式坐标
    4. 回显示意图,忽略图片失真 5.返回坐标,自行计算出中心坐标 {"x":"309","y":"854","width":"105","height":"82"}
  3. 点坐标

    1. 拷贝返回的坐标,进行相对计算
    2. 点击相对坐标,完成你的自动化用例
  4. 识别密码
    1.密码键盘,1-9 随机变,图像识别妥妥的搞定。 示意图

  5. 搞定收工

    1. 明天可以给妹子解决非原生控件的定位问题咯

参考资料

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
共收到 46 条回复 时间 点赞
hello Appium 是否无法定位非原生控件? 中提及了此贴 10月24日 09:27
hello 求助-非原生控件如何测试 中提及了此贴 10月24日 09:27
hello h5 界面元素无法定位,如何解决 中提及了此贴 10月24日 11:15

赞,这方法很不错

hover 回复

谢谢,希望可以给你带来一点点便利

图像识别好用,但注意模板问题,你这个我们的工具算成熟解决了。用在项目上了~

chenyouan 回复

我刚起步,有啥坑,大神可否分享一下下

6,解决我一个问题

hello #45 · 2018年10月24日 Author
群主是狗 回复

😂 我的问题没解决。大神你帮我看看我另外一个帖子的问题。https://testerhome.com/topics/16510 如何快速改 ios 模拟器 host

hello 回复

不好意思。。搞不了。。我目前只搞 android 的

hello #43 · 2018年10月24日 Author
群主是狗 回复

没事,同样谢谢你,我也在搞安卓

如果是你例子中的 有文字 的案例,不需要这么麻烦,直接使用 ocr 就可以了。
我之前写了一个 adbui 的 python 库,你可以尝试一下。
https://github.com/hao1032/adbui

hello #41 · 2018年10月24日 Author
tango 回复

多谢分享,我去学习一下。就是不知道 java 有没有同样的库包?

hello 回复

java 没有,你可以看看 ocr 的相关方法,自己用 Java 实现

hello #16 · 2018年10月24日 Author
tango 回复

好的,多谢分享,我研究一下

hello #17 · 2018年10月24日 Author
tango 回复

疼讯的 OCR 确实可以,但是要访问疼讯接口识别图片上的文字,不能匹配单纯图片,应用略有限,但也是不错的选择。多谢分享。👍

hello 回复

是的,我看到你的举例都有文字,所以才说了 ocr 的方案,是个比较方便的选择,不需要提前准备图片。但是对于纯图片的是没法支持的。

hello 回复

我用你文章中的图片识别了一下,基本文字都是识别出来了。

hello #35 · 2018年10月25日 Author
tango 回复

恩,这个 OCR 文字识别确定很强大。

hello #34 · 2018年10月25日 Author
hello 回复

也是很好的方案,因为我们通常文字居多。纯图片的还是比较少的

很有启发,谢谢分享。

hello #32 · 2018年10月26日 Author
西秀岭 回复

客气了。期待你的分享

hello 回复

个人感觉 OCR 的方案并不如你的好,毕竟现在腾讯 OCR 通用图片做的并不好。我上传了一张支付的图片,想要识别里面的数字位置。很遗憾腾讯优图 OCR 连数字 1 都没有识别出来。所以还是建议你暂时用自己的方案

hello #26 · 2018年10月30日 Author
古古阁 回复

数字键盘识别不出来,有点尴尬。

hello 回复

对呀,对于咱们测试来说安全键盘的识别是一个很大的使用方面。很遗憾

hello #28 · 2018年10月30日 Author
古古阁 回复

是的。变换的键盘,图片。。。比较麻烦

转一个,图像识别,文字识别都可以 https://testerhome.com/topics/16503

hello #25 · 2018年10月30日 Author
Smile 回复

👍 不错,搞 Python 的可以研究研究

去年我弄 app 自动化的时候,也是用的 openCV 解决支付键盘键位随机分布的问题.
https://www.jianshu.com/p/5e507f105013

hello #22 · 2018年10月30日 Author
yyy 回复

OpenCV 大法就是好😂

直接用 airtest 图像识别 (doge

hello #35 · 2018年10月31日 Author
汇荔君 回复

恩,底层都是调用 OpenCV

hello #36 · 2018年11月01日 Author
tango 回复

大佬 可以帮忙试一下,这个
能否识别么?

airtest 不能用吗

hello #38 · 2018年11月01日 Author
tt 回复

可以,帮看一下上图那个能否 识别出 R3H8K

yyy 回复


怎么报错了呢

古古阁 回复

就是没识别到你原图的意思. 你把精确度调低一点试试, 0.85 改成 0.6 , 或者重新截图.

yyy 回复

请问你截图用的什么工具,我用微信截的图,要把精度调到 0.3 才能找到

古古阁 回复

这个我忘了..太久了...当时应该是用的 qq 自带的截图...
你可以试试 snipaste

按键精灵手机版

我记得网易的 airtest 也是基于图像识别定位的,楼主调研过吗?

hello #45 · 2018年11月09日 Author
simple 回复

网易 airtest 比较好用,不需要截图,他们的那个资料很少,关于这块的是他们的核心,找不到资料,很尴尬

hello #46 · 2018年11月09日 Author
Zhhh 回复

哈哈哈,可以搞一搞,不过要是搞按键精灵的话网易 airtest 更好使

hello 回复

社区可以联系组织一次技术沙龙,邀请作者来答疑解惑

hello #48 · 2018年11月09日 Author
simple 回复

那真是太棒了,黄易的 Airtest 应该不是先截屏再去找到模板图所在的坐标。非常期待他们能做点分享👍

hello 一招让 IOS 自动化化快的飞起 中提及了此贴 11月09日 15:18
hello 2018 年 度个人测开账单 中提及了此贴 01月25日 18:37

你这个没源码吗老铁

git 上你看一下,好像有

您好,请问我之前有使用过这个问题解决 app 上通过图像识别点击或者判断元素状态的问题,但是在答辩的时候,有公司的同事提出分辨率的问题,这该怎么办呢?

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册