How to handle single select dropdown in Playwright?

The Answer

Use `locator.selectOption()` on `<select>` elements. You can select by value, label, or index. For custom dropdowns (non-native `<select>`), use `.click()` to open and then `getByRole` or `getByText` to pick an option.

Deep Dive Explanation

Always prefer `selectOption()` for native `<select>` elements as it's reliable and triggers the correct change events. For custom dropdowns built with divs/spans, treat them like regular UI interactions: click to open, then click the option.

example.spec.ts

// Native <select> dropdown
const dropdown = page.locator('#country-select');

// Select by visible text/label
await dropdown.selectOption({ label: 'United States' });

// Select by value attribute
await dropdown.selectOption({ value: 'US' });

// Select by index (0-based)
await dropdown.selectOption({ index: 2 });

// Verify selection
await expect(dropdown).toHaveValue('US');

// Custom dropdown (not a native <select>)
await page.getByRole('combobox', { name: 'Country' }).click();
await page.getByRole('option', { name: 'United States' }).click();