How to select a dropdown value in Selenium WebDriver using Java

Learn how to select a dropdown value in selenium webdriver using java with practical examples, diagrams, and best practices. Covers java, selenium-webdriver development techniques with visual expla...

Categories:

Hero image for How to select a dropdown value in Selenium WebDriver using Java

Learn how to effectively interact with and select values from dropdown elements in web applications using Selenium WebDriver and Java, covering various selection methods and best practices.

Dropdown menus, also known as <select> elements, are common components in web forms. Automating their interaction is a fundamental task in web testing. Selenium WebDriver provides robust capabilities to handle these elements, allowing you to select options by visible text, value attribute, or index. This article will guide you through the process using Java, offering practical code examples and best practices.

Understanding the `<select>` Element

Before diving into the code, it's crucial to understand the structure of an HTML dropdown. A standard dropdown is represented by the <select> tag, which contains multiple <option> tags. Each <option> tag represents a selectable item in the dropdown. Key attributes to note are value (the internal value submitted with the form) and the visible text (what the user sees).

<select id="countrySelect" name="country">
  <option value="usa">United States</option>
  <option value="can">Canada</option>
  <option value="mex">Mexico</option>
</select>

Example HTML structure of a dropdown element

The `Select` Class in Selenium

Selenium WebDriver provides a dedicated Select class in the org.openqa.selenium.support.ui package to interact with <select> elements. This class simplifies the process of selecting options, as it encapsulates common operations. To use it, you first need to locate the dropdown element using a WebElement and then instantiate the Select class with that WebElement.

flowchart TD
    A[Start]
    B{Locate Dropdown Element}
    C[Create Select Object]
    D{Choose Selection Method}
    E[Select by Visible Text]
    F[Select by Value]
    G[Select by Index]
    H[End]

    A --> B
    B --> C
    C --> D
    D --> E
    D --> F
    D --> G
    E --> H
    F --> H
    G --> H

Workflow for selecting a dropdown value using Selenium's Select class

The Select class offers three primary methods for selecting an option from a dropdown. Each method is suitable for different scenarios, depending on the information you have about the option you want to select.

💡

Always ensure that the WebElement you pass to the Select class constructor is indeed a <select> tag. Passing any other element type will result in an UnexpectedTagNameException.

1. Selecting by Visible Text

This is often the most intuitive method, as it allows you to select an option based on the text that is displayed to the user. It's useful when you know the exact label of the option you want to choose.

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 DropdownSelection {
    public static void main(String[] args) {
        // Setup WebDriver (e.g., ChromeDriver)
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
        WebDriver driver = new ChromeDriver();
        driver.get("http://example.com/your-page-with-dropdown"); // Replace with your URL

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

        // Create a Select object
        Select select = new Select(dropdownElement);

        // Select by visible text
        select.selectByVisibleText("Canada");
        System.out.println("Selected option by visible text: " + select.getFirstSelectedOption().getText());

        // Close the browser
        driver.quit();
    }
}

Java code to select a dropdown option by its visible text

2. Selecting by Value Attribute

The value attribute of an <option> tag is often used for internal processing or database storage. If you know this internal value, selectByValue() is a reliable method, especially when the visible text might change or be localized.

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 DropdownSelectionByValue {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
        WebDriver driver = new ChromeDriver();
        driver.get("http://example.com/your-page-with-dropdown");

        WebElement dropdownElement = driver.findElement(By.id("countrySelect"));
        Select select = new Select(dropdownElement);

        // Select by value attribute
        select.selectByValue("usa");
        System.out.println("Selected option by value: " + select.getFirstSelectedOption().getText());

        driver.quit();
    }
}

Java code to select a dropdown option by its 'value' attribute

3. Selecting by Index

Each option in a dropdown has an index, starting from 0 for the first option. selectByIndex() is useful when the order of options is stable and you need to select a specific position, or when visible text and value are dynamic or hard to predict.

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 DropdownSelectionByIndex {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
        WebDriver driver = new ChromeDriver();
        driver.get("http://example.com/your-page-with-dropdown");

        WebElement dropdownElement = driver.findElement(By.id("countrySelect"));
        Select select = new Select(dropdownElement);

        // Select by index (e.g., 0 for the first option, 1 for the second)
        select.selectByIndex(2); // Selects the third option (Mexico in our example)
        System.out.println("Selected option by index: " + select.getFirstSelectedOption().getText());

        driver.quit();
    }
}

