App Inspector-iOS真機功能詳解

前言：

App Inspector：浏覽器端的移動裝置 UI 檢視器，使用樹狀态結構檢視 UI 布局，自動生成 XPaths。官網：

https://macacajs.github.io/app-inspector/cn/

本次教程僅支援iOS，Mac

一、環境安裝：

1、安裝

Node.js

brew install node

2、安裝macaca

npm i -g macaca-cli

3、安裝

ideviceinstaller

brew install ideviceinstaller

4、安裝

usbmuxd

brew install usbmuxd

5、安裝iOS驅動

npm i macaca-ios -g

6、安裝App Inspector

npm install app-inspector -g

二、安裝XCTestWD

1、進入App Inspector安裝目錄下XCTestWD檔案夾，具體路徑參照自己的路徑，可以通過find指令查找。

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

2、用xcode打開XCTestWD.xcodeproj檔案

image.png

3、每個檔案修改Bundle id和添加Team，請按下圖操作步驟更改。Bundle id可自定義。

4、項目檔案直接編譯，test結尾的檔案build for Testing。編譯成功即可。

三、将 TEAM_ID 通過環境變量傳入覆寫安裝App Inspector、iOS驅動

1、擷取你的TEAM_ID ，見下圖。

2、覆寫安裝iOS驅動

DEVELOPMENT_TEAM_ID=TEAM_ID npm i macaca-ios -g

3 、覆寫安裝App Inspector

DEVELOPMENT_TEAM_ID=TEAM_ID npm install app-inspector -g

四、使用App Inspector

1、擷取測試機uuid，并執行以下指令：

app-inspector -u DEVICE-ID

2、chrome浏覽器自動打開位址：http://192.168.21.101:5678/ （推薦用 Chrome 浏覽器）

3、點選頁面元素，即可擷取元素xpath,name

4、若切換頁面，需現在手機上切換，然後重新整理浏覽器，則擷取手機的最新頁面。

以上～