使用 Selenium 進行自動化無障礙測試

1. 概述

輔助功能測試對於確保軟體應用程式可供所有人（包括殘障人士）使用至關重要。手動執行可訪問性測試可能非常耗時且容易出錯。因此，使用 Selenium 自動化可訪問性測試可以簡化流程，從而更容易及早檢測和修復可訪問性問題。

在本教程中，我們將探索如何使用 Selenium 自動化無障礙測試。

2. 什麼是自動化輔助使用測試？

自動化可訪問性測試是使用自動化工具和腳本來評估軟體應用程式滿足可訪問性標準（例如 WCAG（Web 內容可訪問性指南））的程度的過程。

它有助於識別可能阻止殘疾人有效使用該軟體的可訪問性障礙。

透過自動化這些測試，團隊可以快速檢測與螢幕閱讀器相容性、鍵盤導航、色彩對比度和其他可訪問性方面相關的問題，確保應用程式更具包容性並符合法律要求。

3. 為什麼選擇 Selenium 來實現輔助功能自動化？

Selenium WebDriver 是一個受歡迎的開源測試自動化框架。它有助於自動化流行的瀏覽器，如 Chrome、Firefox、Edge 和 Safari，並提供更大的靈活性和與不同測試框架的兼容性。

隨著 Selenium 4 的發布，它也完全符合 W3C 標準。在許多國家/地區，法律要求和行業標準（例如 Web 內容可訪問性指南）規定 Web 應用程式必須可存取。透過使用 Selenium 進行自動化可訪問性測試，組織可以有效地評估其對這些法規和標準的遵守情況。

4. 如何開始 Selenium 可訪問性測試？

在本節中，我們將學習如何在 LambdaTest 等平台提供的雲端網格上使用 Selenium 執行可訪問性測試。

LambdaTest 是一個人工智慧驅動的測試執行平台，允許開發人員和測試人員使用 Selenium 和 Cypress 等框架在 3000 多個真實環境中執行可訪問性自動化。

要在 LambdaTest 上執行 Selenium 可訪問性測試，我們需要啟用 Accessibility Automation plan 。

4.1.測試場景

以下可訪問性測試的測試場景將在LambdaTest eCommerce Playground網站上運行：

1. 導覽至 LambdaTest eCommerce Playground 網站。
2. 將滑鼠懸停在My account下拉清單上，然後按一下Login.
3. 輸入有效的使用者名稱和密碼。
4. 執行斷言以檢查登入成功後是否顯示登出連結。

4.2.設定項目

讓我們在pom.xml檔案中加入以下 Selenium 依賴項：

<dependency>

 <groupId>org.seleniumhq.selenium</groupId>

 <artifactId>selenium-java</artifactId>

 <version>4.23.1</version>

 </dependency>

對於最新版本，我們可以查看Maven Central Repository 。

現在，我們需要建立一個新的ECommercePlayGroundAccessibilityTests類別：

public class ECommercePlayGroundAccessibilityTests {



 private RemoteWebDriver driver;

 //..

 }

讓我們定義一個setup()方法來幫助實例化RemoteWebDriver:

@BeforeTest

 public void setup() {

 final String userName = System.getenv("LT_USERNAME") == null

 ? "LT_USERNAME" : System.getenv("LT_USERNAME");

 final String accessKey = System.getenv("LT_ACCESS_KEY") == null

 ? "LT_ACCESS_KEY" : System.getenv("LT_ACCESS_KEY");

 final String gridUrl = "@hub.lambdatest.com/wd/hub";

 try {

 this.driver = new RemoteWebDriver(new URL(

 "http://" + userName + ":" + accessKey + gridUrl),

 getChromeOptions());

 } catch (final MalformedURLException e) {

 System.out.println(

 "Could not start the remote session on LambdaTest cloud grid");

 }

 this.driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(30));

 }

此方法需要 LambdaTest 使用者名稱和存取金鑰才能在 LambdaTest 雲端網格上執行測試。我們可以從 LambdaTest Account Settings > Password & Security中找到這些憑證。

在實例化RemoteWebDriver,我們需要傳遞BrowserVersion 、 PlatformName等功能來執行測試：

