透過可擴展的雲網格進行自動視覺回歸測試
1. 概述
透過可擴展的雲端網格進行自動視覺回歸測試提供了強大的解決方案，可確保 Web 應用程式在各種瀏覽器、裝置和螢幕解析度上的視覺完整性和一致性。透過利用基於雲端的基礎架構的功能，團隊可以有效率地並行執行視覺回歸測試，從而實現全面的覆蓋範圍和更快的回饋週期。
這種方法提高了檢測視覺差異的準確性，並透過消除手動幹預的需要簡化了自動化測試過程。因此，組織可以對自己的發布更有信心，同時優化資源並加快上市時間。
在本文中，我們將學習如何透過可擴展的雲網格（例如LambdaTest ）自動執行視覺回歸測試。
2. 什麼是視覺迴歸測驗？
回歸測試是一種測試，可確保程式碼的最新變更不會破壞現有功能。
視覺回歸測試涉及檢查應用程式的使用者介面是否符合整體期望以及監視佈局和應用程式的視覺元素。其主要目標是透過在視覺和可用性問題出現之前預防它們來確保使用者體驗 (UX) 具有最佳視覺效果。
透過視覺回歸測試執行的視覺驗證的範例包括：
- 網頁元素的位置
- 亮度
- 對比
- 按鈕的顏色
- 選單選項
- 成分
- 文字及其各自的對齊方式
視覺迴歸測試很重要，原因如下：
- 它可以幫助軟體團隊和利害關係人了解使用者介面的工作方面，以獲得更好的最終用戶體驗。
- 保持直覺的使用者介面可以更好地指導最終用戶。
2.1.視覺錯誤範例
為了展示視覺回歸測試的重要性，讓我們假設我們在 LambdaTest 電子商務遊樂場演示網站上遇到了一個錯誤。這裡的問題是：
- 按鈕標題未對齊並顯示在右側。
- 按鈕的字體大小不符合標準。字體較小，乍看之下不見。
這些錯誤與系統的功能部分無關。但是，由於視覺問題，用戶可能會面臨將產品添加到購物車時遇到的困難。這些錯誤可能會導致最終用戶因使用者介面體驗不佳而退出網站。
在程式碼中應用修復後，讓我們拍攝第二個螢幕截圖：
正如我們所看到的，按鈕上的文字再次可見，可用性問題得到解決。
3. 執行視覺迴歸測試的方法
視覺回歸測試是比較同一應用程式的兩個螢幕截圖的過程。第一個螢幕截圖是在程式碼更改之前從穩定的應用程式版本中截取的，第二個螢幕截圖是在新版本發布後截取的。
測試人員使用手動或自動方法檢查螢幕截圖之間的任何差異。
有多種測試技術可用於執行視覺回歸測試。讓我們在以下幾節中探討一些主要內容。
3.1.手動目視測試
在這種技術中，視覺回歸測試是在沒有任何工具的情況下手動完成的。設計人員、開發人員和測試人員透過查看程式碼變更後應用程式的外觀並將其與模擬螢幕或較舊的建置版本進行比較來執行測試。
通常必須在具有不同螢幕解析度的多個裝置上重複手動視覺回歸測試才能獲得準確的結果。這是一個乏味、耗時且緩慢的過程，很容易出現人為錯誤。至關重要的是，它不需要購買或建立自動化視覺測試軟體的任何前期成本，因此適合開發的初始階段和探索性使用者介面測試。然而，隨著項目的發展，手動測試所需的時間呈指數級增長。
測試腳本通常是一個簡單的電子表格，可用於追蹤測試場景和結果。
由於每個企業都希望其產品能夠快速進入市場，因此建議使用其他方法來執行視覺回歸測試。在年輕的專案中，應用程式會發生頻繁的更改，這使得手動比較影像的任務成為一項乏味的任務。
3.2.逐像素比較
在逐像素比較中，使用自動影像比較工具或框架來比較和分析應用程式的兩個螢幕截圖。第一個螢幕截圖是基線影像（應用程式的參考影像），另一個螢幕截圖是另一個版本的螢幕截圖。這些是逐像素比較的，結果突出了 UI 差異和整體美觀（字體樣式、設計、背景顏色等）
對於大型且快速移動的項目，逐像素方法優於手動比較。然而，比較工具和框架會帶來任何軟體所特有的額外成本：資本、運算資源、維護和可擴展性。
逐像素比較工具使用閾值百分比來過濾結果，它指的是兩張影像之間可接受的相似或不相似程度，有助於分析像素解析度的粒度。
然而，視覺測試本身並不足以保證應用程式的可用性。
3.3.使用視覺 AI 進行比較
基於視覺人工智慧的測試使用人工智慧和機器學習來突出顯示使用者介面錯誤。它們基於電腦視覺來「查看」網站或行動應用程式的視覺元素，並將其與基線版本圖像進行比較。訓練有素的人工智慧可以僅突出顯示相關更改，從而節省測試人員的時間，並產生更準確的結果。
基於人工智慧的測試還利用了測試動態內容的能力，並僅在預計不會發生變化的領域中突出顯示問題。
3.4.基於 DOM 的測試
該技術使用文檔物件模型（DOM）來突出顯示與使用者介面相關的問題。將 DOM 的快照作為基準並與新版本發布進行比較。基於 DOM 的測試僅驗證是否將正確的樣式套用到我們的元素。
基於 DOM 的比較並不是真正的視覺比較。當 UI 變更時，基於 DOM 的測試會大規模產生誤報/漏報，但程式碼不會（例如，在新增動態內容時）。
基於 DOM 的高速測試通常不穩定，應仔細檢查結果以檢查是否有視覺錯誤。相同的 DOM 可能會呈現不同的效果，而不同的 DOM 可能會呈現相似的效果。因此，應該注意的是，基於 DOM 的測試可能會遺漏一些 UI 元素，並且不能保證結果準確。
4.視覺迴歸測試工具
讓我們來探索一些廣泛使用的自動化視覺回歸工具。
4.1.來自 LambdaTest 的 SmartUI
LambdaTest 的 SmartUI 可以對 Web 和行動應用程式執行視覺回歸測試。它允許對兩個影像進行逐像素比較。它支援跨多個瀏覽器、螢幕尺寸和解析度以及基線影像的視覺元素比較。
我們可以使用 webhook 配置將 SmartUI 與自動化測試整合。它還透過向專案添加最多五個審批者/標籤來支援專案協作，以便測試人員之間輕鬆整合。 Slack 等通訊平台可以促進協作，有關測試狀態的即時通知可以幫助快速解決視覺錯誤。
4.2. WebdriverIO 影像比較服務
WebdriverIO 的wdio-image-comparison-service是一項輕量級服務，可比較不同螢幕尺寸、瀏覽器、元素等之間的圖片。它是一個與框架無關的服務，支援 WebdriverIO 支援的所有框架，例如 Mocha 和 Jasmine。
使用逐像素比較的方式對同一平台上擷取的影像進行比較。例如，我們可以將 Windows 平台上截取的螢幕截圖與 Windows 上截取的其他螢幕截圖進行比較。但是，我們無法將 Windows 電腦上的螢幕截圖與 Mac 或 Linux 上的映像進行比較。
4.3. Appium 行動自動化框架
Appium行動自動化框架可以對行動應用程式執行視覺回歸測試。它支援截取螢幕截圖並使用OpenCV跨平台庫進行逐像素比較，該庫是圖像處理工具的集合，我們可以直接使用，而無需詳細了解其實現。
5. 如何在雲端自動化視覺回歸測試？
接下來，讓我們來看看如何使用 LambdaTest 的 SmartUI 執行視覺回歸測試，LambdaTest 是一個由人工智慧驅動的測試編排和執行平台。它允許開發人員和測試人員對 3000 多個瀏覽器、瀏覽器版本和作業系統組合執行手動和自動測試。
SmartUI 支援 Selenium 和 Cypress 等測試自動化框架進行視覺化測試。以下測試場景將示範在 SmartUI 上使用 Selenium 進行視覺回歸測試。
測試場景1：
|
相機產品頁面 – LambdaTest 電子商務網站
印表機產品頁面 – LambdaTest 電子商務網站
測試場景2：
|
相機產品頁面 – LambdaTest 電子商務網站
使用 SmartUI 開始視覺回歸測驗的第一步是註冊 LambdaTest。
5.1 LambdaTest SmartUI 測驗入門
註冊後授予存取權限後，我們導航至LambdaTest 儀表板畫面並執行以下步驟：
1：從左側選單中，選擇 SmartUI。
2：讓我們點選「新建項目」按鈕。
3：在下一個畫面中，我們提供基本詳細信息，例如平台、項目名稱、審批者和標籤。由於Selenium視覺回歸測試將在桌面瀏覽器上進行，因此我們選擇平台為「Web」。
4：讓我們提供項目名稱並在「審批者名稱」欄位中選擇我們的名稱。批准者是批准建造的人，決定建造是否通過或失敗。
如果我們需要為組織帳戶選擇預設審核者以外的其他人，我們可以在「新增審核者」方塊中指定組織內部的姓名。
標籤名稱是一個可選字段，我們可以使用它來識別版本。
輸入所有必填詳細資料後，按一下「繼續」按鈕前往下一頁。
5：讓我們選擇在設定畫面上顯示的語言或測試框架。我們將選擇 Java 和 TestNG。請注意， SmartUI 支援所有 Selenium 支援的程式語言。
6：選擇框架和語言配置後，以下畫面將允許我們選擇測試配置。讓我們選擇能夠在 LambdaTest 雲端平台上執行測試的功能。
SmartUI 專案功能名稱是 Selenium 視覺回歸測驗的必填欄位。更新功能後，可以將它們複製並貼上到測試自動化項目中以執行測試。
7: 讓我們導航到專案畫面來檢查專案是否已成功建立。
5.2.設定基線影像
使用Selenium WebDriver建構測試自動化專案後，可以將Baseline鏡像上傳到LambdaTest雲端平台的SmartUI專案中。
5.3. Maven依賴
在 pom.xml 檔案中，我們新增以下相依性：
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>4.21.0</version>
</dependency>最新版本可以在Maven Central Repository中找到。
5.4. Selenium 與 SmartUI 配置
我們首先建立一個名為DriverManager.java的新 Java 類別檔案。此類別將有助於在 LambdaTest 雲端上配置 Selenium WebDriver。我們還將在此類中提供所需的 SmartUI 功能：
public class DriverManager {
private WebDriver driver;
//...
}在DriverManager類別中建立的*getLambdaTestOptions()*方法具有在雲端上設定 Selenium WebDriver 所需的所有功能和配置。這些功能與從先前步驟複製的功能相同。
ltOptions HashMap 具有 Selenium 和 SmartUI 的所有功能，且smartOptions HashMap 具有與 SmartUI 相關的所有功能：
private static HashMap<String, Object> getLambdaTestOptions() {
HashMap<String, Object> ltOptions = new HashMap<>();
ltOptions.put("resolution", "2560x1440");
ltOptions.put("video", true);
ltOptions.put("build", "smartui-demo");
ltOptions.put("name", "visual regression with smartui");
ltOptions.put("smartUI.project", "Visual Regression Selenium Demo");
ltOptions.put("smartUI.baseline", true);
ltOptions.put("w3c", true);
ltOptions.put("plugin", "java-testNG");
var smartOptions = new HashMap<String, Object>();
smartOptions.put("largeImageThreshold", 1200);
smartOptions.put("transparency", 0.3);
smartOptions.put("errorType", "movement");
ltOptions.put("smartUI.options", smartOptions);
return ltOptions;
}5.5.指定 SmartUI 功能
為了使用 SmartUI 執行視覺回歸測試，我們需要以下功能：
- SmartUI 專案名稱– 使用程式碼中的鍵「 smartUI.project 」指定此功能的值。
我們可以使用下列 SmartUI 選項來配置逐像素比較，並將這些配置新增至程式碼。
| 選項名稱 | 描述 |
|---|---|
| 大影像閾值 | 它將按照創建像素塊的速率設定像素粒度。允許的最小值為 100，最大值為 1200。 |
| 錯誤類型 | 它將透過識別像素變化類型並捕獲預期視圖來顯示輸出螢幕中的差異。支援的值為“movement”和“flat” 。 |
| 忽略 | 它消除了識別螢幕截圖時逐像素的誤報率。此選項支援的值是 - “抗鋸齒”、“alpha”、“顏色”、“無”。 |
| 透明度 | 它有助於調整測試透明度設置，並在突出顯示和視覺篩選之間取得平衡。此選項支援的值為 0 和 1 。 |
| 邊界框：[框1，框2] | 可以透過指定從左上角開始以像素為單位測量的邊界框來縮小比較區域。 |
| 忽略的盒子： [盒子1，盒子2] | 透過指定從左上角開始以像素為單位測量的邊界框，可以從比較中排除影像的一部分。 |
| 忽略區域顏色 | 透過指定 RGBA 顏色，可以從比較中排除影像的彩色區域。 |
我們可以透過SmartUI頁面的比較設定來了解更多關於SmartUI的功能。
5.6.新增基線影像
接下來，讓我們使用程式碼新增基線影像以使用以下 SmartUI 功能：
現在讓我們初始化 WebDriver，以便它在雲端中啟動 Chrome 瀏覽器並幫助我們執行視覺回歸測試：
public void startChromeInCloud() {
String ltUserName = System.getenv("LT_USERNAME");
String ltAccessKey = System.getenv("LT_ACCESS_KEY");
String gridUrl = "@hub.lambdatest.com/wd/hub";
ChromeOptions browserOptions = new ChromeOptions();
browserOptions.setPlatformName("Windows 10");
browserOptions.setBrowserVersion("latest");
browserOptions.setPageLoadStrategy(PageLoadStrategy.NORMAL);
HashMap<String, Object> ltOptions = getLambdaTestOptions();
browserOptions.setCapability("LT:Options", ltOptions);
try {
this.driver = new RemoteWebDriver(
new URL(format("https://{0}:{1}{2}", ltUserName, ltAccessKey, gridUrl)),browserOptions);
} catch (MalformedURLException e) {
throw new Error("Error in setting RemoteDriver's URL!");
}
this.driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(20));
}我們需要 LambdaTest 使用者名稱和存取金鑰**值才能在 LambdaTest 雲端平台上執行測試。**透過環境變量，讓我們指定這些變數的值。由於這些是秘密值，建議避免對它們進行硬編碼。
接下來，使用ChromeOptions類，平台名稱將為“Windows 10”，瀏覽器版本將設定為“最新”，這將運行 LambdaTest 平台上可用的最新穩定版本的 Chrome。傳回具有所有 LambdaTest 功能的 HashMap 的*getLambdaTestOptions()*將設定瀏覽器的功能。
最後，實例化Selenium的RemoteWebDriver類別以在雲端上執行Selenium測試。我們還將設定 20 秒的隱式等待時間，以便頁面上的所有 WebElement 出現。
6. 編寫測試
讓我們建立一個名為SeleniumVisualRegressionLiveTest類別的測試，其中將包含視覺回歸測試：
public class SeleniumVisualRegressionLiveTest {
private DriverManager driverManager;
private CameraProductPage cameraProductPage;
//...
}該類別還具有testSetup()方法，該方法將實例化配置類別DriverManager並允許 Chrome 瀏覽器在雲端中啟動：
@BeforeClass(alwaysRun = true)
public void testSetup() {
this.driverManager = new DriverManager();
this.driverManager.startChromeInCloud();
this.cameraProductPage =
new CameraProductPage(this.driverManager.getDriver());
}
@AfterClass(alwaysRun = true)
public void tearDown() {
this.driverManager.quitDriver();
}*TearDown()*方法將正常關閉 WebDriver 會話。
我們將使用頁面物件模型，因為它有助於程式碼維護和可讀性。因此，創建了另一個名為CameraProductPage的類別來幫助我們截取Camera產品頁面的螢幕截圖：
public class CameraProductPage {
private static String SCREEN_NAME = "Camera-Product-Page";
private WebDriver driver;
public CameraProductPage(WebDriver driver) {
this.driver = driver;
}
public void checkVisual() {
((JavascriptExecutor) this.driver)
.executeScript(MessageFormat.format("smartui.takeScreenshot={0}", SCREEN_NAME));
}
}checkVisual()方法將截取螢幕截圖並將其命名為「Camera-Product-Page」 。此螢幕截圖將用於比較和執行視覺回歸測試。
此CameraProductPage類別在SeleniumVisualRegressionLiveTest類別中實例化：
public class SeleniumVisualRegressionLiveTest {
private CameraProductPage cameraProductPage;
@BeforeClass
public void setup() {
cameraProductPage = new CameraProductPage(this.driverManager.getDriver());
}
}6.1.測試實施1
第一個測試， whenActualImageIsDifferentFromBaseline_thenItShouldShowDifference()，將導航到 LambdaTest eCommerce Playground 網站上的印表機產品頁面。接下來，它將透過比較基線影像（相機產品頁面）與印表機產品頁面的螢幕截圖來執行視覺回歸並顯示差異：
@Test
public void whenActualImageIsDifferentFromBaseline_thenItShouldShowDifference() {
this.driverManager.getDriver().get(
"https://ecommerce-playground.lambdatest.io/index.php?route=product/category&path=30");
this.cameraProductPage.checkVisual();
}第一個測試， whenActualImageIsDifferentFromBaseline_thenItShouldShowDifference()將導航到 LambdaTest eCommerce Playground 網站上的印表機產品頁面。
然後，它將透過比較基線影像（相機產品頁面）與印表機產品頁面的螢幕截圖來執行視覺回歸並顯示差異。
6.2.測試實施2
第二個測試， whenActualImageIsSameAsBaseline_thenItShouldNotShowAnyDifference()，導覽至 LambdaTest eCommerce Playground 網站上的相機產品頁面。
然後，它將透過將相機產品頁面的螢幕截圖與基線影像（相機產品頁面）進行比較來執行視覺回歸。它不應該顯示任何差異，因為兩個頁面是相同的：
@Test
public void whenActualImageIsSameAsBaseline_thenItShouldNotShowAnyDifference() {
this.driverManager.getDriver().get(
"https://ecommerce-playground.lambdatest.io/index.php?route=product/category&path=33");
this.cameraProductPage.checkVisual();
}7. 測試執行
以下testng.xml檔案將幫助我們執行測試：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">
<suite name="Visual regression test suite ">
<test name="Visual Regression Test using Smart UI from LambdaTest">
<classes>
<class name="com.baeldung.selenium.visualregression.tests.SeleniumVisualRegressionLiveTest">
<methods>
<include name="whenActualImageIsDifferentFromBaseline_thenItShouldShowDifference"/>
<exclude name="whenActualImageIsSameAsBaseline_thenItShouldNotShowAnyDifference"/>
</methods>
</class>
</classes>
</test>
</suite>我們將首先執行whenActualImageIsSameAsBaseline_thenItShouldNotShowAnyDifference ，因為我們需要從測試自動化程式碼設定基準影像。因此，它排除了 testng.xml 檔案中的第一個測試。
使用 IntelliJ 執行的測試的螢幕截圖：
測試執行後，將在LambdaTest雲端平台的SmartUI中設定Baseline鏡像：
7.1.執行視覺回歸測試
基線影像現已設定。現在讓我們透過執行whenActualImageIsDifferentFromBaseline_thenItShouldShowDifference 來執行視覺回歸測試，我們將比較印表機產品頁面與相機產品頁面（基準影像）。
由於我們已經在先前的測試中設定了 Baseline 映像，因此我們應該確保在執行測試之前，我們將DriverManager類別中的功能smartUI.baseline更新為false ：
接下來，我們更新testng.xml檔案以包含whenActualImageIsDifferentFromBaseline_thenItShouldShowDifference方法並排除whenActualImageIsSameAsBaseline_thenItShouldNotShowAnyDifference測試方法：
IntelliJ 測試執行將如下所示：
我們可以在 LambdaTest 上的 SmartUI 截圖中看到視覺差異：
在上面的螢幕截圖中，我們可以看到視覺回歸測試的詳細洞察。它顯示基線影像、目前影像以及它們各自的差異。我們會注意到，透過使用像素到像素比較來仔細比較兩個螢幕截圖，LambdaTest SmartUI 提供了 0.17% 的不匹配百分比。
LambdaTest SmartUI 突出顯示目前影像本身中兩個螢幕截圖之間的差異。因此，我們可以透過點擊不匹配百分比上方的相應按鈕來批准或拒絕。
在比較時，我們需要考慮以下 SmartUI 選項：
| 智慧型使用者介面選項 | 價值觀 |
|---|---|
| 大影像閾值 | 1200 |
| 透明度 | 0.3 |
| 錯誤類型 | 移動 |
由於我們提供了largeImageThreshold選項的最大值，因此我們可以準確地逐像素比較影像。 errorType設定為“ movement”，指定像素移動。它有助於突出顯示基線影像到比較影像的像素分佈。考慮到透明度選項，比較視圖圖像對審批者來說是透明的，以便於識別。
如圖所示，LambdaTest 的 SmartUI 可以幫助我們逐像素執行視覺回歸測試，並提供有效的結果，幫助我們向使用者交付高品質的建置。
八、結論
在本文中，我們使用 LambdaTest 的 SmartUI 和 Selenium WebDriver 與 Java 執行視覺迴歸測試。視覺回歸測試可保障 Web 應用程式的視覺一致性和使用者體驗。透過利用創新的工具和方法，團隊可以主動識別和減輕視覺缺陷，提高產品質量，降低迴歸風險，並為最終用戶提供卓越的數位體驗。
本文中使用的源代碼可在 GitHub 上取得。