使用 Selenium 進行自動化瀏覽器測試

1. 概述

現在，大多數企業都依賴網站和網路應用程序，幾乎每個組織都在線上運作。由於網站和網路應用程式與最終用戶和客戶建立聯繫，因此它們必須能夠在所有流行的瀏覽器、瀏覽器版本和作業系統上完美運作。

雖然手動測試可以完成工作，但自動化測試是測試速度和效率的更好選擇。 Selenium 等自動化測試工具可讓企業執行自動化瀏覽器測試，讓他們能夠更快地交付高品質的網站和 Web 應用程式。

在本文中，我們將學習如何使用 Selenium 執行自動化瀏覽器測試。

2.什麼是硒？

Selenium 是一個開源工具，有助於自動化 Web 瀏覽器測試。它提供了跨瀏覽器測試、支援多種程式語言、平台獨立性、龐大社群等優點。

最近推出的 Selenium Manager 提供了自動化的瀏覽器和驅動程式管理，使開發人員和測試人員能夠無縫運行 Selenium 測試，而無需擔心下載和安裝驅動程式和瀏覽器。

3. 為什麼要使用 Selenium 進行自動化瀏覽器測試？

以下是使用 Selenium 進行自動化瀏覽器測試的主要原因：

• Selenium 是一款免費的開源工具，為 Web 自動化測試提供經濟高效的解決方案。
• 它支援多種流行的程式語言，例如 Java、Python、JavaScript、C#、Ruby 和 PHP。
• Selenium 讓軟體團隊能夠在各種瀏覽器（例如 Chrome、Firefox、Edge 和 Safari）上測試他們的網站和 Web 應用程式。
• 它擁有一個龐大、活躍的社區，可以提供廣泛的支持和資源。

4. 如何使用 Selenium 執行瀏覽器自動化？

根據使用 Selenium 編寫測試自動化腳本所選擇的程式語言，我們需要遵循一些先決條件、設定和執行流程。

4.1.先決條件

以下是開始使用 Selenium 進行自動化瀏覽器測試的一些先決條件：

• 下載並安裝Java JDK
• 安裝 IntelliJ 或 Eclipse IDE
• 下載所需的 Maven 建置工具

我們不會下載瀏覽器，因為測試將在基於雲端的測試平台（例如 LambdaTest）上運行。它是一個由 AI 驅動的測試執行平台，使開發人員和測試人員能夠使用 Selenium 在 3000 多個真實瀏覽器、瀏覽器版本和作業系統上大規模執行自動化測試。

4.2.設定和配置

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

<dependency>

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

 <artifactId>selenium-java</artifactId>

 <version>4.25.0</version>

 </dependency>



 <dependency>

 <groupId>org.testng</groupId>

 <artifactId>testng</artifactId>

 <version>7.10.2</version>

 <scope>test</scope>

 </dependency>

由於我們將在 LambdaTest 平台上執行測試，因此我們需要為平台、瀏覽器和瀏覽器版本添加某些功能。為此，我們使用 LambdaTest 自動化功能產生器。

讓我們建立一個BaseTest.java類別來在其中添加所有配置詳細資訊：

public class BaseTest {

 private static final ThreadLocal<RemoteWebDriver> DRIVER =

 new ThreadLocal<>();



 //...

 }

BaseTest類別中的ThreadLocal實例是為了執行緒安全，因為我們將並行執行測試。它還確保每個執行緒都有其RemoteWebDriver實例，從而促進順利的平行測試執行。

接下來， getDriver()和setDriver()方法將使用ThreadLocal實例來取得和設定RemoteWebDriver的實例。我們將使用getLtOptions()方法設定 LambdaTest 自動化功能：

public RemoteWebDriver getDriver() {

 return DRIVER.get();

 }



 private void setDriver(RemoteWebDriver remoteWebDriver) {

 DRIVER.set(remoteWebDriver);

 }



 private HashMap<String, Object> getLtOptions() {

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

 ltOptions.put("project", "ECommerce playground website");

 ltOptions.put("build", "LambdaTest Ecommerce Website tests");

 ltOptions.put("name", "Automated Browser Testing");

 ltOptions.put("w3c", true);

 ltOptions.put("visual", true);

 ltOptions.put("plugin", "java-testNG");

 return ltOptions;

 }

使用getLtOptions()方法，我們將設定專案、建置和測試名稱，並在 LambdaTest 雲端環境中啟用java-testNG插件。接下來，我們將新增getChromeOptions()方法，該方法將儲存 Chrome 瀏覽器的功能並傳回ChromeOptions。

類似地， getFirefoxOptions()方法接受browserVersion和平台作為參數，設定其各自的功能，並傳回FirefoxOptions。

