Macaca Inspector 元素定位神器

做iOS UI自动化获取元素通常使用Appium-desktop 来获取,但实际使用几天后发现这个工具有一个非常尴尬的地方:就是获取页面元素响应速度非常慢,加载老半天等到花儿都谢了,一开始以为是设备的原因,换了几台设备也还是一样慢反应速度。对于习惯了在Android端 UIautomatorViewer获取元素时顺滑般感觉的我,对于目前Appium-desktop工具的速度是显然不能忍受的。于是找到了Macaca Inspector使用了之后才相见恨晚。

Macaca Inspector 简介

阿里开源的Macaca框架中的一个小工具,用于获取App元素信息,该工具比较稳定,响应速度较快 可以给出最简化的xpath信息以及元素xpath的绝对路径,可以支持IOS和Android。

Macaca Inspector 主页地址: https://macacajs.github.io/app-inspector/zh/

环境搭建

Macaca Inspector 同时支持Android 和iOS App元素的获取,由于Android 已经有UIautomatorViewer这个工具可以很方便的获取元素了,所以这里主要分享如何在Mac环境来获取iOS app元素。

Xcode

请在App store中安装 Xcode9 或者更高版本

Node.js

使用brew安装Nodejs,安装命令如下

1
brew install nodejs

安装后使用如下命令安装是否成功

1
2
3
4
atxdeMac-mini:~ atx$ npm -v
6.4.1
atxdeMac-mini:~ atx$ node -v
v8.16.0

libimobiledevice

libimobiledevice用于连接iOS设备,类似于Androidadb。使用如下命令进行安装:

1
brew install libimobiledevice --HEAD

安装后我们使用可以常用命令来检测是否安装成功

1.获取设备的udid

1
2
atxdeMac-mini:~ atx$ idevice_id -l 
6dd5e55bf4204cd5ad8042dc4ecb2b703bbxxxxx

usbmuxd

安装 usbmuxd 以便于通过 USB 通道测试 iOS 真机,不需要测试真机则不用安装

1
brew install usbmuxd

ios-webkit-debug-proxy

应用中如含有 WebView,请安装 ios-webkit-debug-proxy

1
$ brew install ios-webkit-debug-proxy

macaca-cli

安装Macaca命令行工具macaca-cli

1
npm i -g macaca-cli

XCTestWD

  • Macaca 依赖 macaca-ios,而 macaca-ios 依赖安装到真机的 XCTestWD,所以要确保 Macaca 最终调用的 XCTestWD 是安装到真机上的 XCTestWD
  • iOS 真机上的 XCTestWD 需要签名(TEAM_ID),且和被测试的app一样。

TEAM_ID获取

  • 获得TEAM_ID首先要需要获得Apple开发者证书,这个可以自己申请或者向公司申请。然后使用XCode创建一个新的项目或者打开已有的Xcode项目,如下图所示 Signing certificate 栏中最后括号里面的就是TEAM_ID

team_id

  • 然后安装有 TEAM_IDmacaca-ios
    1
    2
    # 安装有 TEAM_ID 的 macaca-ios
    $ DEVELOPMENT_TEAM_ID=TEAM_ID npm i macaca-ios -g

调试XCTestWD

  1. 安装完成后使用Xcode打开XCTestWD工程文件,默认安装路径如下:

    1
    /usr/local/lib/node_modules/app-inspector/node_modules/xctestwd/XCTestWD/XCTestWD.xcodeproj
  2. 打开之后如下图所示,依次将XCTestWDUITestsXCTestWDUnitTest的证书配置好。

XCTestWDUITests
XCTestWDUITests

XCTestWDUnitTest
XCTestWDUnitTest

  1. 如下图所示,选中XCTestWDUITests菜单

product-sheme

  1. 连接好设备,选择对应的真机设备。

destination.png

  1. 最后点击 Product->Test 会在设备上安装一个XCTestUI的App。

XCTestUIapp

app-inspector 安装

TEAM_ID 通过环境变量传入覆盖安装App Inspector,注意修改TEAM_ID 为你个人真实的TEAM_ID

1
DEVELOPMENT_TEAM_ID=TEAM_ID npm install app-inspector -g

重新执行Product->Test,然后可以关闭xcode了

启动app-inspector

使用如下命令启动,

1
app-inspector -u  udid  --verbose

启动成功后控制台会显示查看地址

1
inspector start at: http://电脑ip:5678

然后在浏览器里面打开输出的链接,即可查看元素。

macaca-inspctor-view.gif

报错相关

  1. XCTestWD路径错误
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /usr/local/lib/node_modules/app-inspector/node_modules/xctestwd/XCTestWD
    >> xctest-client.js:58:14 [master] pid:1513 project path not found
    Error: >> xctest-client.js:58:14 [master] pid:1513 project path not found
    at Logger.error (/usr/local/lib/node_modules/app-inspector/node_modules/xlogger/lib/xlogger.js:169:9)
    at XCTest.checkProjectPath (/usr/local/lib/node_modules/app-inspector/node_modules/xctestwd/lib/xctest-client.js:58:14)
    at XCTest.init (/usr/local/lib/node_modules/app-inspector/node_modules/xctestwd/lib/xctest-client.js:43:10)
    at new XCTest (/usr/local/lib/node_modules/app-inspector/node_modules/xctestwd/lib/xctest-client.js:39:10)
    at Object.exports.initDevice (/usr/local/lib/node_modules/app-inspector/lib/ios.js:79:12)
    at exports.initDevice.next (<anonymous>)
    at onFulfilled (/usr/local/lib/node_modules/app-inspector/node_modules/co/index.js:65:19)
    at /usr/local/lib/node_modules/app-inspector/node_modules/co/index.js:54:5
    at new Promise (<anonymous>)
    at co (/usr/local/lib/node_modules/app-inspector/node_modules/co/index.js:50:10)
  • 错误原因: 执行XCTestWD.xcodeproj的路径没找到
  • 解决方案:更新XCTestWD路径。特别是环境变量:MACACA_XCTESTWD_ROOT_PATH的路径。
  • 解决步骤:

使用如下命令打开环境变量配置文件

1
vi ~/.bash_profile

然后根据XCTestWD.xcodeproj实际所在路径去添加如下环境变量路径

1
export MACACA_XCTESTWD_ROOT_PATH=/usr/local/lib/node_modules/app-inspector/node_modules/xctestwd/XCTestWD/

然后更新配置文件,验证是否配置生效

1
2
3
4
source ~/.bash_profile  #更新环境变量配置文件

atxdeMac-mini:Test atx$ echo $MACACA_XCTESTWD_ROOT_PATH #验证环境变量配置是否生效
/usr/local/lib/node_modules/app-inspector/node_modules/xctestwd/XCTestWD/

参考资料