Selenium Webdriver - Dropdown Box

Selenium Webdriver can be used to handle dropdown boxes on a web page using the Select
class. There can be two types of dropdown on a web page - single select (allows selection one
option) and multiple select (allows selection more than one option).

In HTML terminology, every dropdown is identified by the tagname called select. Also, each of its
options are identified with the tagname called the option.

Let us now discuss the identification of a single select dropdown on a webpage shown in the
below image. First, we would need to right click on the webpage, and then click on the Inspect
button in the Chrome browser. Then, the corresponding HTML code for the whole page would be
visible. For investigating a single element on a page, we would need to click on the left upward
arrow, available to the top of the visible HTML code as highlighted below.

Once, we had clicked and pointed the arrow to the dropdown beside the text Select One, its
HTML code was visible, both reflecting the select tagname(enclosed in <>), and its options within
the option tagname.

<select class="form-select" id="inputGroupSelect03" aria-label="Example

<option selected="">Pick one title</option>
<option value="1">Dr.</option>
<option value="2">Mr.</option>
<option value="3">Mrs.</option>
<option value="3">Ms.</option>
<option value="3">Proof.</option>
<option value="3">Other</option>
</select>

Please note one of the options Pick one title has the attribute selected, meaning this is selected
by default, even before any option is selected.

Let us discuss some of the methods available in Selenium which would help us to access
dropdowns on a web page.

getOptions()
returns the list of all options in the dropdown.

Syntax

WebDriver driver = new ChromeDriver();

WebElement e = driver.findElement(By.xpath("value of xpath"))
Select s = new Select(e);
List<WebElement> l = s.getOptions();

getFirstSelectedOption()
returns the selected option in the dropdown. If there are multi options selected, only the first item
shall be returned.

Syntax

WebDriver driver = new ChromeDriver();