在BaseTest類別中，我們將使用setup()方法來設定 Selenium WebDriver 以在 Chrome 和 Firefox 上執行自動化測試。 @BeforeTest註解確保該方法在任何測試之前運行，而@Parameters在運行時傳遞testng.xml檔案中的瀏覽器、瀏覽器版本和平台值。這有助於在 Chrome 和 Firefox 上並行執行跨瀏覽器測試：

if (browser.equalsIgnoreCase("chrome")) {

 try {

 setDriver(new RemoteWebDriver(new URL("http://" + userName + ":" + accessKey + gridUrl),

 getChromeOptions(browserVersion, platform)));

 } catch (final MalformedURLException e) {

 throw new Error("Could not start the Chrome browser on the LambdaTest cloud grid");

 }

 } else if (browser.equalsIgnoreCase("firefox")) {

 try {

 setDriver(new RemoteWebDriver(new URL("http://" + userName + ":" + accessKey + gridUrl),

 getFirefoxOptions(browserVersion, platform)));

 } catch (final MalformedURLException e) {

 throw new Error("Could not start the Firefox browser on the LambdaTest cloud grid");

 }

 }

要連接到 LambdaTest 雲端網格，我們需要擁有 LambdaTest 使用者名稱、存取金鑰和網格 URL。我們可以從我們的Account Settings > Password & Security輕鬆找到 LambdaTest 使用者名稱和存取金鑰。

之後，我們將編寫用於處理瀏覽器並啟動各自會話的程式碼。

4.3.測試場景

讓我們使用以下測試場景來示範在 LambdaTest 平台上使用 Selenium 進行自動化瀏覽器測試。

1. 導航至LambdaTest eCommerce Playground網站。
2. 找到並點擊主頁上的Shop by Category選單。
3. 找到並點擊MP3 Players選單。
4. 斷言顯示的頁面顯示頁首 MP3 播放器。

4.4.測試實施

讓我們建立一個AutomatedBrowserTest.java類別來為測試場景編寫測試自動化腳本。此類擴展了BaseTest類別以實現程式碼重用和模組化。

然後，我們將在實作測試場景的AutomatedBrowserTest類別中建立whenUserNavigatesToMp3PlayersPage_thenPageHeaderShouldBeCorrectlyDisplayed()方法：

@Test

 public void whenUserNavigatesToMp3PlayersPage_thenPageHeaderShouldBeCorrectlyDisplayed() {

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



 HomePage homePage = new HomePage(getDriver());

 homePage.openShopByCategoryMenu();

 Mp3PlayersPage mp3PlayersPage = homePage.navigateToMp3PlayersPage();

 assertEquals(mp3PlayersPage.pageHeader(), "MP3 Players");



 }

我們使用了 Selenium WebDriver 頁面物件模式，這有助於提高程式碼的可讀性和可維護性。 HomePage類別保存 LambdaTest eCommerce Playground 網站主頁的所有頁面物件。

openShopByCategoryMenu()方法使用 Selenium 的linkText定位器策略來定位Shop By Category選單，並對其執行按一下。此 MP3 播放器選單使用 CSS 選擇器*#widget-navbar-217841 > ul > li:nth-child(5) > a 進行定位。然後， *navigateToMP3PlayersPage()*方法找到 MP3 Players 頁面，對其執行單擊，然後返回MP3PlayersPage*類別的新實例。

MP3PlayersPage類別保存 MP3 播放器頁面的所有物件：

public class Mp3PlayersPage {

 private WebDriver driver;



 public Mp3PlayersPage(WebDriver driver) {

 this.driver = driver;

 }



 public String pageHeader() {

 return driver.findElement(By.cssSelector(".content-title h1"))

 .getText();

 }

 }

4.5.測試執行

讓我們建立一個新的testng.xml檔案來並行運行測試。此檔案將 TestNG 設定為在 Windows 10 上的 Chrome 和 Firefox 上執行自動瀏覽器測試。

現在，讓我們執行測試並存取 LambdaTest Web Automation 儀表板來檢查測試執行結果。

以下是在 Chrome 瀏覽器上執行測試的快照：

這是在 Firefox 瀏覽器上執行測試的快照：

我們可以找到測試的所有詳細信息，包括瀏覽器名稱、版本、平台和測試執行日誌，以及視訊記錄和螢幕截圖。

5. 結論

綜上所述，自動化瀏覽器測試在快速測試網站和 Web 應用程式方面發揮著至關重要的作用。借助 Selenium，測試人員可以同時有效率地執行多個測試，從而更快地獲得回饋。這種方法不僅有助於及早發現問題，還能確保軟體保持穩定。

本教程中使用的原始程式碼可在 GitHub 上取得。