🎯 How to Select a Value from a DropDown in Selenium WebDriver?

πŸ“Œ What is a DropDown in Selenium?

A DropDown is a UI element that allows users to select a value from multiple options. In HTML, dropdowns are created using the <select> tag, with multiple <option> elements inside.

βœ… Example of a DropDown in HTML

<select id="country">
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="in">India</option>
</select>

πŸš€ Handling DropDowns Using Selenium WebDriver

In Selenium, we use the Select class to interact with dropdowns.

πŸ”Ή 1️⃣ Selecting a Value by Visible Text

The easiest way to select a dropdown value is by using the visible text of the option.

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;

public class SelectDropdownExample {
    public static void main(String[] args) {
        WebDriver driver = new ChromeDriver();
        driver.get("https://example.com");

        // Locate the dropdown element
        WebElement dropdown = driver.findElement(By.id("country"));

        // Create Select object and select by visible text
        Select select = new Select(dropdown);
        select.selectByVisibleText("India");

        driver.quit();
    }
}

πŸ”Ή Example: This selects "India" from the dropdown.


πŸ”Ή 2️⃣ Selecting a Value by Index

Each option in a dropdown has an index starting from 0. We can select an option using the index.

// Select the 2nd option (index starts from 0)
select.selectByIndex(1); 

πŸ”Ή Example: If the dropdown contains United States, United Kingdom, India, selecting index 1 chooses "United Kingdom".


πŸ”Ή 3️⃣ Selecting a Value by Value Attribute

Each <option> tag may have a value attribute. We can select an option using its value.

// Select using value attribute
select.selectByValue("in");

πŸ”Ή Example: If <option value="in">India</option>, it selects "India".


πŸ”„ Handling Multi-Select DropDowns

Some dropdowns allow multiple selections by setting multiple="multiple" in the HTML.

βœ… Example HTML for Multi-Select

<select id="fruits" multiple="multiple">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
</select>

βœ… Handling Multi-Select with Selenium

// Locate multi-select dropdown
Select multiSelect = new Select(driver.findElement(By.id("fruits")));

// Select multiple options
multiSelect.selectByVisibleText("Apple");
multiSelect.selectByVisibleText("Banana");

// Deselect an option
multiSelect.deselectByVisibleText("Apple");

// Deselect all
multiSelect.deselectAll();

βœ”οΈ Note: Single-select dropdowns do not support deselect() methods.


πŸ•΅οΈβ€β™‚οΈ Checking if DropDown is Multi-Select

if (select.isMultiple()) {
    System.out.println("This is a multi-select dropdown.");
} else {
    System.out.println("This is a single-select dropdown.");
}

πŸ” Getting All Available Options

To retrieve all options inside a dropdown:

List<WebElement> options = select.getOptions();
for (WebElement option : options) {
    System.out.println(option.getText());
}

πŸ† Handling Dynamic DropDowns (Without <select> Tag)

Some dropdowns are custom-built (e.g., JavaScript-based) and do not use <select>. In such cases, we use click actions.

βœ… Example HTML for Dynamic DropDown

<div class="dropdown">
    <button class="dropdown-toggle">Select Country</button>
    <div class="dropdown-menu">
        <a class="dropdown-item">United States</a>
        <a class="dropdown-item">United Kingdom</a>
        <a class="dropdown-item">India</a>
    </div>
</div>

βœ… Handling a Dynamic DropDown in Selenium

// Click dropdown to open options
driver.findElement(By.className("dropdown-toggle")).click();

// Select "India" by clicking on it
driver.findElement(By.xpath("//a[text()='India']")).click();

🎯 Conclusion

βœ” Use Select class for dropdowns with the <select> tag.
βœ” Use selectByVisibleText(), selectByIndex(), selectByValue() for selecting options.
βœ” Use JavaScript or XPath for custom dropdowns that do not use <select>.
βœ” Check isMultiple() to verify if a dropdown supports multiple selections.
βœ” Use getOptions() to fetch all available values in a dropdown.

Now, you can confidently automate dropdowns in Selenium WebDriver! πŸš€πŸ”₯