Macaca Inspector App元素定位神器

发表于 分类于

做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设备，类似于Android 的adb。使用如下命令进行安装:

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

macaca-ios安装

安装有 TEAM_ID 的 macaca-ios

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

app-inspector 安装

  1. 将 TEAM_ID 通过环境变量传入覆盖安装App Inspector，注意修改TEAM_ID 为你个人真实的TEAM_ID 
1
DEVELOPMENT_TEAM_ID=TEAM_ID npm install app-inspector -g
  1. 如果安装过程中出现如下报错，则需要在安装命令后面补充--production --unsafe-perm=true --allow-root
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    gyp WARN install got an error, rolling back install
    gyp ERR! configure error 
    gyp ERR! stack Error: connect ETIMEDOUT 104.20.23.46:443
    gyp ERR! stack     at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1146:16)
    gyp ERR! System Darwin 18.7.0
    gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
    gyp ERR! cwd /usr/local/lib/node_modules/app-inspector/node_modules/fsevents
    gyp ERR! node -v v14.16.0
    gyp ERR! node-gyp -v v5.1.0
    gyp ERR! not ok

调试XCTestWD

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

    1
    /usr/local/lib/node_modules/app-inspector/node_modules/xctestwd/XCTestWD/XCTestWD.xcodeproj

  2. 打开之后如下图所示，依次将XCTestWDUITests和XCTestWDUnitTest的证书配置好。

XCTestWDUITests
XCTestWDUITests

XCTestWDUnitTest
XCTestWDUnitTest

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

product-sheme

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

destination.png

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

XCTestUIapp

启动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
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    atxdeMac-mini:~ atx$ app-inspector -u ece81864b51f3e0535bf86e9ab24f9209e9727f0 --verbose
    >> request.js:11:12 [master] pid:6335 get remote update info failed.
    >> server.js:16:12 [master] pid:6335 server start with config:
     { port: 5678,
      verbose: true,
      udid: 'ece81864b51f3e0535bf86e9ab24f9209e9727f0',
      ip: '172.28.211.142',
      host: 'atxdeMac-mini.local',
      loaded_time: '2020-01-09 14:49:04' }
    >> app-inspector.js:45:12 [master] pid:6335 server start at: http://172.28.211.142:5678
    process.env.MACACA_XCTESTWD_ROOT_PATH
    /usr/local/lib/node_modules/app-inspector/node_modules/xctestwd/XCTestWD/
    >> xctest-client.js:58:14 [master] pid:6335 project path not found
    Error: >> xctest-client.js:58:14 [master] pid:6335 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/

参考资料