public ChromeOptions getChromeOptions() {

 final var browserOptions = new ChromeOptions();

 browserOptions.setPlatformName("Windows 10");

 browserOptions.setBrowserVersion("127.0");

 final HashMap<String, Object> ltOptions = new HashMap<String, Object>();

 ltOptions.put("project",

 "Automated Accessibility Testing With Selenium");

 ltOptions.put("build",

 "LambdaTest Selenium Playground");

 ltOptions.put("name",

 "Accessibility test");

 ltOptions.put("w3c", true);

 ltOptions.put("plugin",

 "java-testNG");

 ltOptions.put("accessibility", true);

 ltOptions.put("accessibility.wcagVersion",

 "wcag21");

 ltOptions.put("accessibility.bestPractice", false);

 ltOptions.put("accessibility.needsReview", true);



 browserOptions.setCapability(

 "LT:Options", ltOptions);



 return browserOptions;

 }

對於 LambdaTest 上的可訪問性測試，我們需要添加accessibility 、 accessibility.wcagVersion 、 accessibility.bestPractice和accessibility.needsReview等功能。

要產生功能，我們可以參考 LambdaTest 自動化功能產生器。

4.3.測試實施

我們將使用兩個測試方法testNavigationToLoginPage()和testLoginFunction()來實作測試場景。

以下是testNavigationToLoginPage()方法的程式碼片段：

@Test(priority = 1)

 public void testNavigationToLoginPage() {

 driver.get("https://ecommerce-playground.lambdatest.io/");

 WebElement myAccountLink = driver.findElement(By.cssSelector(

 "#widget-navbar-217834 > ul > li:nth-child(6) > a"));

 Actions actions = new Actions(driver);

 actions.moveToElement(myAccountLink).build().perform();

 WebElement loginLink = driver.findElement(By.linkText("Login"));

 loginLink.click();



 String pageHeaderText = driver.findElement(By.cssSelector(

 "#content > div > div:nth-child(2) > div h2")).getText();

 assertEquals(pageHeaderText, "Returning Customer");

 }

此測試實現了測試場景的前兩個步驟，即導航到 LambdaTest eCommerce Playground 網站並將滑鼠懸停在My account連結上。當優先權設定為“ 1 ”時，此測試方法首先執行。

Selenium WebDriver 的Actions類別的*moveToElement()*方法將滑鼠懸停在My account連結上。

選單開啟後，將使用 linkText 定位Login鏈接linkText,並對其執行點擊操作。最後，執行斷言來檢查登入頁面是否成功載入。

現在讓我們來看看testLoginFunction()方法的程式碼片段：

@Test(priority = 2)

 public void testLoginFunction() {

 WebElement emailAddressField = driver.findElement(By.id(

 "input-email"));

 emailAddressField.sendKeys("[email protected]");

 WebElement passwordField = driver.findElement(By.id(

 "input-password"));

 passwordField.sendKeys("Password123");

 WebElement loginBtn = driver.findElement(By.cssSelector(

 "input.btn-primary"));

 loginBtn.click();



 WebElement myAccountLink = driver.findElement(By.cssSelector(

 "#widget-navbar-217834 > ul > li:nth-child(6) > a"));

 Actions actions = new Actions(driver);

 actions.moveToElement(myAccountLink).build().perform();

 WebElement logoutLink = driver.findElement(By.linkText("Logout"));

 assertTrue(logoutLink.isDisplayed());

 }

此測試涵蓋使用有效憑證登入和驗證Logout連結的最後步驟。在E-Mail Address和Password欄位中輸入憑證後，按一下登入按鈕。使用moveToElement()方法在My Account連結上執行滑鼠懸停，並使用斷言檢查Logout連結是否可見。

4.4.測試執行

LambdaTest Web 自動化儀表板的以下螢幕截圖顯示了這兩個可訪問性測試：

5. 結論

輔助功能測試有助於發現與網站或基於網路的應用程式的可用性相關的缺陷。它有助於使網站可供所有使用者（包括殘疾人）使用。

必須遵循 WCAG 制定的準則才能使網站或 Web 應用程式易於存取。除此之外，有必要對網站進行可訪問性測試，以確保網站和 Web 應用程式可供所有人使用。

本文中使用的源代碼可在 GitHub 上取得。