Introduction to Select Lists

Understanding the Select class and when to use it for dropdown interactions

Concept

In this lesson, you will learn how to work with HTML <select> elements using Selenium's Select support class.

Select lists behave differently from normal elements because they:

Allow choosing one or many options
Provide built-in methods for selecting by:
- Visible text
- value attribute
- Index (position)

Important Limitation

The Select class only works with real <select> / <option> elements, NOT custom dropdowns built with <div>, <li>, or other elements.

Single-Select <select>

Allows only one option to be selected at a time.

<select name="country">
  <option value="us">USA</option>
  <option value="uk">UK</option>
  <option value="ca">Canada</option>
</select>

When to use:

Country, Currency, Status fields
Anywhere only one choice should be valid

Multi-Select <select multiple>

Uses the multiple attribute to allow multiple selections.

<select name="skills" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

When to use:

Skills, Hobbies, Tags selection
Multiple categories or filters

The Select Class

The Select class wraps a <select> WebElement and provides convenient helper methods.

Construction:

Select select = new
Select(element);

Information:

getOptions(): All options
getAllSelectedOptions(): Selected options
isMultiple(): Check if multi-select

Selection:

selectByVisibleText(): By label
selectByValue(): By value attr
selectByIndex(): By position

✓ Works With

<select>
<option>Option 1</option>
<option>Option 2</option>
</select>

✓ Native HTML select element

✗ Does NOT Work With

<div class="dropdown">
<li>Option 1</li>
<li>Option 2</li>
</div>

✗ Custom dropdown (use click() instead)

Basic Usage Example

BasicSelectExample.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
// Step 1: Locate the <select> element
WebElement selectElement = driver.findElement(By.id("country-select"));

// Step 2: Wrap it in a Select object
Select countrySelect = new Select(selectElement);

// Step 3: Select an option by visible text
countrySelect.selectByVisibleText("United States");

// Alternative: Select by value attribute
countrySelect.selectByValue("us");

// Alternative: Select by index (0-based)
countrySelect.selectByIndex(0);

// Get all available options
List<WebElement> allOptions = countrySelect.getOptions();
System.out.println("Total options: " + allOptions.size());

// Get currently selected option
WebElement selectedOption = countrySelect.getFirstSelectedOption();
System.out.println("Selected: " + selectedOption.getText());

driver.quit();

Code Breakdown

driver.findElement(By.id("country-select")): First, locate the <select> element using any standard locator.
Select countrySelect = new Select(selectElement);: Wrap the WebElement in a Select object to access helper methods. This is required before you can use any Select-specific methods.
countrySelect.selectByVisibleText("United States");: Selects the option whose visible text matches "United States". This is the most readable method.
countrySelect.getOptions();: Returns a List<WebElement> of all <option> elements in the select.
countrySelect.getFirstSelectedOption();: Returns the currently selected option as a WebElement. Useful for verification.

Pro Tip

Always Locate First

Always locate the <select> element first, then create the Select object. Don't try to create Select directly.

Check for Custom Dropdowns

Many modern frameworks use custom dropdowns (React Select, Material-UI, etc.) that don't use <select>. For these, use standard click() and sendKeys().

Verify With getFirstSelectedOption()

After selecting, use getFirstSelectedOption() to verify the correct option was selected. This catches selection failures early.

Concept

In this lesson, you will learn how to work with HTML <select> elements using Selenium's Select support class.

Select lists behave differently from normal elements because they:

Allow choosing one or many options

Provide built-in methods for selecting by:

Visible text
value attribute
Index (position)

Important Limitation

The Select class only works with real <select> / <option> elements, NOT custom dropdowns built with <div>, <li>, or other elements.

Single-Select <select>

Allows only one option to be selected at a time.

<select name="country">
  <option value="us">USA</option>
  <option value="uk">UK</option>
  <option value="ca">Canada</option>
</select>

When to use:

Country, Currency, Status fields
Anywhere only one choice should be valid

Multi-Select <select multiple>

Uses the multiple attribute to allow multiple selections.

<select name="skills" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

When to use:

Skills, Hobbies, Tags selection
Multiple categories or filters

The Select Class

The Select class wraps a <select> WebElement and provides convenient helper methods.

Construction:

Select select = new
Select(element);

Information:

getOptions(): All options
getAllSelectedOptions(): Selected options
isMultiple(): Check if multi-select

Selection:

selectByVisibleText(): By label
selectByValue(): By value attr
selectByIndex(): By position

✓ Works With

<select>
<option>Option 1</option>
<option>Option 2</option>
</select>

✓ Native HTML select element

✗ Does NOT Work With

<div class="dropdown">
<li>Option 1</li>
<li>Option 2</li>
</div>

✗ Custom dropdown (use click() instead)

Basic Usage Example

BasicSelectExample.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
// Step 1: Locate the <select> element
WebElement selectElement = driver.findElement(By.id("country-select"));

// Step 2: Wrap it in a Select object
Select countrySelect = new Select(selectElement);

// Step 3: Select an option by visible text
countrySelect.selectByVisibleText("United States");

// Alternative: Select by value attribute
countrySelect.selectByValue("us");

// Alternative: Select by index (0-based)
countrySelect.selectByIndex(0);

// Get all available options
List<WebElement> allOptions = countrySelect.getOptions();
System.out.println("Total options: " + allOptions.size());

// Get currently selected option
WebElement selectedOption = countrySelect.getFirstSelectedOption();
System.out.println("Selected: " + selectedOption.getText());

driver.quit();

Code Breakdown

driver.findElement(By.id("country-select")): First, locate the <select> element using any standard locator.
Select countrySelect = new Select(selectElement);: Wrap the WebElement in a Select object to access helper methods. This is required before you can use any Select-specific methods.
countrySelect.selectByVisibleText("United States");: Selects the option whose visible text matches "United States". This is the most readable method.
countrySelect.getOptions();: Returns a List<WebElement> of all <option> elements in the select.
countrySelect.getFirstSelectedOption();: Returns the currently selected option as a WebElement. Useful for verification.

Pro Tip

Always Locate First

Always locate the <select> element first, then create the Select object. Don't try to create Select directly.

Check for Custom Dropdowns

Many modern frameworks use custom dropdowns (React Select, Material-UI, etc.) that don't use <select>. For these, use standard click() and sendKeys().

Verify With getFirstSelectedOption()

After selecting, use getFirstSelectedOption() to verify the correct option was selected. This catches selection failures early.