Dropdown

Select options from dropdown menus

What you will learn

Differentiate native <select> (selectOption) from custom dropdowns (click + option)
Select by value, label, or index — and know when each breaks with localization
Wait for async-loaded options before selecting to avoid flaky test failures

Basic Dropdown

Select a single option from the dropdown

Choose a fruit

Selected: None

Multiple Selection

Select multiple options using Ctrl/Cmd + click

Choose colors (Ctrl/Cmd + click for multiple)

Selected: None

Grouped Options

Options organized by category using optgroup

Choose a vehicle

Selected: None

Disabled Dropdown

A dropdown that cannot be interacted with

Disabled select

Dropdown with Disabled Options

Some options cannot be selected

Some options are disabled

Current State

Live state preview

{
  "basic": "",
  "multiple": [],
  "grouped": ""
}

Testing Tips

Automation hints

✓ Use #select-basic, #select-multiple, #select-grouped for dropdown selection
✓ For multiple select, use Ctrl/Cmd+click or selectOption with array
✓ Test optgroup navigation in #select-grouped (Cars, Motorcycles, Trucks)
✓ Verify #select-disabled cannot be interacted with
✓ Check disabled options in #select-disabled-options are not selectable

Related Challenges

Dropdown

Select options from dropdown menus

What you will learn

Differentiate native <select> (selectOption) from custom dropdowns (click + option)
Select by value, label, or index — and know when each breaks with localization
Wait for async-loaded options before selecting to avoid flaky test failures

Basic Dropdown

Select a single option from the dropdown

Choose a fruit

Selected: None

Multiple Selection

Select multiple options using Ctrl/Cmd + click

Choose colors (Ctrl/Cmd + click for multiple)

Selected: None

Grouped Options

Options organized by category using optgroup

Choose a vehicle

Selected: None

Disabled Dropdown

A dropdown that cannot be interacted with

Disabled select

Dropdown with Disabled Options

Some options cannot be selected

Some options are disabled

Current State

Live state preview

{
  "basic": "",
  "multiple": [],
  "grouped": ""
}

Testing Tips

Automation hints

✓ Use #select-basic, #select-multiple, #select-grouped for dropdown selection
✓ For multiple select, use Ctrl/Cmd+click or selectOption with array
✓ Test optgroup navigation in #select-grouped (Cars, Motorcycles, Trucks)
✓ Verify #select-disabled cannot be interacted with
✓ Check disabled options in #select-disabled-options are not selectable

Related Challenges

Checkboxes

Easy

Radio Buttons

Easy

Text Input

Easy

Dropdown

What you will learn

Basic Dropdown

Multiple Selection

Grouped Options

Disabled Dropdown

Dropdown with Disabled Options

Current State

Testing Tips

Timer

Need Help?

Related Challenges

Checkboxes

Radio Buttons

Text Input

Dropdown

What you will learn

Basic Dropdown

Multiple Selection

Grouped Options

Disabled Dropdown

Dropdown with Disabled Options

Current State

Testing Tips

Timer

Need Help?

Related Challenges

Checkboxes

Radio Buttons

Text Input