How to find drop down web element on the page using selenium locators

In this article, I am going to explain to you, how to find out drop down element on the page using selenium locators, the first thing which I am going to do in my selenium test script is importing below package

import org.openqa.selenium.support.ui.Select;

1	import org.openqa.selenium.support.ui.Select;

Finding Element

Using id attribute, I am going to find out the drop down element on the page, here I am using annotations to find out the element but, you can use driver.findElement(By.name(“country”)), I am using name locator here to find out country

@FindBy(id = "country")
WebElement country;

1 2	@FindBy(id = "country") WebElement country;

The HTML for drop-down list is different than the normal HTML controls and it looks something like below, here every option you see in the below HTML contains a value attribute and option text which is in between options tags

<select>
  <option value="us-value">US</option>
  <option value="china-value">China</option>
  <option value="india-value">India</option>
  <option value="japan-value">Japan</option>
</select>

<option value="china-value">China</option>

<option value="india-value">India</option>

<option value="japan-value">Japan</option>

</select>

Selenium dropdown selection

Using select class which we imported earlier will be used to select the options tags first

Select country= new Select(country);
country.selectVisibleText("India");

1 2	Select country= new Select(country); country.selectVisibleText("India");

If you want to find out by text then you need to use below code

country.selectVisibleText("India");

1	country.selectVisibleText("India");

If you want to find out by value then you need to use below code

country.selectVisibleByValue("india-value")

1	country.selectVisibleByValue("india-value")

If you want to find out by index then use below

country.selectVisibleIndex(2) // this will select china in dropdwon list

1	country.selectVisibleIndex(2) // this will select china in dropdwon list

Selenium dropdown deselection

If you want to deselect the text which was already selected then you need to use below code

country.deselectByVisibleText("India");

1	country.deselectByVisibleText("India");

If you want to deselect by value then you need to use below code

country.deselectVisibleByValue("india-value")

1	country.deselectVisibleByValue("india-value")

If you want to deselect by index then use below

country.deselectVisibleIndex(2) // this will de-select china in dropdwon list

1	country.deselectVisibleIndex(2) // this will de-select china in dropdwon list

Selenium dropdown multiselection

You can use combination to select multiple items in the dropdown list, check below code, it will select India and china items in the dropdown list

country.selectVisibleByValue("india-value")
country.selectByIndex(2)

1 2	country.selectVisibleByValue("india-value") country.selectByIndex(2)

Dropdown selection example

I am going to test facebook registration date of birth drop-down list by using below code

package com.wyn.aem.utils.test;

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 org.testng.annotations.AfterSuite;
import org.testng.annotations.BeforeSuite;
import org.testng.annotations.Test;

public class SearchTest {

	public static void main(String[] args) {

		System.setProperty("webdriver.chrome.driver", "C:\\chromedriver.exe");

		WebDriver driver = new ChromeDriver();
		driver.get("https://www.facebook.com/");
		WebElement birthYear = driver.findElement(By.name("birthday_year"));
		WebElement birthDay = driver.findElement(By.name("birthday_day"));
		WebElement birthMonth = driver.findElement(By.name("birthday_month"));
	
		Select birthSelection = new Select(birthYear);
		Select birthDaySelection = new Select(birthDay);
		Select birthMonthSelection = new Select(birthMonth);
		
		birthSelection.selectByVisibleText("2015");
		birthDaySelection.selectByIndex(2);
		birthMonthSelection.selectByValue("2");

		driver.manage().window().maximize();
	}

}

package com.wyn.aem.utils.test;

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 org.testng.annotations.AfterSuite;

import org.testng.annotations.BeforeSuite;

import org.testng.annotations.Test;

public class SearchTest {

public static void main(String[] args) {

System.setProperty("webdriver.chrome.driver", "C:\\chromedriver.exe");

WebDriver driver = new ChromeDriver();

driver.get("https://www.facebook.com/");

WebElement birthYear = driver.findElement(By.name("birthday_year"));

WebElement birthDay = driver.findElement(By.name("birthday_day"));

WebElement birthMonth = driver.findElement(By.name("birthday_month"));

Select birthSelection = new Select(birthYear);

Select birthDaySelection = new Select(birthDay);

Select birthMonthSelection = new Select(birthMonth);

birthSelection.selectByVisibleText("2015");

birthDaySelection.selectByIndex(2);

birthMonthSelection.selectByValue("2");

driver.manage().window().maximize();

}

After executing above selenium drop-down selection code, the date of birth on the registration page of the facebook will be populated something like below

About Author

Raj

A technology enthusiast and a professional blogger from India. Through out my IT career, I have had the pleasure of working on various new technologies and built products like www.ziprides.com and some other products. Unfortunately, my attempts have not given me the desired results and as a result, I have finally decided to build a professional blog where I would like to share all my learnings and hoping to learn from other enthusiasts around the world.