Selenium WebDriver - 跨瀏覽器測試

在 Selenium WebDriver 中開發的測試用例應該能夠在 Chrome、Firefox、Safari、Edge 等多個瀏覽器中執行，只需對測試用例進行少量更新。這有助於檢查被測應用程式是否在所有瀏覽器中都按要求工作。

為什麼跨瀏覽器測試有益？

通常在處理任何應用程式時，例如電子商務或旅行預訂等，我們觀察到在進行支付或將產品新增到購物車時，應用程式在特定瀏覽器上花費了過多的頁面載入時間。

作為使用者，我們會迅速推斷該應用程式可能存在錯誤或正在進行的問題，然後轉向具有類似產品和功能的不同公司網站。

儘管瀏覽器供應商基於開放式 Web 標準，但使用 JavaScript、HTML 和 CSS 構建的 Web 應用程式和應用程式的呈現方式卻大不相同。這導致應用程式在不同瀏覽器中的呈現方式不同。任何應用程式的原始碼除錯都不會提供任何關於它在不同瀏覽器中如何呈現的見解。

因此，跨瀏覽器測試有助於儘早檢測任何應用程式在任何瀏覽器中的相容性問題，以便它可以廣泛地用於各種使用者，而不僅僅是任何目標使用者群體。此外，在執行自動化跨瀏覽器測試時，我們最終可能會建立一個具有並行執行的測試套件，這將有助於我們擴充套件測試。

跨瀏覽器測試確保構建的應用程式可以流暢地使用，並具有良好的使用者參與度，而無論使用任何瀏覽器或作業系統。

示例

讓我們以以下頁面為例，其中我們在**歡迎頁面**上有一個**新使用者按鈕**。

單擊**新使用者**按鈕後，我們將導航到註冊頁面，其中包含**歡迎，註冊**文字，如下面的影像所示。

對於上述示例，我們將對 Chrome 和 Edge 瀏覽器中的上述功能進行跨瀏覽器測試。為了在同一本地系統中的兩個瀏覽器中同時執行測試，我們將藉助 TestNg 單元測試自動化框架。所有測試用例都將在同一個**CrossBrw**包下。我們將透過在測試類**BrowserTest.java**中使用**@Parameters**標籤傳遞值，並在 testng.xml 檔案中指定**parameter = browser**及其**value = Chrome**和**value = Edge**，在兩個瀏覽器中執行測試。

測試類 BrowserTest.java 上的程式碼實現。

package CrossBrw;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.edge.EdgeDriver;
import org.testng.annotations.*;
import java.util.concurrent.TimeUnit;

public class BrowserTest {
   WebDriver driver;
   @BeforeTest
   @Parameters("browser")
   public void setup(String browser) throws Exception{

      // Initiate browser driver as per browser value
      if (browser.equalsIgnoreCase("Chrome")) {
         driver = new ChromeDriver();
         System.out.println("Browser opened in Chrome");
      } else if (browser.equalsIgnoreCase("Edge")) {
         driver = new EdgeDriver();
         System.out.println("Browser opened in Edge");
      }
	  
      // adding implicit wait of 12 secs
      driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

      // Opening the webpage
      driver.get("https://tutorialspoint.tw/selenium/practice/login.php");
   }

   @Test(priority = 1)
   public void verifyWelcomePageHeading() {
      WebElement t = driver.findElement(By.xpath("//*[@id='signInForm']/h1"));
      System.out.println("Page heading in Welcome Page: " +  t.getText());
   }

   @Test(priority = 2)
   public void moveToRegisterPage() {
      WebElement btn = driver.findElement(By.xpath("//*[@id='signInForm']/div[3]/a"));
      btn.click();
   }

   @Test(priority = 3)
   public void verifyRegisterPageHeading() {
      WebElement t = driver.findElement(By.xpath("//*[@id='signupForm']/h1"));
      System.out.println("Page heading in Register Page: " + t.getText());
   }

