『與善仁』Appium基礎 — 17、元素定位工具（一）

• 2021 年 12 月 5 日
• 筆記
• 測試基礎必會技能 - Appium測試框架

之前我們在做Web頁面自動化測試的時候就說過，元素定位是頁面自動化測試的第一步。

同理App自動化測試的第一步，也是元素的定位。

在APP中定位元素的話，需要藉助一些元素定位工具。

APP中的元素定位工具大致有三種：

• uiautomatorviewer工具
• Appium Inspector工具
• Chrome Inspect工具

提示：本篇文章介紹uiautomatorviewer工具

1、uiautomatorviewer介紹

在開始編寫測試程式碼之前，需要獲取待測應用的UI元素。可以通過uiautomatorviewer工具來獲取應用的介面截圖並分析。

uiautomatorviewer工具獲取當前UI介面的快照，提供一個可視化的介面，來查看UI布局結構，並且可以查看各個控制項的相關屬性。利用這些資訊來選擇特定的UI組件，並創建APP中的自動化UI測試程式碼。

總結：

• uiautomatorviewer工具是專門用來定位Android系統APP中原生頁面中的元素。
• uiautomatorviewer是Android SDK里的一個工具，這個工具在Android SDK目錄下的tools文件夾下。（IOS系統在tools\bin的子目錄下）
• uiautomatorviewer使用簡單，速度也相對比較快。

2、uiautomatorviewer工具打開方式

打開uiautomatorviewer工具，如下圖：

uiautomatorviewer.bat是一個windows系統下的可執行文件，雙擊即可打開。

雙擊打開uiautomatorviewer.bat，先會出現一個黑窗口，然後就會出現一個uiautomatorviewer工具的介面。

3、uiautomatorviewer布局介紹

uiautomatorviewer布局如下圖所示：

整個介面分四個區域：

1. 工作欄區
   在工作欄中共有4個按鈕，從左至右分別用於：
   • 打開已保存的介面快照和布局。
   • 抓取當前手機螢幕截圖（Device Screenshoot uiautomator dump）。
   • 帶有壓縮層次結構的設備螢幕截圖（Device Screenshoot with Compressed Hierarchy (uiautomator dump –compressed)）
     第二按鈕與第三按鈕的區別在於：
     第二按鈕把全部布局呈現出來，而第三按鈕只呈現有用的控制項布局。
     比如存在一個Frame，但只有裝飾功能，那麼點擊第三按鈕時，可能不被呈現。
   • 保存當前螢幕介面的快照和布局。
2. 螢幕截圖區，顯示當前螢幕顯示的布局圖片。
3. 布局區，已XML樹的形式，顯示控制項布局。
4. 控制項屬性區，當點擊某一控制項時，將顯示該控制項屬性資訊。

4、uiautomatorviewer工具的使用

1）uiautomatorviewer工具使用前提

• 打開uiautomatorviewer工具。
• 所測試設備是開機狀態（手機或者模擬器）。
• 確保電腦與設備是鏈接狀態，也就是cmd進入命令行終端，
  輸入adb connect 127.0.0.1:21503鏈接逍遙模擬器，
  輸入adb devices能夠獲取設備名稱。

如果電腦沒有與設備不是鏈接的狀態，點擊uiautomatorviewer工具欄中的第二個按鈕，來抓取手機介面是抓取不到的。

如下圖所示：

2）抓取當前手機的螢幕介面

就是點擊uiautomatorviewer工具欄中的第二個按鈕進行抓取：

說明：點擊完後，設備上的介面就會被同步到這個工具的左側，點擊左側需要查看的控制項，在這個工具的右側就可以看到這個控制項對應的詳細資訊。

提示：

當uiautomatorviewer能夠不能抓取手機螢幕時，可以先關閉和重啟adb服務。

執行命令如下：

• adb kill-server
• adb start-server

3）定位其他頁面里的元素

如果需要繼續定位其他頁面里的元素，先在設備中操作到要定位元素的頁面後，再次點擊工具左上角的拍照按鈕，就可以抓取最新的頁面元素資訊。

例如：

定位完設置APP中介面的元素，我又想定位淘寶首頁的頁面元素。

首先在手機中打開淘寶APP，進入到淘寶APP的首頁。

然後點擊uiautomatorviewer工具欄中的第二個按鈕，來抓取新的介面。

4）保存

點擊保存按鈕，可保存抓取的螢幕截屏和一個.uix文件（XML格式的頁面布局，就相當於頁面源碼）。

我們可以看到文件夾中會有上面說過的兩個文件。

我們也可以對保存的文件進行重命名，方便我們以後的使用和管理。

5）打開已保存的介面快照和布局

點擊打開文件，可以將之前保存好的頁面螢幕截圖和.uix文件導入進來。

點擊OK之後，就選顯示以前保存過的介面資訊了。

如下圖所示：

導入後即可進行元素定位操作。

說明：

我們先介紹uiautomatorviewer工具的使用，關於如何定位頁面中的元素，之後的文章會詳細說明。