開始使用 Appium 進行視覺回歸測試
已發表: 2023-09-17
現今的軟體需要跨多個平台和裝置的無縫用戶體驗。 該領域最具挑戰性的方面之一是維護應用程式的視覺完整性。 這就是視覺回歸測試 (VRT) 發揮作用的地方，它提供了一種簡化的方法來捕捉可能被忽視的視覺錯誤和不一致之處。 對於那些希望開始使用 VRT 的人來說，Appium 提供了一個強大的、可擴展的框架，可以在各種平台上自動執行此類測試。
此外，像LambdaTest這樣的服務為視覺回歸測試提供了人工智慧驅動的測試編排和測試執行解決方案，使團隊無需設定和管理自己的測試基礎設施。 這種雲端方法提供對各種真實瀏覽器和裝置的按需訪問，允許跨多個環境進行並發測試，減少測試執行時間，並確保 Web 應用程式外觀和功能的一致性。 LambdaTest 還提供詳細的測試報告，並與流行的測試框架集成，以快速識別和解決問題。
在本文中，我們將探討使用 Appium 開始使用 VRT 的基礎知識，以便您可以將測試策略提升到新的水平。
什麼是視覺回歸測試？
視覺回歸測試是一種驗證技術，用於確保對應用程式所做的更改不會對應用程式使用者介面 (UI) 的視覺呈現產生不利影響。 其主要目標是確認佈局和視覺元素符合預先定義的期望，從而保證完美的視覺使用者體驗。 這些視覺檢查涵蓋各種屬性，例如按鈕、選單、組件、文字等的位置、亮度、對比和顏色。 此方法有時也稱為視覺化測試或 UI 測試。
視覺迴歸測試如何進行？
從本質上講，視覺回歸測試的運作方式是在修改之前捕獲 UI 的快照，然後將它們與修改後的螢幕截圖進行比較。 隨後，任何差異都會被突出顯示，以供測試工程師檢查。 在實踐中，有多種技術可以進行視覺回歸測試。 下面為您列出了一些最常用的：
手動目視測試
此方法涉及手動檢查 UI，無需使用專門工具。 設計師和開發人員在每次發布期間都會花時間對頁面進行目視檢查，積極尋找任何視覺缺陷。 雖然這種方法在應用於整個應用程式時可能很費力並且容易出現人為錯誤，但它對於臨時或探索性 UI 測試非常有用，尤其是在開發的早期階段。
逐像素比較
該技術會在像素層級仔細檢查兩個螢幕截圖，提醒測試工程師任何差異。 像素比較（也稱為像素差異）可以識別所有潛在問題，但它也可能標記許多人眼無法察覺且不影響可用性的無關緊要的差異（例如，渲染變化、抗鋸齒或填充/邊距差異） ） 。 測試工程師必須在每次測試運行中仔細篩選這些「誤報」。
基於 DOM 的比較
此比較方法依賴分析狀態變更之前和之後的文件物件模型 (DOM) 並識別差異。 雖然可以有效地突出顯示 DOM 中與程式碼相關的修改，但它無法提供真正的視覺比較。 當程式碼保持不變但 UI 不斷變化（例如，動態內容或嵌入內容）或當程式碼變更但 UI 保持靜態時，通常會產生誤報或誤報。 因此，測試結果可能不一致，需要仔細檢查以防止忽視視覺缺陷。
視覺人工智慧比較
採用視覺 AI 的視覺回歸測試利用電腦視覺以類似於人類的方式感知 UI。 訓練有素的人工智慧可以透過專門標記人類觀察者會注意到的差異來幫助測試工程師，從而消除解決像素和 DOM 比較測試中常見的「誤報」問題的艱鉅任務。 此外，視覺人工智慧可以評估動態內容並僅識別意外區域或區域中的問題。
進行視覺迴歸測試的原因
本節解釋了在應用程式中執行視覺回歸測試的最堅實的理由。 所以，繼續閱讀…
確保視覺一致性
視覺回歸測試有助於確保行動應用程式的 UI 和視覺元素在不同版本、裝置和平台上保持一致。 這種一致性對於提供無縫的使用者體驗非常重要。
驗證設計變更
當應用程式進行設計變更時，視覺回歸測試可以驗證這些變更是否已正確實施並且沒有引入意外的視覺問題。
更快的回饋循環
視覺回歸測試可以為開發人員和設計人員提供快速回饋，使他們能夠在開發週期的早期解決問題。 這減少了嚴重視覺缺陷到達生產的機會。
改善使用者體驗
視覺故障和不一致會對使用者體驗產生負面影響並損害應用程式的聲譽。 透過視覺回歸測試發現這些問題，您可以提高使用者滿意度。
UI 庫的回歸測試
如果您的應用程式使用第三方 UI 程式庫或框架，視覺回歸測試有助於確保這些程式庫的更新不會引入不必要的視覺變更。
使用 Appium 進行視覺回歸測試的入門步驟
使用 Appium 進行視覺回歸測試涉及比較應用程式使用者介面的視覺元素，以檢測應用程式不同版本之間任何意外的視覺變化。 以下是開始使用 Appium 進行視覺回歸測試的步驟：
第1步：設定Appium和測試環境
首先，請確保您的系統上安裝並設定了 Appium。 您還需要適合您的首選程式語言（例如 Java、Python）的 Appium 用戶端程式庫。 另外，為您的測試環境安裝任何必要的依賴項和工具。
步驟2：準備測試影像
在執行視覺回歸測試之前，您需要一組代表應用程式螢幕預期外觀的基線影像。 透過在各種裝置/模擬器上運行您的應用程式並截取每個螢幕的螢幕截圖來擷取這些基線影像。 將這些影像儲存在專案內的指定資料夾中。
第 3 步：實施測試腳本
使用 Appium 用戶端程式庫編寫測試腳本，以自動執行擷取螢幕截圖和執行視覺比較的過程。 您的測試腳本應該執行以下操作：
- 初始化 Appium 驅動程式以在特定裝置/模擬器上啟動應用程式。
- 瀏覽應用程式的螢幕，執行觸發 UI 變更的操作。
- 使用 Appium 的螢幕截圖功能擷取螢幕截圖。
- 將捕獲的螢幕截圖保存在單獨的資料夾中以進行比較。
以下是使用 Appium Java 用戶端的 Java 程式碼的範例：
``java
導入 io.appium.java_client.AppiumDriver;
導入 io.appium.java_client.MobileElement;
導入 io.appium.java_client.android.AndroidDriver;
導入 org.openqa.selenium.remote.DesiredCapability；
導入java.net.URL；
公共類視覺迴歸測試{
公共靜態無效主（字串[] args）拋出異常{
// 設定 Appium 驅動程式所需的功能
DesiredCapability 上限 = new DesiredCapability();
caps.setCapability("platformName", "Android");
caps.setCapability("deviceName", "emulator-5554");
caps.setCapability("appPackage", "your.app.package");
caps.setCapability("appActivity", "your.app.activity");
// 初始化Appium驅動
AppiumDriver<MobileElement> driver = new AndroidDriver<>(new URL("https://localhost:4723/wd/hub"), caps);
// 執行操作並擷取螢幕截圖
// ...
// 儲存截圖以便比較
// ..
// 關閉驅動
驅動程式.quit();
}
}
````
第 4 步：實施視覺比較邏輯
對於視覺回歸測試，您需要一種機制來將捕獲的螢幕截圖與基線影像進行比較。 您可以使用「Resemble.js」或「Pixelmatch」等影像比較庫來執行逐像素比較並計算視覺差異。
第 5 步：斷言和報告
在您的測試腳本中，根據視覺比較的結果實施斷言。 如果視覺差異超過一定閾值，則認為測試失敗。 產生詳細說明測試結果的報告，包括檢測到的任何視覺差異。
第 6 步：持續整合 (CI)
將視覺回歸測試整合到 CI/CD 管道中，以確保它們在程式碼變更或新版本發佈時自動運行。 這有助於在開發過程的早期發現視覺回歸。
第 7 步：維護基線影像
隨著應用程式的發展，您需要更新基準圖像以匹配新的預期外觀。 這可確保合法的 UI 變更不會被誤認為是回歸。
使用者如何在 LambdaTest 上使用 Appium 執行 VRT？
以下是使用者如何在 LambdaTest 上使用 Appium 執行視覺回歸測試：
設定 LambdaTest 帳戶
首先，如果您還沒有 LambdaTest 平台帳戶，請建立帳戶。 您將需要此帳戶來存取他們的測試基礎設施。 然後，確保安裝 Appium 和所有依賴項，如上所述。
編寫測試腳本
開發您的 Appium 測試腳本以與您的行動應用程式互動。 這些腳本應包括瀏覽應用程式並捕獲關鍵元素或螢幕的螢幕截圖的步驟。
配置 LambdaTest 功能
修改您的 Appium 腳本以包含 LambdaTest 特定的功能。 這包括指定所需的平台 (iOS/Android)、瀏覽器版本、裝置類型和 LambdaTest 憑證（使用者名稱和存取金鑰）。
在 LambdaTest 上執行測試
將您的 Appium 測試腳本上傳到 LambdaTest 的平台。 LambdaTest 提供了一個 Selenium 網格，您可以在其中執行 Appium 測試。 該網格提供了廣泛的真實設備和瀏覽器用於測試。
執行測試
透過從基於 Web 的介面觸發測試，在 LambdaTest 的網格上執行測試。 LambdaTest 將在指定的行動裝置和瀏覽器上執行您的測試，並在測試流程中的各個點擷取螢幕截圖。
視覺比較
測試執行後，LambdaTest 產生應用程式不同狀態的螢幕截圖。 您可以使用其內建的視覺比較工具將這些螢幕截圖與基線影像進行比較，以識別任何視覺差異。
回顧與分析
分析 VRT 結果以識別視覺差異。 LambdaTest 提供對視覺變化的洞察，突顯偵測到差異的區域。
自動報告
LambdaTest 提供自動報告功能來追蹤一段時間內的測試結果，從而更輕鬆地識別趨勢並評估變更對應用程式視覺外觀的影響。
使用 Appium 成功進行視覺回歸測試的最佳實踐
以下是使用 Appium 成功進行視覺回歸測試的一些最佳實踐：
選擇可靠的設備和平台矩陣
選擇一組代表目標受眾使用的最重要組合的裝置、作業系統和螢幕解析度。 此矩陣應涵蓋各種設備，以確保您的應用程式在各種配置下看起來一致。
參考影像的版本控制
保留一個受版本控制的參考影像儲存庫，這些參考影像代表您的應用程式在不同裝置和平台上的預期視覺外觀。 這些參考影像將作為回歸測試期間比較的基線。
穩定一致的測試環境
確保每次測試運行的測試環境都是一致的。 這包括在不同的測試運行中使用相同的作業系統版本、Appium 版本和函式庫。 避免對環境進行不必要的更改，否則可能會導致測試出現誤報。
將 UI 變更與功能變更隔離
將視覺回歸測試與功能測試分開。 這使您可以只專注於視覺差異，而不會因功能問題而分心。
容忍預期的視覺差異
並非所有視覺差異都是錯誤。 設定可接受的視覺差異的容忍級別，以考慮較小的 UI 更改，例如可能不會影響整體使用者體驗的字體渲染變化。
動態內容處理
優雅地處理動態內容，例如廣告、用戶生成的內容和即時數據。 您可能需要從比較中排除這些元素，或更新參考影像以考慮這些動態變化。
智慧等待策略
實作智慧等待策略，以確保在擷取螢幕截圖之前應用程式的 UI 元素已完全載入。 這有助於避免因螢幕不完整或部分載入而導致的誤報。
平行執行
如果可行，請跨多個裝置和平台並行執行視覺回歸測試。 這減少了整體測試時間，並確保更快地回饋潛在的視覺差異。
自動報告和通知
設定自動報告和通知，以便在偵測到視覺差異時提醒團隊。 這可確保快速採取行動並最大限度地減少解決問題所需的時間。
定期測試維護
隨著應用程式的發展，更新參考影像並調整測試以適應有意的視覺變化。 定期檢查和維護您的視覺回歸測試，以確保它們保持相關性。
審查並驗證調查結果
在將任何差異視為實際問題之前，請手動檢查螢幕截圖，以驗證差異是否是實際的錯誤，或者只是由動態內容或微小的視覺變化引起的誤報。
連續的提高
不斷評估您的視覺回歸測試策略並根據需要進行調整。 隨時了解最新的工具、函式庫和最佳實踐，以確保測試過程的有效性。
結論
無論您是想識別意外的變更、減少手動 QA 工作，還是只是提高不同裝置和解析度之間的視覺一致性，VRT 都是您測試工具庫中不可或缺的工具。 與任何技術一樣，掌握細微差別需要時間，但在節省時間、減少錯誤和更無縫的用戶體驗方面的好處是巨大的。 那為什麼還要等呢？ 立即開始使用 VRT 和 Appium，將您的行動應用程式測試提升到新的水平。