How do you select a value from a dropdown in Playwright?

Answer

Selecting Dropdown Values in Playwright

Native HTML )

For React/Angular/Material UI dropdowns that are built with <div> or <ul>:

TypeScript

// Step 1: Click to open the dropdown
await page.getByRole('combobox', { name: 'Country' }).click();

// Step 2: Wait for options to appear and click the desired one
await page.getByRole('option', { name: 'United States' }).click();

// Or using text locator
await page.locator('.dropdown-menu').getByText('United States').click();

Material UI / Ant Design / Select2 Pattern

TypeScript

// Click the dropdown trigger
await page.locator('[data-testid="country-select"]').click();

// Wait for dropdown list to be visible
await page.locator('.select-dropdown').waitFor({ state: 'visible' });

// Click the option
await page.locator('.select-option').filter({ hasText: 'India' }).click();

Full Example

TypeScript

import { test, expect } from '@playwright/test';

test('submit registration form', async ({ page }) => {
  await page.goto('/register');

  await page.getByLabel('First Name').fill('John');

  // Native select
  await page.getByLabel('Country').selectOption('US');

  // Custom dropdown
  await page.getByTestId('role-select').click();
  await page.getByRole('option', { name: 'QA Engineer' }).click();

  await page.getByRole('button', { name: 'Register' }).click();
  await expect(page).toHaveURL('/welcome');
});