iT邦幫忙

2024 iThome 鐵人賽

DAY 22
0
DevOps

建立應用程式 UI 自動化測試 - 以 Robot Framework 為例系列 第 22

[22] Robot Framework 結合 Appium 進行 App 自動化測試 - Appium Inspector 安裝及操作介紹

  • 分享至 

  • xImage
  •  

在前面的章節中,我們有提到在網頁的測試中,我們是如何透過瀏覽器的開發者模式來定位元件的,在手動測試中,我們是透過眼睛看,看完後透過滑鼠點擊元件,鍵盤輸入文字來來執行我們的測試,但是在自動化測試中,我們需要透過腳本來達成以上的行為,因此這個章節將介紹的是,如何透過 appium inspector 這個工具,讓我們可以輕鬆的取得裝置上 App 的特定元素!

什麼是 Appium Inspector?

Appium Inspector 是一個圖形化的工具,允許測試人員在執行測試時檢查移動應用程序的 UI 元素。這個工具的主要目的是幫助使用者了解應用程序的結構、元素屬性,並生成相應的定位 (locators) 來進行自動化測試。

官方文件:https://appium.github.io/appium-inspector/latest/

安裝 Appium inspector

Appium Inspector 是一個圖形化的工具,幫助用戶檢查和操作移動應用的界面元素,方便進行自動化測試設計和調試,下載連結:https://github.com/appium/appium-inspector ,開啟連結後,我們點擊右側欄位的 Release,接著選擇我們電腦的版本進行下載。
https://ithelp.ithome.com.tw/upload/images/20241001/20168859m94bGgAYmE.png

下載安裝後我們將它打開後可以看到以下的畫面:
https://ithelp.ithome.com.tw/upload/images/20241001/20168859Ah55PKoXKc.png

啟動 Appium Inspector 連接裝置

開起 Android 模擬機

在這邊我們以 Android 的模擬機為例,首先我們需要先透過 Android Studio 啟動 Android 模擬機,下圖為啟動模擬機的步驟,但是實際情況會因為 Android Studio 的版本不同而有所不同。
https://ithelp.ithome.com.tw/upload/images/20241001/20168859AIHAs7sLzo.png

啟動 Appium Server

啟動之後接著我們需要請動我們的 appium,appium server 需要再啟動的情況下我們才可以操作 Appium inspector,啟動的方式很簡單,我們需要開啟動終端機,輸入 appium 後便可以啟動 appium server,此時終端機會顯示以下資訊,我們可以在下面的資訊得知當前 Appium 版本,以及我們安裝了哪些 Drivers & plugins,或是我們可以知道我們的 appium 開放哪些 host 讓我們可以調用:

Appium] Welcome to Appium v2.11.3
[Appium] The autodetected Appium home path: /Users/maxtsai/.appium
[Appium] Attempting to load driver uiautomator2...
[Appium] Requiring driver at /Users/maxtsai/.appium/node_modules/appium-uiautomator2-driver/build/index.js
[Appium] AndroidUiautomator2Driver has been successfully loaded in 0.393s
[Appium] Appium REST http interface listener started on http://0.0.0.0:4723
[Appium] You can provide the following URLs in your client code to connect to this server:
	http://127.0.0.1:4723/ (only accessible from the same host)
	http://192.168.31.36:4723/
[Appium] Available drivers:
[Appium]   - uiautomator2@3.7.7 (automationName 'UiAutomator2')
[Appium] No plugins have been installed. Use the "appium plugin" command to install the one(s) you want to use

設定 Appium Inspector

在完成上方的步驟後,在這個步驟我們要來設定我們的 Appium Inspector,今天這個章節我們將以 Android 的裝置為範例,我們需要在 Appium Inspector 設定說,這次要連線的裝置是哪隻,以及這次連線需不需要初始化哪些設定,這部分便是 Appium Session Capabilities 的內容,我們放到其他章節來說,在這邊我們先採用以下的基礎值就好了:

{
  "platformName": "Android",
  "appium:automationName": "uiautomator2",
  "appium:deviceName": "Android",
  "appium:appPackage": "com.android.settings",
  "appium:appActivity": ".Settings"
}

