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

目錄

• 1、Appium Inspector介紹
• 2、Appium Inspector開啟方式
• 3、Appium Inspector佈局介紹
• 4、Appium Inspector工具的配置
• 5、Appium Inspector工具的使用
• 6、UIAutomatorviewer工具和Appium Inspector工具對比

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

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

提示：本篇文章介紹Appium Inspector工具。

1、Appium Inspector介紹

之前我們說過Appium Server有兩種啟動方式，

• 一種是Appium Desktop有圖形介面的啟動方式，稱之為桌面版；
• 另一種版本是通過npm安裝，使用命令列引數啟動的Appium Server。

而Appium Inspector工具就在Appium Desktop中，Appium Inspector是Appium Desktop附帶的一個元素定位檢查器，用來除錯定位應用程式很方便。

Appium Inspector工具同時支援Android系統和IOS系統中原生介面的元素定位。

2、Appium Inspector開啟方式

Appium Desktop安裝完成之後，雙擊開啟。

說明：介面有 3 個 Tab 選項

• Simple：預設配置，監聽本機 4723 埠；
• Advanced：高階設定，可以自定義Appium server端的配置，配置好後可以儲存到Presets；
• Presets：修改Advanced高階設定中的配置項。

一般我們測試直接使用Simple即可，點選 Start Server 按鈕，啟動Appium server，並開啟監聽本機 4723埠。

開啟服務後，介面跳轉到服務端控制檯，如下圖所示：

提示：

控制檯顯示執行的指令碼中的日誌資訊，右上角有 3 個按鈕，分別是：

• 第一個按鈕 Start Inspector Session，開啟Appium Inspector定位工具；
  注意：inspector會新開一個Session；
• 第二個按鈕Get Raws Logs，下載當前控制檯中的log資訊；
• 第三個按鈕Stop Server，關閉當前的Appium server。

有兩種方式可以開啟Appium Inspector工具，

• 方式一：點選右上角三個按鈕中的第一個（一個放大鏡樣子的按鈕），開啟Appium Inspector工具。
• 方式二：點選左上角File-->New Session Window... Ctrl+N也可以開啟Appium Inspector工具。

如下圖：

Appium Inspector工具開啟後的介面如下圖：

3、Appium Inspector佈局介紹

Appium Inspector佈局如下圖所示：

上圖說明：

1. 佈局1是Appium Inspector服務的設定。
   Automatic Server ：自動伺服器。
   Custom Server ：定製伺服器。
   Select Cloud Providers ：選擇雲提供商。
   我們一般使用Automatic Server即可：
   Will use currently-running Appium Desktop server http://localhost:4723
   將使用當前執行的Appium桌面伺服器http://localhost:4723。
2. 佈局2是高階設定。
   可以設定：
   Allow Unauthorized Certificates：允許未經授權的證書。
   Use Proxy：使用代理伺服器。
   初學一般我們不進行高階設定。
3. 佈局3是Desired Capabilities引數設定。
   Desired Capabilities： 編寫Desired Capabilities引數。
   Saved Capability Sets：已儲存的Desired Capabilities，可以進行檢視和修改。
   Attach to Session...：附加到會話...（用到的時候在說）

4、Appium Inspector工具的配置

1）Appium Inspector工具使用前提

• 開啟Appium Desktop，開啟Appium Inspector工具。
• 所測試裝置是開機狀態（手機或者模擬器）。
• 確保電腦與裝置是連結狀態，也就是
  cmd進入命令列終端，
  輸入adb connect 127.0.0.1:21503連結逍遙模擬器，
  輸入adb devices能夠獲取裝置名稱。

2）Appium Inspector的伺服器設定和高階設定

• 伺服器設定：選擇Automatic Server（一定要記得點選一下，進行選中）
• 高階設定：不進行設定

3）編寫Desired Capabilities引數（重點）

可以在左側一行一行手動新增，如下圖所示：

提示：第二列的格式是針對第三列value值而言的。

也可以把Json格式的資料編輯好，直接貼上在右側JSON Representation裡。

直接把Json格式的資料直接貼上過來。

點選儲存之後，資料會同步到左側，如下圖所示：

4）儲存Desired Capabilities引數

如有需要，在編輯完成Desired Capabilities引數之後，可以對其進行儲存，方便以後的管理和使用。

5）檢視和修改已儲存的Desired Capabilities

點選Saved Capability Sets標籤頁，可以檢視和修改已儲存的Desired Capabilities。

6）開啟Session，連線手機獲取手機介面

點選Start Session，開啟使用Appium Inspector工具。

如下圖所示：

說明：

