如何使用 Selenium Webdriver 從下拉清單中選擇值
一、簡介
在這個簡短的教學中,我們將看一個簡單的範例,說明如何使用Selenium WebDriver 和 Java 從下拉元素中選擇選項或值。
為了進行測試,我們將使用 JUnit 和 Selenium 開啟https://www.baeldung.com/contact
並從“What is your question about?”
中選擇值“Bug Reporting”
落下。
2. 依賴關係
首先,我們在pom.xml
中將[selenium-java](https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java)
和Junit依賴項加入我們的專案:
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>4.18.1</version>
</dependency>
<dependency>
<groupId>org.junit.jupiter</groupId>
<artifactId>junit-jupiter-engine</artifactId>
<version>5.9.2</version> <scope>test</scope>
</dependency>
<dependency>
<groupId>io.github.bonigarcia</groupId>
<artifactId>webdrivermanager</artifactId>
<version>5.7.0</version>
</dependency>
3. 配置
接下來,我們需要設定WebDriver
。在此範例中,我們將在下載最新版本後使用其 Chrome 實作:
@BeforeEach
public void setUp() {
WebDriverManager.chromedriver().setup();
driver = new ChromeDriver();
}
我們使用@BeforeEach
註釋的方法在每次測試之前進行初始設定。接下來,我們使用WebDriverManager
來取得 Chrome 驅動程序,而無需明確下載並安裝它。與使用驅動程式的絕對路徑相比,這使得我們的程式碼更具可移植性。我們仍然需要在執行此程式碼的目標電腦上安裝 Chrome 瀏覽器。
測試完成後,我們應該關閉瀏覽器視窗。我們可以透過將driver.close()
語句放置在用@AfterEach
註解的方法中來做到這一點。這可以確保即使測試失敗它也會被執行:
@AfterEach
public void cleanUp() {
driver.close();
}
4. 找到選擇元素
現在腳手架已經完成,我們必須添加程式碼來標識select
元素。有幾種不同的方法可以幫助 Selenium 選擇元素,例如使用 ID、CSS 選擇器、類別名稱、Xpath 等。
我們為頁面 URL 新增變量,並為select
輸入和感興趣的option
新增 XPath。稍後我們的測試中將需要這些:
private static final String URL = "https://www.baeldung.com/contact";
private static final String INPUT_XPATH = "//select[@name='question-recipient']";
我們將使用 XPath 選擇器,因為它們在選擇與各種選項相符的元素方面提供了許多多功能性和強大功能。
在此範例中,我們感興趣的是select
元素下的option “Bug Reporting”
,其屬性name
的值為“question-recipient”
。使用 Xpath 選擇器允許我們使用單一表達式來選擇準確的元素,而不會產生歧義。
然後我們添加一個測試案例來確認我們感興趣的option
是否存在。在這種情況下,該option
是帶有“Bug Reporting”
文字的選項:
@Test
public void givenBaeldungContactPage_whenSelectQuestion_thenContainsOptionBugs() {
driver.get(URL);
WebElement inputElement = driver.findElement(By.xpath(OPTION_XPATH));
assertEquals("Bug reporting", inputElement.getText());
}
這裡,我們使用driver.get()
方法來載入網頁。接下來,我們找到option
元素並驗證其文字與我們的預期值匹配,以確保我們位於正確的位置。接下來,我們將編寫一些測試來點擊該特定option.
5. 在選擇元素中選擇一個選項
我們已經確定了我們感興趣的option
。 Selenium 在org.openqa.selenium.support.ui.Select
套件下提供了一個名為Select
的單獨類,以幫助使用 HTML select
下拉清單。我們將編寫一些測試來使用不同的方式來點擊我們感興趣的option
。
5.1.按值選擇
這裡我們使用Select
類別中的selectByValue()
方法根據選項所代表的值來選擇一個option
:
@Test
public void givenBaeldungContactPage_whenSelectQuestion_thenSelectOptionBugsByValue() {
driver.get(URL);
WebElement inputElement = driver.findElement(By.xpath(INPUT_XPATH));
WebElement optionBug = driver.findElement(By.xpath(OPTION_XPATH));
Select select = new Select(inputElement);
select.selectByValue(OPTION_TEXT);
assertTrue(optionBug.isSelected());
}
5.2.按選項文字選擇
在這裡,我們使用Select
類別中的selectByVisibleText()
方法來選擇相同的option
,這次使用我們作為最終用戶可見的文字:
@Test
public void givenBaeldungContactPage_whenSelectQuestion_thenSelectOptionBugsByText() {
driver.get(URL);
WebElement inputElement = driver.findElement(By.xpath(INPUT_XPATH));
WebElement optionBug = driver.findElement(By.xpath(OPTION_XPATH));
select.selectByVisibleText(OPTION_TEXT);
assertTrue(optionBug.isSelected());
}
5.3.按索引選擇
考慮這一點的最後一種方法是使用option
的索引進行選擇。 感興趣的option
被列為下拉清單中的第五個選項。我們注意到該庫中的索引基於零作為第一個索引,因此我們對索引4
感興趣。我們使用selectByIndex()
方法來選擇相同的選項:
@Test
public void givenBaeldungContactPage_whenSelectQuestion_thenSelectOptionBugsByIndex() {
driver.get(URL);
WebElement inputElement = driver.findElement(By.xpath(INPUT_XPATH));
WebElement optionBug = driver.findElement(By.xpath(OPTION_XPATH));
select.selectByIndex(OPTION_INDEX);
assertTrue(optionBug.isSelected());
}
六,結論
在本文中,我們學習如何使用 Selenium 從select
元素中選擇一個值。
我們研究了幾種不同的方法來選擇我們感興趣的Option
。 Selenium 為此提供了一個名為Select
特殊支援類別。感興趣的方法是selectByValue(), selectByVisibleText(),
和selectByIndex()
.
一般流程是使用 Selenium 選擇器來識別感興趣的下拉列表,然後使用Select
類別上的方法之一來點擊所需的Option
。
與往常一樣,本文的來源可在 GitHub 上取得。