How to Handle DropDown using select Class in selenium

Handle DropDown using select Class in selenium

 

1. Overview

In this article, we’ll explore the select class from the org.openqa.selenium.support.ui.Select package to work on Drop-Down.

2. Type of DropDowns/DropBox/ListBox

There are generally two types of DropDowns

1. Single select DropDown
2. Multi-select DropDown

• Single select DropDown when we can select only one option from the DropDown list like below:

Values to select will be displayed like this:

• Multi-select DropDown when we can select more than one option from the DropDown list like below

3. Role of Select Class in Selenium:

• The Selectclass is a WebDriver class which provides the implementation of the HTML
• This class can be found under openqa.selenium.support.ui.Selectpackage.
• Select is an ordinary class as any other class , so its object is created by passing the WebElement to its constructor.
• It will throw error as asking to add arguments to the command:

            Syntax : Select select = new Select(); 

So, specify the web element location using the select Element as done below:

Declaring the dropDown element as an instance of the Select class

Let’s find out what operations we can perform with the help of this Select class reference i.e. selectFromDropDownObj

 

Select Methods

As it can be seen from the above figure, we can select/deselect the values from the drop-down list based on our requirements.

Let’s explore some of the above methods to get better understanding of the same:

We can select our drop-down values with these below methods

1. selectByIndex
2. SelectByVisibleText
3. selectByValue

Let’s examine the below code first:

• selectByIndex(int index): This Function takes an index value from drop-down list and it starts from 0 for the first value and returns void.
• selectByVisibleText(String text): This Function takes text in String format from the drop-down list and returns void.
• selectByValue(String value): For this first inspect the element from DOM and select the value as shown below:

Note : The Most preferred way is to select by byVisibleText() because in ByIndex(),  index can be changed for dynamic drop down values but it can be used for static dropdown values like Month, Year and Date.

Let’s explore getOptions Method:

Syntax:

List<WebElement> allOptionsObj =selectFromDropDownObj.getOptions();

for(WebElement getAllOptions:allOptionsObj)
System.out.println(getAllOptions.getText());

This will print all the options contains in the DropDown and we get our Output same as below:

 

console Output

Another useful Method isMultiple:

This method tells us whether dropDown is single select or multi-select, it doesn’t accept anything and returns a boolean value.

 

isMultiple()

Now, if requirements changed that selected value needs to be deselected then we can perform below actions on the same.

• deselectByIndex(int index) : void –Deselect the option at the given index.
• deselectByValue(String Value): void –Deselect the matching option with given argument Value.
• deselectByVisibleText(String Text) : void – Deselect the matching option with given argument Text.

Now, let’s jump into the second Type of DropDown i.e Multi-select:

Before that let’s take a glance at below code

 

select Multiple options

1. In the above code , we first inspect the select element and then as usual instead of one select methods we can use more than one select methods.
2. One catchy method here is getFirstSelectedOption() it returns the WebElement and display which value from the dropdown is selected first by using getText.

That’s it we have mastered over the select class.

Below code for your reference and output of the same:

 

and output on the browser will be similar to :

package com.example.automation;
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;
/**
* @author Mandeep Kaur
* @Date 29 April,2020
*/
*/
*/
public class SeleniumConfig {

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

String path = System.getProperty(“user.dir”);
System.setProperty(“webdriver.chrome.silentOutput”, “true”);
System.setProperty(“webdriver.chrome.driver”, path + “/chromedriver”);

WebDriver driver = new ChromeDriver();
driver.get(“https://testuserautomation.github.io/DropDown/”);

//inspect over the Drop Down menu
WebElement selectCitiesObj = driver.findElement(By.xpath(“//select[@name=’Cities’]”));
Select selectFromDropDownObj = new Select(selectCitiesObj);

//select by index , index will start from 0 for first value
selectFromDropDownObj.selectByIndex(0);

//select by value, value to be found in HTML DOM
selectFromDropDownObj.selectByValue(“Texas”);

//select by Text given in the dropDownList
selectFromDropDownObj.selectByVisibleText(“CA”);

//getOptions : to get all the options from the drop-down
List allOptionsObj = selectFromDropDownObj.getOptions();

for (WebElement getAllOptions : allOptionsObj)
System.out.println(getAllOptions.getText());

//isMultiple : is it multi select drop-down if no then it returns false:
boolean isSuccess = selectFromDropDownObj.isMultiple();
System.out.println(isSuccess);

//MultiSelect DropDown
WebElement selectBillsObj = driver.findElement(By.xpath(“//select[@id=’Bill’]”));
Select selectBillFromDropDownObj = new Select(selectBillsObj);

selectBillFromDropDownObj.selectByValue(“Travel”);
System.out.println(selectBillFromDropDownObj.getFirstSelectedOption().getText());
selectBillFromDropDownObj.selectByIndex(3);
driver.close();

}
}