MacOS系统下App Inspector的详细安装和配置

App Inspector是浏览器端的移动设备UI查看器，可以看到UI布局的树状XML结构，可以自动生成xpath，可以兼容Android和IOS。
本教材详细说明了App Inspector的安装和配置过程，并附带了每个步骤中遇到的坑及解决办法。

环境需要

安装Node

要安装 ​​app-inspector​​​, 你需要首先安装 ​​Node.js​​。

brew install node
node -v
npm

国内用户可以安装 ​​cnpm​​​ 加快 NPM 模块安装速度。
个人不大喜欢用cnpm，但是可以用淘宝的registry。
有两种方式配置​​​registry​​，一种是在npm加参数，如下：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

另外一种就是配置全局registry，更推荐这种。

npm config set

安装 ​​macaca-cli​​

$ npm install

如果报权限问题，就加个​​sudo​​​。
另外就是把/usr/local/lib加上当权用户所属：

sudo chown

安装IOS驱动

npm

安装WebView驱动

brew install

安装ideviceinstaller

用来给真机安装APP

brew install

安装usbmuxd

方便通过USB测试IOS真机

brew install

​​Android​​​ 请安装 ​​Android SDK​​​，iOS 安装 ​​Xcode​​。

安装JDK

下载地址：
链接: https://pan.baidu.com/s/1130Opi5pf8GvNsPmUMvnIQ 密码: slvw

运行安装程序之后，需要配置​​JAVA_HOME​​

open

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_211.jdk/Contents/Home
export CLASS_PATH=$JAVA_HOME/lib

PATH="$JAVA_HOME/bin:${PATH}"
export

# 生效
source .bash_profile

# 验证

java version "1.8.0_211"
Java(TM) SE Runtime Environment (build 1.8.0_211-b12)
Java HotSpot(TM) 64-Bit Server VM (build 25.211-b12, mixed mode)

安装Android SDK

如果不用安卓，可以略过此步。

下载地址：
​​​ https://www.androiddevtools.cn​​

新建目录​​Android/sdk​​，并把sdk拷贝过去。

mkdir -p /Users/xintong/Library/Android/sdk
cp -R /Users/xintong/Downloads/android-sdk-macosx /Users/xintong/Library/Android/sdk
cp

配置​​ANDROID_HOME​​

cd ~
open

export ANDROID_HOME=/Users/xintong/Library/Android/sdk/android-sdk-macosx


PATH="$JAVA_HOME/bin:$ANDROID_HOME:$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools:${PATH}"
export

# 使得配置生效
source .bash_profile

# 检测
adb devices

# 打开SDK Manager， 安装一些必须的包
cd /Users/xintong/Library/Android/sdk/android-sdk-macosx/tools
sudo

检测环境

然后使用 ​​macaca​​ 命令行工具检测环境是否准备好。

$ macaca doctor

如果报错

Not accepted Android SDK license agreements

可以运行如下命令，新建license

mkdir "$ANDROID_HOME/licenses"
echo -e "\n8933bad161af4178b1185d1a37fbf41ea5269c55" > "$ANDROID_HOME/licenses/android-sdk-license"

如果你看到一堆绿色的文字输出了，说明你的这个环境是 OK 的。然后你就可以安装使用 ​​app-inspector​​。

安装app-inspector

$ npm install

快速开始

需要先查找​​DEVICE ID​​：

xcrun simctl list

有类似 XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX 的就是UDID。
还可以通过XCode菜单获取Hardware - devices - manage devices
安卓下就用​​​adb devices​​查看。

从命令行启动

# 不需要真机

真机

以上在模拟器下运行没问题，在真机下，还需要配置一些：
查看真机设备ID：

idevice_id -l

用Finder（访达）Command + Shift + G 访问目录：

/usr/local/lib/node_modules/app-inspector/node_modules/xctestwd/XCTestWD

用XCode打开​​XCTestWD.xcodeproj​​

给加上​​XCTestWDUITests​​​加上​​Team​​，也就是开发者账号。

重新编译，​​Product ： Build For：Test​​​。获取​​TEAM_ID​​

DEVELOPMENT_TEAM_ID=TEAM_ID npm i app-inspector -g

# 启动

如果项目还用到了Facebook的WDA，那有可能会冲突，需要更改​​Bundle Identifier​​。

参考

​​https://macacajs.github.io/zh/guide/environment-setup.html#ios-%E7%8E%AF%E5%A2%83​​​​​​

​​ https://macacajs.github.io/app-inspector/zh/guide/get-device-id.html#ios​​​

https://github.com/macacajs/app-inspector
启动app-inspector报Internal Server Error
Appium
https://testerhome.com/topics/13273
macaca-ios
https://github.com/macacajs/macaca-ios
XCTest
https://developer.apple.com/documentation/xctest
https://www.jianshu.com/p/2ec6f0a1f45a