在 Selenium WebDriver 中檢索 HTML 輸入的值

一、概述

眾所周知，自動化測試是軟件開發的重要組成部分。 Selenium 是一種廣泛使用的工具，它使用特定於瀏覽器的驅動程序來自動測試 Web 應用程序。

在本教程中，我們將學習如何設置 Selenium 項目以及如何從網頁中檢索 HTML 輸入字段的值。

2. 什麼是 Selenium WebDriver？

Selenium WebDriver 是一個開源的自動化測試框架，它在本地驅動 Web 瀏覽器，像真實用戶一樣與它們交互。它支持一系列瀏覽器，包括 Chrome、Firefox、Edge 和 Safari。

它可用於自動執行各種任務，例如 Web 測試、Web 抓取和用戶驗收測試。

簡單地說， WebDriver 是一個應用程序編程接口 (API)，它以不同的編程語言實現。驅動程序負責 Selenium 和瀏覽器之間的通信。

3. 設置 Selenium WebDriver 項目

要在任何項目中開始使用 Selenium，我們需要安裝 Selenium 庫和瀏覽器驅動程序。我們可以通過將其依賴項添加到pom.xml使用 Maven 安裝Selenium 庫：

<dependency>
 <groupId>org.seleniumhq.selenium</groupId>
 <artifactId>selenium-java</artifactId>
 <version>4.8.3</version>
 </dependency>

此外，要安裝瀏覽器驅動程序，我們將使用驅動程序管理軟件。 WebDriverManager是一個提供此功能的 Java 庫。讓我們將其依賴項添加到pom.xml ：

<dependency>
 <groupId>io.github.bonigarcia</groupId>
 <artifactId>webdrivermanager</artifactId>
 <version>5.3.2</version>
 </dependency>

或者，我們可以從 Selenium 官方網站下載瀏覽器驅動程序。一旦我們下載了驅動程序，我們需要解壓它，將它放在項目根目錄中，並指向我們代碼中的位置。

在下一節中，我們將使用 Selenium 腳本檢索 DuckDuckGo 主頁中輸入字段的值。

4. 使用 Selenium WebDriver 檢索 HTML 輸入值

首先，我們將檢索DuckDuckGo的搜索字段中的輸入值。主頁將作為我們的示例 HTML 頁面。它有一個 ID 為“ search_form_input_homepage ”的輸入字段，用於輸入搜索查詢。

接下來，讓我們編寫一個 Selenium 腳本來檢索輸入字段的值：

class SeleniumWebDriverUnitTest {

 private WebDriver driver;
 private static final String URL = "https://duckduckgo.com";
 private static final String INPUT_ID = "search_form_input_homepage";

 @BeforeEach
 public void setUp() {
 WebDriverManager.chromedriver().set();
 driver = new ChromeDriver();
 }

 @AfterEach
 public void tearDown() {
 driver.quit();
 }

 @Test
 public void givenDuckDuckGoHomePage_whenInputHelloWorld_thenInputValueIsHelloWorld() {

 driver.get(URL);
 WebElement inputElement = driver.findElement(By.id(INPUT_ID));
 inputElement.sendKeys(Keys.chord(Keys.CONTROL, "a"), Keys.DELETE);
 inputElement.sendKeys("Hello World!");
 String inputValue = inputElement.getAttribute("value");
 Assert.assertEquals("Hello World!", inputValue);
 }
 }

在上面的示例中，我們創建了一個WebDriver實例來控制 Chrome 網絡瀏覽器。然後，我們使用WebDriver實例導航到 URL 為“ https://duckduckgo.com ”的網頁。

此外，我們在WebDriverManager上調用chromedriver().set()來設置瀏覽器驅動程序。它會自動為我們下載並設置 Chrome 驅動程序。此外，我們將驅動driver初始化為ChromeDriver對象，這有助於調用 Chrome 瀏覽器。

接下來，我們通過調用driver上的get()方法導航到 URL。然後，我們創建一個名為inputElement的WebElement變量，並通過其id找到輸入元素並將其分配給inputElement 。 **WebElement**是表示 Selenium WebDriver 中 HTML 元素的接口。它提供了多種與元素交互的方法，例如sendKeys() 、 getText(),等。我們可以使用不同的定位器策略來查找 Web 元素，例如id 、 name或xpath 。

此外，我們從代碼中模擬瀏覽器清空輸入框，輸入Hello World!作為輸入值。然後，我們創建一個String類型的變量inputValue ，並使用參數“ value ”調用inputElement上的getAttribute()方法，並將其分配給inputValue.

此外，我們還有tearDown()方法，它關閉瀏覽器窗口並釋放ChromeDriver對象使用的資源。

最後，我們斷言預期結果等於來自具有指定輸入id網頁的輸入值。

5.結論

在本文中，我們首先了解瞭如何使用驅動管理軟件安裝 Selenium 瀏覽器驅動程序以及如何手動下載它。然後，我們學習瞭如何使用 Selenium WebDriver 從 HTML 網頁獲取輸入值。

與往常一樣，該示例的完整源代碼可在 GitHub 上獲得。