   @AfterTest
   public void teardown() { 
   
      // quitting browser
      driver.quit();
   }
}

testng.xml 中的配置。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">
<suite name="All Test Suite" thread-count="5" parallel="tests">
   <test thread-count="5" name="ChromeTest">
      <parameter name="browser" value="Chrome"></parameter>
      <classes>
         <class name="CrossBrw.BrowserTest"/>
      </classes>
   </test> <!-- Test -->
   <test thread-count="5" name="EdgeTest">
      <parameter name="browser" value="Edge"></parameter>
      <classes>
         <class name="CrossBrw.BrowserTest"/>
      </classes>
   </test>
</suite>

pom.xml 中的依賴項。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
   http://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>

   <groupId>org.example</groupId>
   <artifactId>SeleniumJava</artifactId>
   <version>1.0-SNAPSHOT</version>

   <properties>
      <maven.compiler.source>16</maven.compiler.source>
      <maven.compiler.target>16</maven.compiler.target>
      <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
   </properties>

   <!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java -->
   <dependencies>
      <dependency>
         <groupId>org.seleniumhq.selenium</groupId>
         <artifactId>selenium-java</artifactId>
         <version>4.11.0</version>
      </dependency>

      <!-- https://mvnrepository.com/artifact/org.testng/testng -->
      <dependency>
         <groupId>org.testng</groupId>
         <artifactId>testng</artifactId>
         <version>7.9.0</version>
         <scope>test</scope>
      </dependency>
   </dependencies>
</project>

我們需要從 testng.xml 檔案執行測試，方法是右鍵單擊它並選擇執行 testng.xml 選項。

輸出

Browser opened in Chrome
Browser opened in Edge
Page heading in Welcome Page: Welcome, Login In
Page heading in Register Page: Welcome,Register
Page heading in Welcome Page: Welcome, Login In
Page heading in Register Page: Welcome,Register
===============================================
All Test Suite
Total tests run: 6, Passes: 6, Failures: 0, Skips: 0
===============================================

Process finished with exit code 0

在上面的示例中，我們首先在 testng.xml 檔案中傳遞了引數**browser**及其值**Chrome**和**Edge**。在測試類 BrowserTest.java 中，我們在 Chrome 中執行了一次測試方法 - verifyWelcomePageHeading()、moveToRegisterPage() 和 verifyRegisterPageHeading()，然後在 Edge 中執行了一次。

我們藉助 TestNG 測試框架以及 Selenium WebDriver 來實現跨瀏覽器測試，並在控制檯中兩次檢索帶有訊息的頁面標題（一次在 Chrome 中，一次在 Edge 中） - **歡迎頁面中的頁面標題：歡迎，登入，註冊頁面中的頁面標題：歡迎，註冊，歡迎頁面中的頁面標題：歡迎，登入，註冊頁面中的頁面標題：歡迎，註冊**。我們還在控制檯中獲得了具有**@BeforeTest**註釋的測試方法**setup()**的訊息 - **Chrome 中打開了瀏覽器**和**Edge 中打開了瀏覽器**。

控制檯中的結果顯示總共執行的測試：6，因為有三個帶有 @Test 註釋的方法 - verifyWelcomePageHeading()、moveToRegisterPage() 和 verifyRegisterPageHeading() 被執行了兩次（對於 Chrome 和 Edge）。

最後，收到了訊息**透過：6**和**程序已完成，退出程式碼為 0**，表示程式碼成功執行。

這總結了我們對 Selenium WebDriver - 跨瀏覽器測試教程的全面概述。我們從描述跨瀏覽器測試以及跨瀏覽器測試為什麼有益開始，並提供了一個示例來說明如何將跨瀏覽器與 Selenium 和 TestNG 一起使用。這使您深入瞭解跨瀏覽器測試。明智的做法是繼續練習您學到的知識並探索與 Selenium 相關的其他知識，以加深您的理解並擴充套件您的視野。