How to select a select option in Playwright.ts

Selects one or multiple options in the <select> element with locator.selectOption(). You can specify option value, or label to select. Multiple options can be selected.

// Single selection matching the value or label
await page.getByLabel('Choose a color').selectOption('blue');

// Single selection matching the label
await page.getByLabel('Choose a color').selectOption({ label: 'Blue' });

// Multiple selected items
await page.getByLabel('Choose multiple colors').selectOption(['red', 'green', 'blue']);

// Example

import { test } from "@playwright/test";

const PAGE_URL = "https://testautomationpractice.blogspot.com/";

test("Single select dropdown actions", async ({ page }) => {
  await page.goto(PAGE_URL);
  const dropdown = page.getByRole("listbox").and(page.locator("#country"));
  await dropdown.selectOption("India");
});