使用 Selenium 從自動完成輸入中選擇文本
1. 概述
現代 Web 應用程式通常包含一個搜尋欄，可以根據使用者輸入返回動態建議。編寫端到端 (E2E) 測試不僅僅是在搜尋欄中輸入文本，還包括等待建議下拉式選單彈出並從中選擇一個項目。
在本教學中，我們將探討如何使用 Selenium 與網站上啟用自動完成功能的搜尋列進行互動。
2. 測試場景
讓我們設定一個測試場景，來示範如何從搜尋結果中選擇自動完成項目：
- 造訪 eBay 網站
- 在頁面頂部找到搜尋欄
- 在搜尋輸入框中輸入“iphone”
- 當自動完成建議彈出時，選擇清單中的第二個選項。
3. 測試設置
要開始使用 Selenium 編寫測試，我們需要將[selenium-java](https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java)依賴項新增到 pom.xml 檔案中：
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>4.38.0</version>
</dependency>除了核心的 Selenium 依賴項之外，我們還需要 WebDriver 來驅動瀏覽器。讓我們也加入[webdrivermanager](https://mvnrepository.com/artifact/io.github.bonigarcia/webdrivermanager)依賴項：
<dependency>
<groupId>io.github.bonigarcia</groupId>
<artifactId>webdrivermanager</artifactId>
<version>6.3.3</version>
</dependency>該管理器套件是一個流行的 Java 庫，其中包含各種瀏覽器WebDriver例如 Chrome、Edge 和 Firefox。
在我們的測試中，我們將使用 JUnit 來管理 Selenium WebDriver的生命週期。每次測試都會初始化並清理 Chrome 瀏覽器：
private WebDriver driver;
@BeforeEach
void setup() {
driver = new ChromeDriver();
}
@AfterEach
void teardown() {
driver.quit();
}4. 測試實現
以下是我們執行測試場景的測試方法。我們定義了兩個常數XPATH_INPUT和XPATH_AUTOCOMPLETE_ITEMS,分別表示搜尋列元素和自動完成建議下拉清單項目的 XPath：
private static final String XPATH_INPUT = "//div[@id='gh-search-box']//input";
private static final String XPATH_AUTOCOMPLETE_ITEMS = "//ul[@id='ebay-autocomplete']/li";
@Test
void whenUserNavigatesToEBays_thenSelectThe2ndAutoCompleteItemFromSearchInput() throws Exception {
driver.navigate().to("https://www.ebay.com");
WebElement inputElement = driver.findElement(By.xpath(XPATH_INPUT));
String text = "iphone";
for (char c : text.toCharArray()) {
inputElement.sendKeys(Character.toString(c));
Thread.sleep(50);
}
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(3));
List<WebElement> autoCompleteElements = wait.until(
ExpectedConditions.visibilityOfAllElementsLocatedBy(
By.xpath(XPATH_AUTOCOMPLETE_ITEMS)
)
);
assertThat(autoCompleteElements.size()).isGreaterThanOrEqualTo(2);
WebElement secondItem = autoCompleteElements.get(1);
secondItem.click();
}此實作首先開啟 Chrome 瀏覽器並導航至 eBay 網站，然後透過對應 HTML 元素的 XPath 定位搜尋列。
接下來，我們逐一輸入關鍵字“iphone”，模擬人類的輸入方式。請注意，在eBay上我們無法一次發送整個關鍵字：
inputElement.sendKeys(text)發送完整關鍵字將導致建議下拉式選單不顯示。
輸入關鍵字後，系統會向 eBay 發送請求，呼叫其 API 以取得搜尋建議。伺服器可能需要一些時間才能傳回搜尋建議回應。因此，我們使用WebDriverWait等待自動完成下拉式選單出現。下拉式選單出現後，我們從中選擇第二個搜尋建議。
5. 結論
本文示範如何使用 Selenium 編寫端對端測試，模擬使用者在自動補全搜尋列中輸入內容，並明確等待使用者選擇返回的建議之一。這種方法可以確保可靠地選擇建議項。
與往常一樣，本文的完整原始碼可在 GitHub 上找到。