Selenium WebDriver supports testing dropdown and list elements using a special Select class.
The Select class provides various methods and properties to interact with dropdowns and lists created with the HTML <select> element.
In this recipe, we will automate dropdown and list control using the Select class.
Let's create a test for a dropdown control. This test will perform some basic checks and will then call various methods to select options in the dropdown:
@Test
public void testDropdown() {
// Get the Dropdown as a Select using it's name attribute
Select make = new Select(driver.findElement(By.name("make")));
// Verify Dropdown does not support multiple selection
assertFalse(make.isMultiple());
// Verify Dropdown has four options for selection
assertEquals(4, make.getOptions().size());
// With Select class we can select an option in Dropdown using Visible text
make.selectByVisibleText("Honda");
assertEquals("Honda", make.getFirstSelectedOption().getText());
// or we can select an option in Dropdown using value attribute
make.selectByValue("audi");
assertEquals("Audi", make.getFirstSelectedOption().getText());
// or we can select an option in Dropdown using index
make.selectByIndex(0);
assertEquals("BMW", make.getFirstSelectedOption().getText());
}Create another test for a list control that has multi-selection enabled. The test will perform some basic checks and then call methods to select multiple options in a list. The test will check the selected options and then deselect the options by calling various deselection methods, namely, by visible text, by value, and by index respectively as shown in the following code example:
@Test
public void testMultipleSelectList() {
// Get the List as a Select using it's name attribute
Select color = new Select(driver.findElement(By.name("color")));
// Verify List support multiple selection
assertTrue(color.isMultiple());
// Verify List has five options for selection
assertEquals(5, color.getOptions().size());
// Select multiple options in the list using visible text
color.selectByVisibleText("Black");
color.selectByVisibleText("Red");
color.selectByVisibleText("Silver");
// Deselect an option using value attribute of the option
color.deselectByValue("rd");
// Verify selected options count
assertEquals(1, color.getAllSelectedOptions().size());
// Deselect an option using index of the option
color.deselectByIndex(0);
// Verify selected options count
assertEquals(0, color.getAllSelectedOptions().size());
}We can find dropdown or list elements in a similar way to finding other elements on a page. However, we will use the Select class to interact with these elements. This is done in the following way:
Select color = new Select(driver.findElement(By.name("color")));The HTML <select> element supports dropdowns or lists with multi-select options. We can check if the element supports multi-select by calling the isMultiple() method of the Select class, shown as follows. It returns true if the control supports multi-selection, and false if it does not:
assertFalse(make.isMultiple());
We can check the number of options available in the dropdown or list by calling the getOptions() method of the Select class and querying the size of the returned collection of WebElements:
assertEquals(4, make.getOptions().size());
The Select class provides three different ways to select and deselect the options from dropdowns and lists, as shown in the following sections.
We can select an option by its visible text. For example, here is the code snippet for the <select> element:
<select name="color" size="6" multiple="multiple" style="width:100px"> <option value="bl">Black</option> <option value="wt">White</option> <option value="rd">Red</option> <option value="br">Brown</option> <option value="sl">Silver</option> </select>
Each option in this <select> element has a value property as well as a text label specified between <option> and </option>. We can select an option using this text label by calling the selectByVisibleText() method of the Select class, as shown in the following code:
color.selectByVisibleText("Black");Similarly, you can deselect an already selected option by calling the deselectByVisibleText() method, as shown in the following code:
color.deselectByVisibleText("Black");We can also select an option using its value attribute. For example, the following option has the value attribute "bl" and text label "Black":
<option value="bl">Black</option>
To select this option by value we need to call the selectByValue() method of the Select class, as shown in the following line of code:
color.selectByValue("bl");Similarly, you can deselect an already selected option by calling the deselectByValue() method, as shown in the following code:
color.deselectByValue("bl");This is another way by which we can select an option, this time by using its index. When options are displayed on a page, they are indexed in the order in which they are defined on the page. We can call the selectByIndex() method of the Select class by specifying the index value, as shown in the following code:
color.selectByIndex("0");Similarly, you can deselect an already selected option by calling the deselectByIndex() method. The following code shows the complete syntax:
color.deselectByIndex(0);
We can select/deselect multiple options from a dropdown or list by calling the select/deselect methods in a sequence. For example, in the color list that supports multiple selections, we can select options in the following way:
color.selectByVisibleText("Black");
color.selectByVisibleText("Red");
color.selectByVisibleText("Silver");This will select Black, Red, and Silver options in the list.