Java code to select a dropdown option by its index

⚠️

Using selectByIndex() can be fragile if the order of options in the dropdown changes frequently. Prefer selectByVisibleText() or selectByValue() when possible for more robust tests.

Deselecting Options (for Multi-Select Dropdowns)

If a <select> element has the multiple attribute, it allows selecting more than one option. The Select class provides methods to deselect options as well. For single-select dropdowns, these methods will throw an UnsupportedOperationException.

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

Example HTML for a multi-select dropdown

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 MultiSelectDropdown {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
        WebDriver driver = new ChromeDriver();
        driver.get("http://example.com/your-page-with-multi-dropdown");

        WebElement multiSelectElement = driver.findElement(By.id("multiSelect"));
        Select multiSelect = new Select(multiSelectElement);

        // Check if it's a multi-select dropdown
        if (multiSelect.isMultiple()) {
            // Select multiple options
            multiSelect.selectByVisibleText("Apple");
            multiSelect.selectByValue("cherry");

            System.out.println("Selected options:");
            multiSelect.getAllSelectedOptions().forEach(option -> System.out.println("- " + option.getText()));

            // Deselect an option
            multiSelect.deselectByVisibleText("Apple");
            System.out.println("\nAfter deselecting Apple, selected options:");
            multiSelect.getAllSelectedOptions().forEach(option -> System.out.println("- " + option.getText()));

            // Deselect all options
            multiSelect.deselectAll();
            System.out.println("\nAfter deselecting all, selected options count: " + multiSelect.getAllSelectedOptions().size());
        } else {
            System.out.println("This is not a multi-select dropdown.");
        }

        driver.quit();
    }
}

Java code for interacting with a multi-select dropdown

Common Pitfalls and Best Practices

When working with dropdowns, keep the following in mind to avoid common issues and write more robust tests:

💡

Always use explicit waits before interacting with dropdowns to ensure the element is present and clickable, especially in dynamic web applications. This prevents NoSuchElementException or ElementNotInteractableException.

Dynamic Dropdowns: Some dropdowns are not standard <select> elements but are custom-built using <div>, <ul>, or <li> tags with JavaScript. The Select class will not work for these. For such cases, you'll need to click the dropdown to open it, then locate and click the desired option element.
Stale Element Reference: If the page reloads or the dropdown element is re-rendered after you've located it, your WebElement reference might become stale. Always re-locate the element if you suspect this might happen.
Verification: After selecting an option, it's good practice to verify that the correct option has indeed been selected. You can use select.getFirstSelectedOption().getText() to get the currently selected option's text and assert against it.

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.ExpectedConditions;
import org.openqa.selenium.support.ui.Select;
import org.openqa.selenium.support.ui.WebDriverWait;
import java.time.Duration;

public class DropdownVerification {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
        WebDriver driver = new ChromeDriver();
        driver.get("http://example.com/your-page-with-dropdown");

        // Use WebDriverWait for robustness
        WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
        WebElement dropdownElement = wait.until(ExpectedConditions.presenceOfElementLocated(By.id("countrySelect")));

        Select select = new Select(dropdownElement);
        select.selectByVisibleText("Canada");

        // Verification
        String selectedOptionText = select.getFirstSelectedOption().getText();
        if (selectedOptionText.equals("Canada")) {
            System.out.println("Successfully selected Canada.");
        } else {
            System.out.println("Failed to select Canada. Current selection: " + selectedOptionText);
        }

        driver.quit();
    }
}

Example of using explicit waits and verifying dropdown selection

How to select a dropdown value in Selenium WebDriver using Java

Mastering Dropdown Selection in Selenium WebDriver with Java

Understanding the <select> Element

The Select Class in Selenium

Methods for Selecting Dropdown Values

1. Selecting by Visible Text

2. Selecting by Value Attribute

3. Selecting by Index

Deselecting Options (for Multi-Select Dropdowns)

Common Pitfalls and Best Practices

Understanding the `<select>` Element

The `Select` Class in Selenium