100% Free Forever
AI-Powered Learning
Industry Expert Content
Certificates & Badges
Learn At Your Own Pace
Testing

Handling Dropdowns and Checkboxes

How to work with native <select> dropdowns via the Select class, and correctly toggle checkboxes and radio buttons.

Element InteractionIntermediate9 min readJul 10, 2026
Analogies

The Select Class for Native Dropdowns

Selenium's Select class wraps a genuine <select> element and offers selectByVisibleText(String), selectByValue(String), and selectByIndex(int) to choose an option, plus getFirstSelectedOption() and getOptions() to inspect current state. Select only works on an actual <select> tag — many modern UI frameworks build custom dropdowns from styled <div> and <li> elements with JavaScript-driven show/hide behavior, and passing one of those to new Select(element) throws UnexpectedTagNameException. For those, you must click to open the fake dropdown and then click the desired option like any other element.

🏏

Cricket analogy: Using the Select class's selectByVisibleText is like calling out a player by the name printed on their jersey rather than their squad number — it works only for a genuine <select> dropdown, just as calling a name only works within an official team sheet, not an ad-hoc fan list.

Checkboxes and Radio Buttons

Checkboxes and radio buttons are toggled with the same click() call as any other element, but click() always flips the current state rather than setting it to a specific value — clicking an already-checked checkbox unchecks it. Because of this, always call isSelected() first to check the current state before deciding whether to click, especially in test setup code that must guarantee a checkbox ends up checked or unchecked regardless of its starting state, rather than blindly clicking and hoping for the best.

🏏

Cricket analogy: Checking isSelected() before calling click() on a checkbox is like a fielder checking the scoreboard before appealing for a wicket that's already given — clicking an already-checked checkbox without checking state first just toggles it back off, undoing the intended selection.

Multi-Select Dropdowns

Some <select multiple> elements allow choosing several options at once; the Select class exposes isMultiple() to detect this before attempting multiple selections, since calling selectByVisibleText() repeatedly on a single-select dropdown just re-selects a single option each time rather than accumulating a set. For multi-selects, getAllSelectedOptions() returns every currently chosen WebElement, and deselectAll() clears every selection in one call — deselectAll() intentionally throws UnsupportedOperationException on a single-select dropdown, since deselecting all options there is meaningless (one option is always selected).

🏏

Cricket analogy: getAllSelectedOptions() on a multi-select is like requesting the full list of all-rounders currently selected in a fantasy cricket squad, rather than just one — and deselectAll() is like clearing the whole squad list at once to start a fresh selection.

java
// Native single-select dropdown
WebElement countryDropdown = driver.findElement(By.id("country"));
Select select = new Select(countryDropdown);
select.selectByVisibleText("India");
select.selectByValue("IN");
select.selectByIndex(2);

// Checkbox: check current state before toggling
WebElement newsletterCheckbox = driver.findElement(By.id("subscribe"));
if (!newsletterCheckbox.isSelected()) {
    newsletterCheckbox.click();
}

// Multi-select dropdown
WebElement skillsDropdown = driver.findElement(By.id("skills"));
Select multiSelect = new Select(skillsDropdown);
if (multiSelect.isMultiple()) {
    multiSelect.selectByVisibleText("Java");
    multiSelect.selectByVisibleText("Python");
    List<WebElement> chosen = multiSelect.getAllSelectedOptions();
    multiSelect.deselectAll();
}

new Select(element) throws UnexpectedTagNameException if the element isn't a genuine <select> tag. Many modern component libraries (React Select, Material UI Autocomplete, custom design systems) render dropdown-looking widgets from divs and lists — inspect the actual DOM before assuming the Select class applies.

For custom (non-native) dropdown widgets, the typical pattern is: click the element that opens the dropdown, wait for the option list container to become visible, then findElement/click the specific option by its text or a data attribute, exactly like interacting with any other clickable element.

  • The Select class only works on genuine <select> elements, not custom div-based dropdown widgets.
  • selectByVisibleText, selectByValue, and selectByIndex are the three ways to choose an option.
  • click() on a checkbox always toggles current state; call isSelected() first to avoid accidentally un-checking it.
  • isMultiple() detects whether a <select> supports multiple selections.
  • getAllSelectedOptions() returns every currently selected option in a multi-select.
  • deselectAll() clears all selections in a multi-select and throws UnsupportedOperationException on a single-select.
  • Custom dropdown widgets require manual click-to-open then click-the-option handling, not the Select class.

Practice what you learned

Was this page helpful?

Topics covered

#Testing#SeleniumStudyNotes#TestingQA#HandlingDropdownsAndCheckboxes#Handling#Dropdowns#Checkboxes#Select#StudyNotes#SkillVeris