Dropdown Automation Practice

Master native select, multi-select, custom listbox, and searchable combobox interactions in Selenium, Playwright, and Cypress.

Beginner12 min6 scenarios14 test cases

Interactive Scenarios

S01Select Fruit by Visible Text

Select Fruit

No fruit selected

S02Select Country by Value Attribute

Select Country

No country selected

S03Select Last Language and Read All Options

Select Language

Languages available: 4

S04Multi-Select Superheroes

Select Superheroes

No heroes selected

S05Custom Dropdown Listbox

Priority not selected

S06Searchable City Combobox

City

empty

No city selected

Showing 14 test cases

ID	Scenario	Type	Priority
DD_001	Select Apple from the fruit dropdown by visible text Expected: Fruit select value is apple and the result confirms Apple ✅ positivehigh	positive	high
DD_002	Verify fruit dropdown placeholder before selection Expected: Default option is selected and has an empty value ✅ positivemedium	positive	medium
DD_003	Select India from the country dropdown by value Expected: Country select value is india and visible text is India ✅ positivehigh	positive	high
DD_004	Verify the country dropdown option count Expected: Country dropdown contains five options including placeholder ✅ positivemedium	positive	medium
DD_005	Select the last programming language option Expected: Language select value is typescript ✅ positivehigh	positive	high
DD_006	Read all programming language option labels Expected: All labels are available in the expected order ✅ positivemedium	positive	medium
DD_007	Select multiple superheroes in a native multi-select Expected: Batman and Aquaman are selected together ✅ positivehigh	positive	high
DD_008	Deselect a selected superhero Expected: Only the remaining selected hero stays checked ⚠️ edgemedium	edge	medium
DD_009	Open the custom priority dropdown by role Expected: The listbox appears with three priority options ✅ positivehigh	positive	high
DD_010	Choose High Priority from the custom dropdown Expected: Trigger text and result update to High Priority ✅ positivehigh	positive	high
DD_011	Locate custom dropdown option with a scoped data attribute Expected: The correct repeated option is clicked without relying on index ✅ positivemedium	positive	medium
DD_012	Search city combobox filters options Expected: Typing Pun shows Pune as a selectable option ✅ positivehigh	positive	high
DD_013	Select a city using a dynamic city id Expected: City result confirms Pune with city-pune as the business id ✅ positivemedium	positive	medium
DD_014	Use XPath sibling traversal for the City combobox Expected: The input is found from the nearby City label ⚠️ edgemedium	edge	medium

Overview

Dropdown tests start with native HTML select elements, then become more realistic with custom listboxes and searchable comboboxes. Use semantic roles first, then scope with data attributes, text, and XPath relationships when the DOM is repeated or nested.

1. Select by visible text

Visible-text selection is readable and mirrors how a tester describes the action. It is ideal when option labels are stable.

TypeScript

// Playwright
await page.locator('#fruitSelect').selectOption({ label: 'Apple' });
await expect(page.locator('#fruitSelect')).toHaveValue('apple');

2. Select by value attribute

Value-based selection is useful when the label may change but the submitted value is stable, such as country codes or business ids.

TypeScript

// Playwright
await page.locator('#countrySelect').selectOption('india');
await expect(page.locator('#countrySelect')).toHaveValue('india');

3. Select last option and read all options

Reading options lets you assert the choices loaded correctly before selecting one. This is a common guard for dynamic dropdown data.

TypeScript

// Playwright
const options = await page.locator('#languageSelect option').allTextContents();
await page.locator('#languageSelect').selectOption({ index: options.length - 1 });

4. Multi-select dropdown

Native multi-select controls can hold more than one selected option. Assert both the selected values and the checked option count.

TypeScript

// Playwright
await page.locator('#heroSelect').selectOption(['batman', 'aquaman']);
await expect(page.locator('#heroSelect option:checked')).toHaveCount(2);

5. Custom dropdown listbox

Custom dropdowns are usually buttons plus listboxes. Automate them by opening the trigger, scoping to the listbox, and choosing an option by role, text, or business attribute.

TypeScript

// Playwright
await page.getByTestId('priority-dropdown-trigger').click();
await page.getByTestId('priority-dropdown-list')
  .getByRole('option', { name: 'High Priority' })
  .click();

6. Searchable combobox

Searchable comboboxes combine typing and option selection. They are excellent practice for role locators, filtered text, dynamic ids, and XPath sibling traversal.

TypeScript

// Playwright
await page.getByRole('combobox', { name: 'City' }).fill('Pun');
await page.getByRole('option', { name: 'Pune' }).click();

Method Summary

Quick reference across Selenium, Playwright, and Cypress.

Action	Selenium	Playwright JS	Playwright PY	Cypress
Select by visible text	`selectByVisibleText(text)`	`selectOption({ label })`	`select_option(label=label)`	`.select(label)`
Select by value	`selectByValue(value)`	`selectOption(value)`	`select_option(value)`	`.select(value)`
Select by index	`selectByIndex(index)`	`selectOption({ index })`	`select_option(index=index)`	`.find('option').eq(index)`
Get all options	`getOptions()`	`locator('option').allTextContents()`	`locator('option').all_text_contents()`	`.find('option')`
Get selected values	`getAllSelectedOptions()`	`locator('option:checked')`	`locator('option:checked')`	`option:selected`
Custom option	`By.xpath(role/text)`	`getByRole('option')`	`get_by_role('option')`	`.contains('[role=option]')`

FAQ