How do I select an option from a dropdown in Playwright?

For a native <select>, call selectOption() on its locator, for example getByLabel('City').selectOption('Kochi'). Pass a string to match the option's value or label, or { label: '...' } to match the visible label only.

This answer is one piece of Chapter 8: How Playwright Works.

Architecture: How Playwright Talks to the Browser
Actions: Clicking, Typing & Forms
Navigation & Page Events
Auto-Waiting & Actionability
Practice and interview questions: Playwright Fundamentals

selectOption() waits for the <select> to be ready and for the options you name to be present, selects them, and triggers the change and input events the page listens for. You do not open the list and click an option.

The orders page has three native dropdowns, each with a proper label. The test finds City with getByLabel('City'), selects Kochi, and checks the choice with toHaveValue('Kochi'). Clicking Apply then filters the table: result-count reads 5 orders matched, and an array toHaveText() checks that all five city cells say Kochi.

A string argument matches either the option's value or its label. When the two differ, say what you mean: { value: 'cancelled' } or { label: 'Cancelled' }. The last line of the test uses { label: '25' } on Rows per page. You can also pass an array to choose several options in a <select multiple>.

selectOption() only works on a real <select>; on anything else it throws. A custom combobox, like the courier picker on the fulfilment page, is typed into and clicked like any other widget.

qa-050.spec.js(https://practice.learnplayforge.com)

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

test('filter orders by choosing a city', async ({ page }) => {
  await page.goto('/orders.html?mock=static&seed=42&autologin=1');
  const city = page.getByLabel('City');

  await city.selectOption('Kochi');
  await expect(city).toHaveValue('Kochi');

  await page.getByRole('button', { name: 'Apply' }).click();
  await expect(page.getByTestId('result-count')).toHaveText('5 orders matched');
  await expect(page.getByTestId('cell-city')).toHaveText(['Kochi', 'Kochi', 'Kochi', 'Kochi', 'Kochi']);

  // An option can also be chosen by its visible label
  await page.getByLabel('Rows per page').selectOption({ label: '25' });
  await expect(page.getByLabel('Rows per page')).toHaveValue('25');
});

Output

1 passed (1.8s)

Test yourself

A <select> has <option value="cancelled">Cancelled</option>. Which call is certain to match it by its visible text?

AI can write the test now. The job is knowing whether it checks anything. That's what the course teaches, one chapter at a time.

163 lessons · 226 drills · start free

How do I select an option from a dropdown in Playwright?

Related questions