• Appium Inspector需要我們手動建立一個session，其實也就是一個客戶端，和Appium server連線，並且需要在Desired Capabilities裡面填入一些引數。
• 所需功能是在Desired Capabilities物件中編碼的鍵和值，當請求新的自動化會話時，由Appium客戶端傳送到Appium Server伺服器。Desired Capabilities告訴Appium驅動程式有關您希望測試如何工作的各種重要資訊。最終Desired Capabilities將作為JSON物件傳送到Appium。
• 所需功能的Desired Capabilities物件可以在WebDriver測試中編寫指令碼，也可以在Appium Server GUI中設定（通過Inspector會話中，就是上邊的介紹方式）。

提示：

當Appium Inspector能夠不能抓取手機螢幕時，可以關閉和重啟adb服務，或者重啟Appium Inspector服務。

命令如下：

• adb kill-server
• adb start-server

5、Appium Inspector工具的使用

（1）Inspector 定位控制元件介面的詳細介紹

上圖說明：

• 佈局1：截圖的手機介面
  可以點選選擇元素。
• 佈局2：頂部操作欄
  從左往右的按鈕依次是
  Select Element：選擇元素。
  Swipe By Coordinates：選擇滑動的起始和結束位置。
  Tap By Coordinates：使得手機介面變換可操作狀態，可以點選介面的元素。
  Back：模擬Android的返回鍵。
  Refresh Source & Screenshot：重新整理頁面，用來重新獲取手機當前介面。
  Start Recording：錄製操作。
  Search for element：校驗定位表示式。
  Copy XML Source to Clipboard：複製XML樹。
  Quit Session & Close Inspector：退出當前Session。
• 佈局3：XML樹
  以XML樹的形式，展示介面上的控制元件佈局。
• 佈局4：控制元件屬性區域
  選擇某個控制元件，在這裡可以顯示該控制元件的所有屬性和值。

（2）Selected Element 的介紹

選擇元素功能：

1）頂部的Tap、Send Keys、Clear

模擬使用者的操作：

• tap：相當於點選該元素。
• send keys：輸入值，針對輸入框的操作。
• clear：清空所有值。

建議：不建議用這些操作，因為很容易造成斷開連線（左側介面一直loading）....反正我這邊經常這樣，如果不會的話當然最好用啦！

2）Find By xpath

提供了該元素的XPATH表示式

不推薦用，絕對路徑太長了..........還是自己寫吧！

3）那串黃色背景色的英文

不建議使用XPath定位器，因為它很脆弱，建議讓開發團隊提供獨特的可訪問性定位器（即：resource-id）

4）Attribute - Value

屬性列表。

（3）Search for element 的介紹

搜尋元素功能，位置如下圖：

點選彈出如下介面：

選擇定位策略，如下圖：

填寫對應的定位表示式，如下圖：

點選Search就可以進行元素定位了。

如果能找到Elements的話表示式就是正確的，然後你還可以針對該元素進行一些操作。

（4）在Appium Inspector中操作手機

當我們使用Appium Inspector定位工具獲取到手機設定APP介面的時候，如下圖：

點選頂部操作欄中的Tap By Coordinates按鈕，使得手機介面變換可操作狀態。

然後我們在左側的手機介面中點選顯示，就可以進入到顯示的介面中了。

進入到顯示之後，現在我們還是保持在可操作手機的狀態。

之後我們就可以繼續操作手機，也可以點選Select Element按鈕，在當前頁面中進行選擇的元素。

我們也可以點選Back按鈕，返回到設定APP的首介面。

提示：這一點Appium Inspector定位工具就比uiautomatorviewer定位工具方便多了。

（5）Start Recording 的介紹（瞭解）

• 操作步驟：點選開始錄製之後，再點選Tap By Coordinates，進入介面可操作狀態。
• 然後就可以開始點選你想要的元素了，這個時候就開始錄製了。
• 最後在Recorder下面會顯示對應的程式碼，右側可以選擇不同的語言。
• 建議：不要過多使用該功能，可以看到錄製的程式碼是根據座標去定位元素的，換個手機同一個元素座標可能就不同了，可移植性不高。

6、UIAutomatorviewer工具和Appium Inspector工具對比

（1）UIAutomatorviewer 的侷限性：

1. 不能校驗我們寫的定位表示式是否正確定位到控制元件（類似瀏覽器上的F12）。
2. 連線不夠穩定。
3. 不能模擬使用者動作。

（2）Appium Desktop的Inspector的優勢：

1. 可以校驗定位表示式（如：XPATH表示式）。
2. 通過設定Desired Capabilities來連線手機，比較穩定。
3. 可以模擬使用者動作（如：點選，返回，滑動等操作）。
4. 可以錄製一系列操作，然後轉換成程式碼。

提示：

學習或者編寫指令碼過程中，使用桌面版會方便一些，因為桌面版還提供了定位工具。

而實際執行的時候，使用Server版本會更靈活、更容易與CI工具進行整合。

說明：

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

參考：

• https://www.jianshu.com/p/c8b8fa0fadf9
• https://www.cnblogs.com/poloyy/p/12918402.html