Inputsbeginner 8 min
Native Dropdown (Select) Element — Practice in Playwright, Selenium & Cypress
Practice dropdown select in Playwright & Selenium — selectOption, selectByVisibleText, and multi-select handling on a native <select> element.
Live element
Locators cheat-sheet
| data-testid | Role | Accessible label | What it is |
|---|---|---|---|
| country-select | combobox | Country | Native <select> with India / US / UK options. |
| selected-result | status | Selected country code | Renders the currently-selected country code. |
Reference solutions
import { test, expect } from '@playwright/test';
test('selects a country and reflects the code', async ({ page }) => {
await page.goto('/practice/dropdown-select');
const frame = page.frameLocator('iframe[title="Dropdown live widget"]');
await frame.getByTestId('country-select').selectOption('IN');
await expect(frame.getByTestId('selected-result')).toHaveText('Selected: IN');
await frame.getByTestId('country-select').selectOption({ label: 'United Kingdom' });
await expect(frame.getByTestId('selected-result')).toHaveText('Selected: UK');
});