Working with Multi-Select Dropdowns

Handle multi-select lists with selection, deselection, and verification methods

Concept

Multi-select dropdowns use the multiple attribute and allow selecting and deselecting several options simultaneously.

Key Difference

Unlike single-select, multi-select lists allow multiple options to be selected at once. Selecting a new option does NOT deselect previous selections.

Selection Methods

Same as single-select:

selectByVisibleText("Ham"): Select by visible label
selectByValue("eggs"): Select by value attribute
selectByIndex(2): Select by index position

These methods add to existing selections (don't clear previous selections)

Deselection Methods

Only available for multi-select:

deselectByVisibleText("Ham"): Deselect by visible label
deselectByValue("eggs"): Deselect by value attribute
deselectByIndex(2): Deselect by index position
deselectAll(): Clear all selections

Only for Multi-Select

Using deselect methods on single-select throws UnsupportedOperationException

Verification Methods

getAllSelectedOptions(): Returns a List<WebElement> of all currently selected <option> elements. Loop through to verify selections.
isMultiple(): Returns true if the select has the multiple attribute. Always check before using deselect methods.

Best Practice Notes

✓Use isMultiple() to confirm it's actually multi-select before using deselect methods
✓Use deselectBy... methods only on multi-selects to avoid confusion
✓Use getAllSelectedOptions() to verify multiple selections
✓Use deselectAll() to start with a clean slate

Interactive Practice

Imagine a page with a Breakfast Selector (multi-select):

Breakfast Selector (multi-select)

Choose your breakfast items (Hold Ctrl/Cmd to select multiple)

Selected: Eggs, Sausages

Options Details (Pre-selected: Eggs, Sausages):

Index 0: "Eggs" — value="eggs"
Index 1: "Ham" — value="ham"
Index 2: "Sausages" — value="sausages"
Index 3: "Onion gravy" — value="onion gravy"

Hold Ctrl/Cmd and click to select multiple items!

Manual interaction (what the student would do)

Notice Eggs and Sausages are pre-selected
Hold Ctrl/Cmd and click Ham to add it to the selection
Hold Ctrl/Cmd and click Onion gravy to add it as well
Click Eggs while holding Ctrl/Cmd to deselect it
Confirm the label shows "Selected: Ham, Sausages, Onion gravy"

Your Selenium code will automate these steps using the Select class's selection and deselection methods.

Java Code Example

MultiSelectExample.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
WebElement breakfastSelectElement = driver.findElement(By.id("multi"));
Select breakfastSelect = new Select(breakfastSelectElement);

// Verify it's a multi-select
if (breakfastSelect.isMultiple()) {
    System.out.println("This is a multi-select list");
}

// Multi-select: select "Ham" by value and "Onion gravy" by index
breakfastSelect.selectByValue("ham");
breakfastSelect.selectByIndex(3);  // "Onion gravy"

// Multi-select: deselect "Eggs" by value
breakfastSelect.deselectByValue("eggs");

// Inspect selected breakfast options
List<WebElement> selectedBreakfastOptions = breakfastSelect.getAllSelectedOptions();
System.out.println("Total selected: " + selectedBreakfastOptions.size());

for (WebElement option : selectedBreakfastOptions) {
    System.out.println("Selected: " + option.getText());
}
// Output:
// Selected: Ham
// Selected: Sausages
// Selected: Onion gravy

// Clear all selections
breakfastSelect.deselectAll();

driver.quit();

Code Breakdown

driver.findElement(By.id("multi")): Locates the Breakfast Selector <select> element using its id="multi".
Select breakfastSelect = new Select(breakfastSelectElement);: Wraps the breakfast <select> in a Select object, ready for multi-select operations.
breakfastSelect.isMultiple(): Returns true if the select has the multiple attribute. Always check this before using deselect methods to avoid exceptions.
breakfastSelect.selectByValue("ham");: Selects the "Ham" option using its value="ham". This adds to the existing selections (doesn't clear previous selections).
breakfastSelect.selectByIndex(3);: Selects the option at index 3 (0-based), which is "Onion gravy". Again, this adds to existing selections.
breakfastSelect.deselectByValue("eggs");: Deselects the "Eggs" option using its value="eggs". This only works because this is a multi-select list. Attempting this on a single-select will throw UnsupportedOperationException.
List<WebElement> selectedBreakfastOptions = breakfastSelect.getAllSelectedOptions();: Retrieves a List of all currently selected <option> elements. Use this to verify multiple selections.
for (WebElement option : selectedBreakfastOptions) { ... }: Loops through all selected options and prints their visible text. Output will be: Ham, Sausages, Onion gravy.
breakfastSelect.deselectAll();: Clears all selections in the multi-select list. Useful for starting with a clean slate.
driver.quit();: Closes the browser and ends the WebDriver session.

Pro Tip

Always Check isMultiple()

Always check select.isMultiple() before using deselect... methods to avoid UnsupportedOperationException.

Debug with getAllSelectedOptions

When debugging flaky multi-select tests, print out getAllSelectedOptions() to confirm exactly what's selected at each step in your scenario.

Use deselectAll() Wisely

Use deselectAll() at the start of your test to ensure a clean state, especially if the page has pre-selected options.