WebElement e = driver.findElement(By.xpath("value of xpath")
Select s = new Select(e);
l = s. getFirstSelectedOption();

isMultiple()
returns a boolean value, yields a true value if the dropdown allows selection of multiple items.

Syntax

WebDriver driver = new ChromeDriver();

WebElement e = driver.findElement(By.xpath("value of xpath")
Select s = new Select(e);
boolean l = s.isMultiple();

selectByIndex()
The index of the option to be selected by the dropdown is passed as a parameter. The index
starts from 0.

Syntax
 WebDriver driver = new ChromeDriver();
WebElement e = driver.findElement(By.xpath("value of xpath")
Select s = new Select(e);
s.selectByIndex(0);

selectByValue()
The value attribute of the option to be selected by the dropdown is passed as a parameter. The
options in the dropdown should have the value attribute so that this method can be used.

Syntax

WebDriver driver = new ChromeDriver();

WebElement e = driver.findElement(By.xpath("value of xpath")
Select s = new Select(e);
s.selectByValue("option 1");

selectByVisibleText()
The visible text of the option to be selected by the dropdown is passed as a parameter.

Syntax

WebDriver driver = new ChromeDriver();

WebElement e = driver.findElement(By.xpath("value of xpath")
Select s = new Select(e);
s.selectByVisibleText("Selenium");

deselectByVisibleText()
The visible text of the option to be deselected by the dropdown is passed as a parameter. It is
only applicable to multi-select dropdowns.

Syntax

WebDriver driver = new ChromeDriver();

WebElement e = driver.findElement(By.xpath("value of xpath")
Select s = new Select(e);
s.deselectByVisibleText("Selenium");
deselectByValue()
The value attribute of the option to be deselected by the dropdown is passed as a parameter. The
options in the dropdown should have the value attribute so that this method can be used. It is
only applicable to multi-select dropdowns.

Syntax

WebDriver driver = new ChromeDriver();

WebElement e = driver.findElement(By.xpath("value of xpath")
Select s = new Select(e);
s.deselectByValue("option 1");

deselectByIndex()
The index of the option to be deselected by the dropdown is passed as a parameter. The index
starts from 0. It is only applicable to multi-select dropdowns.

Syntax

WebDriver driver = new ChromeDriver();

WebElement e = driver.findElement(By.xpath("value of xpath")
Select s = new Select(e);
s.deselectByIndex(0);

deselectAll()
unselects all selected options from the dropdown.

Syntax

WebDriver driver = new ChromeDriver();

WebElement e = driver.findElement(By.xpath("value of xpath")
Select s = new Select(e);
s.deselectAll();

If a dropdown list has an attribute disabled for an option, that option would not be selected.

Let us take an example of the below page, where we would access the dropdown below the text
Select One, select the value Dr. and perform some validations with the methods discussed
above.

Example
Code Implementation on HandlingDropdown.java class file.

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;
import java.util.List;
import java.util.concurrent.TimeUnit;

public class HandlingDropdowns {

public static void main(String[] args) throws InterruptedException
 // Initiate the Webdriver
WebDriver driver = new ChromeDriver();

// adding implicit wait of 15 secs

driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

// Opening the webpage where we will get dropdown

driver.get("https://www.tutorialspoint.com/selenium/practice/sele

// identify dropdown then select its options by value

WebElement dropdown = driver.findElement(By.xpath("//*[@id='input
Select select = new Select(dropdown);

// get option selected by default

WebElement o = select.getFirstSelectedOption();
System.out.println("Option selected by default: " + o.getText())

// select an option by value

select.selectByValue("1");

// get selected option

List<WebElement> selectedOptions = select.getAllSelectedOptions(
for (WebElement opt : selectedOptions){
System.out.println("Selected Option is: " + opt.getText());
}

// get all options of dropdown

List<WebElement> options =select.getOptions();
for (WebElement opt : options){
System.out.println("Options are: " + opt.getText());
}

// check if multiselect dropdown

Boolean b = select.isMultiple();
System.out.println("Boolean value for checking is: "+ b);

// quitting browser
driver.quit();
}
}

Output
 Option selected by default: Pick one title
Selected Option is: Dr.
Options are: Pick one title
Options are: Dr.
Options are: Mr.
Options are: Mrs.
Options are: Ms.
Options are: Proof.
Options are: Other
Boolean value for checking is: false

Process finished with exit code 0

In the above example, we had obtained the selected option in the dropdown with the message in
the console - Selected Option is: Dr. Then obtain all the options of the dropdown with the
message in the console - Options are: Pick one title, Options are: Dr., Options are: Africa,
Options are: Mr., Options are: Mrs., Options are: Ms, Options are: Proof., and Options are: Other.
We had also validated that the dropdown did not have multiple selection options with the
message in the console - Boolean value for checking is: false. We had also retrieved the option
selected by default in the dropdown with the message in the console - Option selected by
default: Pick one title.

Finally, the message Process finished with exit code 0 was received, signifying successful
execution of the code.

Let us take another example of the below page, where we would access the multi-select
dropdown beside the text Multi Select drop down, select the values Books and Toys, Kids & Baby,
and perform some validations with the methods discussed above.
 <select id="demo-multiple-select" multiple="">
<option value="1">Books</option>
<option value="2">Movies, Music & Games</option>
<option value="3">Electronics & Computers</option>
<option value="4">Home, Garden & Tools</option>
<option value="5">Health & Beauty</option>
<option value="6">Toys, Kids & Baby</option>
<option value="7">Clothing & Jewelry</option>
<option value="8">Sports & Outdoors</option>
</select>

Please note for a multiselect drop down, there should be an attribute as multiple, along with the
select tagname.

Example
Code Implementation on HandlingMultipleDropdown.java class file.
package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;
import java.util.List;
import java.util.concurrent.TimeUnit;

public class HandlingMultipleDropdowns {

public static void main(String[] args) throws InterruptedException

// Initiate the Webdriver

WebDriver driver = new ChromeDriver();

// adding implicit wait of 15 secs

driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

// Opening the webpage where we will get dropdown

driver.get("https://www.tutorialspoint.com/selenium/practice/sele

// identify multiple dropdown

WebElement dropdown = driver.findElement(By.xpath("//*[@id='demo

// object of Select class

Select select = new Select(dropdown);

// gets options of dropdown in list

List<WebElement> options = select.getOptions();
for (WebElement opt : options){
System.out.println("Options are: " + opt.getText());
}

// return true if multi-select dropdown

Boolean b = select.isMultiple();
System.out.println("Boolean value for multiple dropdown: "+ b);

// select item by index

select.selectByIndex(5);

// select item by visible text

 select.selectByVisibleText("Books");

// get all selected options of dropdown in list

List<WebElement> selectedOptions = select.getAllSelectedOptions(
for (WebElement opt : selectedOptions){
System.out.println("Selected Options are: " + opt.getText());
}

// get first selected option in dropdown

WebElement f = select.getFirstSelectedOption();
System.out.println("First selected option is: "+ f.getText());

// deselect option by index

select.deselectByIndex(5);

// get first selected option in dropdown after deselecting

WebElement e = select.getFirstSelectedOption();
System.out.println("Second selected option is: "+ e.getText());

// deselect all selected items

select.deselectAll();

// get all selected options of dropdown after deselected

List<WebElement> delectedOptions = select.getAllSelectedOptions(
System.out.println("No. options selected: " + delectedOptions.si

// Closing browser
driver.quit();
}
}

Output

Options are: Books

Options are: Movies, Music & Games
Options are: Electronics & Computers
Options are: Home, Garden & Tools
Options are: Health & Beauty
Options are: Toys, Kids & Baby
Options are: Clothing & Jewelry
Options are: Sports & Outdoors
Boolean value for multiple dropdown: true
 Selected Options are: Books
Selected Options are: Toys, Kids & Baby
First selected option is: Books
Second selected option is: Books
No. options selected: 0

Process finished with exit code 0

In the above example, we had obtained all the options of the dropdown with the message in the
console - Options are: Books, Options are: Movies, Music & Games, Options are: Home, Garden
& Tools, Options are: Health & Beauty, Options are: Toys, Kids &amp; Baby, Options are: Clothing
& Jewelry, Options are: Sports & Outdoors. We had also validated that the dropdown had
multiple selection options with the message in the console - Boolean value for checking is: true.
We had retrieved the selected options in the dropdown with the message in the console -
Selected Options are: Books, Selected Options are: Toys, Kids & Baby. We had also obtained the
first selected option with the message in the console - First selected option is: Books. After
deselecting the first selected option Books, then we had received the second selected option with
the message in the console - Second selected option is: Books. Finally, we deselected all the
selected options in the dropdown, and hence obtained the message in the console - No. options
selected: 0.

Finally, the message Process finished with exit code 0 was received, signifying successful
execution of the code.

Thus, in this tutorial, we had discussed how to handle dropdown boxes using the Selenium
Webdriver.