Android&iOS App元素定位利器——Macaca Inspector

2021-08-09 10:58:40 浏览数 (1)

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,安装命令如下

代码语言：javascript复制
brew install nodejs

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

代码语言：javascript复制
atxdeMac-mini:~ atx$ npm -v
6.4.1
atxdeMac-mini:~ atx$ node -v
v8.16.0

libimobiledevice

libimobiledevice用于连接iOS设备，类似于Android 的adb。使用如下命令进行安装:

代码语言：javascript复制
brew install libimobiledevice --HEAD

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

1.获取设备的udid

代码语言：javascript复制
atxdeMac-mini:~ atx$ idevice_id -l
6dd5e55bf4204cd5ad8042dc4ecb2b703bbxxxxx

usbmuxd

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

代码语言：javascript复制
brew install usbmuxd

ios-webkit-debug-proxy

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

代码语言：javascript复制
$ brew install ios-webkit-debug-proxy

macaca-cli

安装Macaca命令行工具macaca-cli

代码语言：javascript复制
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
代码语言：javascript复制
# 安装有 TEAM_ID 的 macaca-ios
$ DEVELOPMENT_TEAM_ID=TEAM_ID npm i macaca-ios -g
调试XCTestWD
  1. 安装完成后使用Xcode打开XCTestWD工程文件，默认安装路径如下:
代码语言：javascript复制
 /usr/local/lib/node_modules/app-inspector/node_modules/xctestwd/XCTestWD/XCTestWD.xcodeproj
  1. 打开之后如下图所示，依次将XCTestWDUITests和XCTestWDUnitTest的证书配置好。

XCTestWDUITests

XCTestWDUnitTest

  1. 如下图所示，选中XCTestWDUITests菜单
  1. 连接好设备，选择对应的真机设备。
  1. 最后点击 Product->Test 会在设备上安装一个XCTestUI的App。

app-inspector 安装

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

代码语言：javascript复制
DEVELOPMENT_TEAM_ID=TEAM_ID npm install app-inspector -g

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

启动app-inspector

使用如下命令启动,

代码语言：javascript复制
app-inspector -u  udid  --verbose

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

代码语言：javascript复制
inspector start at: http://电脑ip:5678

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

报错相关

  1. XCTestWD路径错误
代码语言：javascript复制
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的路径。
  • 解决步骤：

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

代码语言：javascript复制
vi ~/.bash_profile

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

代码语言：javascript复制
export MACACA_XCTESTWD_ROOT_PATH=/usr/local/lib/node_modules/app-inspector/node_modules/xctestwd/XCTestWD/

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

代码语言：javascript复制
source ~/.bash_profile  #更新环境变量配置文件

atxdeMac-mini:Test atx$ echo $MACACA_XCTESTWD_ROOT_PATH #验证环境变量配置是否生效
/usr/local/lib/node_modules/app-inspector/node_modules/xctestwd/XCTestWD/
ios xcode android 网络安全 html

0 人点赞