1. Introduction
In this short tutorial, we’ll look at a simple example of how to select an option or a value from a dropdown element using Selenium WebDriver with Java.
For testing, we’ll use JUnit and Selenium to open https://www.baeldung.com/contact and select the value “Bug Reporting” from the “What is your question about?” dropdown.
2. Dependencies
First, we add the selenium-java and Junit dependencies to our project in the pom.xml:
<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. Configuration
Next, we need to configure WebDriver. In this example, we’ll use its Chrome implementation after downloading its latest version:
@BeforeEach
public void setUp() {
WebDriverManager.chromedriver().setup();
driver = new ChromeDriver();
}
We’re using a method annotated with @BeforeEach to do the initial setup before each test. Next, we use WebDriverManager to get the Chrome Driver without explicitly downloading and installing it. This makes our code more portable when compared to using the absolute path of the driver. We still need the Chrome browser installed on the target machine where we’ll run this code.
When the test finishes, we should close the browser window. We can do this by placing the driver.close() statement in a method annotated with @AfterEach. This makes sure it’ll be executed even if the test fails:
@AfterEach
public void cleanUp() {
driver.close();
}
4. Find the Select Element
Now that the scaffolding is done, we must add code to identify the select element. There are a few different ways to help Selenium pick an element such as by using ID, CSS selector, Class name, Xpath, etc.
We add variables for the page URL and the XPath for the select input and option of interest. These will be needed later in our tests:
private static final String URL = "https://www.baeldung.com/contact";
private static final String INPUT_XPATH = "//select[@name='question-recipient']";
private static final String OPTION_XPATH =
"//select[@name='question-recipient']/option[@value='Bug reporting']";
We’ll use XPath selectors as they offer a lot of versatility and power in choosing elements matching a variety of options.
In this example, we’re interested in the option “Bug Reporting” under the select element with the attribute name with the value “question-recipient”. Using an Xpath selector allows us to select that exact element without ambiguity using a single expression.
We then add a test case to confirm that the option of our interest exists. In this case, the option is the one with the text “Bug Reporting”:
@Test
public void givenBaeldungContactPage_whenSelectQuestion_thenContainsOptionBugs() {
driver.get(URL);
WebElement inputElement = driver.findElement(By.xpath(OPTION_XPATH));
assertEquals("Bug reporting", inputElement.getText());
}
Here, we use the driver.get() method to load the webpage. Next, we find the option element and verify its text matches our expected value to ensure we’re in the right place. Next, we’ll write some tests to click on that particular option.
5. Select an Option in the Select Element
We’ve identified the option of our interest. Selenium offers a separate class called Select under the package org.openqa.selenium.support.ui.Select to help work with HTML select dropdowns. We’ll write a few tests to use the different ways to click the option of our interest.
5.1. Select by Value
Here we use the selectByValue() method in the Select class to select an option based on the value it represents:
@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 by Option Text
Here we use the selectByVisibleText() method in the Select class to select the same option, this time using the text that is visible to us as an end user:
@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. Select by Index
The last way to consider this is to use the index of the option to select. The option of interest is listed as the fifth option in the dropdown. We note that the index in this library is based on zero as the first index so we’re interested in index 4. We use the selectByIndex() method to select the same option:
@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());
}
6. Conclusion
In this article, we’ve learned how to select a value from the select element using Selenium.
We examined a few different ways to choose the Option of our interest. Selenium offers a special support class called Select for this purpose. The methods of interest are selectByValue(), selectByVisibleText(), and selectByIndex()**.
The general flow is to use Selenium selectors to identify the dropdown of interest and then use one of the methods on the Select class to click the Option desired.
As always, the source for the article is available over on GitHub.