Macaca app inspector-ios真機設備UI查看器

 

前言：

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可自定義。

 

image.png

 

image.png

 

image.png

 

image.png

 

image.png

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

---

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

 

 

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

 

image.png

2、覆蓋安裝iOS驅動

DEVELOPMENT_TEAM_ID=TEAM_ID npm i macaca-ios -g

DEVELOPMENT_TEAM_ID=TUW******YCNF npm i macaca-ios -g

3 、覆蓋安裝App Inspector

DEVELOPMENT_TEAM_ID=TEAM_ID npm install app-inspector -g

DEVELOPMENT_TEAM_ID=TUW******YCNF npm install app-inspector -g

 

xcodebuild -project XCTestWD.xcodeproj -scheme XCTestWDUITests -destination 'platform=iOS,id=b0b1a6******af15b09e3497aaad0e4b47ec26c91' XCTESTWD_PORT=8001 clean test

---

四、使用App Inspector
1、獲取測試機uuid，並執行以下命令：

app-inspector -u DEVICE-ID

        app-inspector -u YOUR-DEVICE-ID --verbose

        出現報錯時清楚緩存   ，npm cache clean --force

 

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

 

image.png

3、點擊頁面元素，即可獲取元素xpath,name
4、若切換頁面，需現在手機上切換，然后刷新瀏覽器，則獲取手機的最新頁面。

 

來自 ：https://www.jianshu.com/p/2ec6f0a1f45a