我們將上面的值,一個個複製到左側的方框中,或是在 Json Represention 的區塊,點擊右上角的筆後,將上面的 json 複製貼上,如此一來就準備好囉,針對上面的值我們做個說介紹:

  • platformName: 指定測試所用的設備操作系統。這裡設定為 Android,表示測試將在 Android 設備上運行
  • automationName: 指定要使用的自動化 driver,也就是我們安裝的 appium driver
  • deviceName: 指定測試所用的設備名稱或型號。這裡設定為 Android,通常用於指代任何連接的 Android 設備
  • appPackage: 指定要測試的 App 的包名。這裡設定為 com.android.settings,表示 Android 設備上的“設定” App,我們可以透過 adb shell pm list packages 這個指令取得該裝置上目前的 packages
  • appActivity: 指定應用程序啟動時的主要活動(Activity)
    https://ithelp.ithome.com.tw/upload/images/20241001/20168859d64u7pRiF0.png

完成上面的輸入後,我們點擊 “Start Session” 的按鈕,便可以開始連線,連接上後畫面會跳轉至下方的樣式,我們可以看到下方的畫面分成三個區塊,最左邊是當前連接的裝置即時畫面,中間則是當前畫面的 XML,我們可以在這邊抓取到元件,透過在做左邊點擊元件後,中間的畫面會導航到該點擊元件的位置,最右邊則是會出現該元件的資訊,像是 xpath 及 attritube 資訊等,透過這些資訊可以讓我們在自動化測試中很好的知道需要對哪些元件做互動。
https://ithelp.ithome.com.tw/upload/images/20241001/201688594bcqxsZfsS.png

Appium Inspector 功能介紹

由於 Appium Inspector 功能實在是太多了無法一一列舉,因此在這邊根據一些常見的功能做介紹:

Show Element Handles

當我們今天開啟這個功能後,可以發現畫面中多了許多紅色的標記,這些標記都是可以互動的元件
https://ithelp.ithome.com.tw/upload/images/20241001/20168859eYoJTeBCpX.png

Tap/Swipe By Coordinates

當我們選擇這個功能後,原先點擊最左邊的即時畫面會顯示元件的資訊,變成點擊後模擬在 App 上的操作,這麼做就不需要在切換到手機進行操作了,可以直接在 Appium Inspector 上對裝置操作。
https://ithelp.ithome.com.tw/upload/images/20241001/201688598p2ri0i7bI.png

Refresh Source & Screenshot

當我們今天在手機上操作時,在 Appium Inspector 上是不會即時更新的,因此需要透過點擊這個按鈕來更新當前的畫面。
https://ithelp.ithome.com.tw/upload/images/20241001/20168859uwMYUJleMi.png

Search for element

點擊後會彈出一個視窗,我們可以透過這個視窗來搜尋我們元件在哪,例如:當今天我知道某個元件的 id,但是卻不知道他是屬於畫面中哪個元件的話,可以透過這個搜尋來尋找。
https://ithelp.ithome.com.tw/upload/images/20241001/201688596qXfBH1TaC.png

Quit Session

當今天我們完成使用要退出時可以點擊這個按鈕離開這個 Session,對 Appium 來說,每次的連線都算是一個 Session。
https://ithelp.ithome.com.tw/upload/images/20241001/20168859MWfU8LcY0e.png

Session Information

Session Information 這邊會顯示關於這個 Session 的基本資料,像是我們開啟時用了哪些參數,在畫面的下方還提供產繩這個 Session 觸發的腳本資訊
https://ithelp.ithome.com.tw/upload/images/20241001/20168859w0EuXTBA4f.png

結語

經過這個章節的介紹相信大家對於 Appium Inspector 有些了解了,Appium Inspector 在我們進行 App 自動化測試開發中是不可或缺的工具,它的直觀界面和豐富功能讓測試變得更加簡單和高效,希望這篇文章能夠幫助我們更好的理解並運用 Appium Inspector,為我們的測試工作增添助力。


上一篇
[21] Robot Framework 結合 Appium 進行 App 自動化測試 - Appium Android 環境安裝
下一篇
[23] Appium Session Capabilities 介紹
系列文
建立應用程式 UI 自動化測試 - 以 Robot Framework 為例30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言