How to Select DropDown Value in Playwright Using selectOption()

Learn multiple ways to select a dropdown value in Playwright, with code examples and tips for different scenarios.

A dropdown is a frequently used web element in registration forms and filters. Selecting a value from a dropdown is a common task when working with web automation using tools like Playwright.

In this article, you will learn how to select a value from a drop-down list by value, visible text, and index in Playwright. You can use the selectOption() method to select a value.

What is a Dropdown in HTML?

A dropdown (also called a select box or list box) is an HTML element used to choose a single option from a list. Here’s what a typical dropdown looks like in HTML:

<select id="country">
  <option value="country1">USA</option>
  <option value="country2">India</option>
  <option value="country3">United Kingdom</option>
</select>

To interact with this dropdown element in Playwright, you can use the selectOption() method.

How to Select a Dropdown Value in Playwright

There are three ways to select a value from a dropdown in Playwright using the selectOption() method.

1. Select by Value

await page.selectOption('#dropdown', 'country3');

This selects the option where the value is “country3”. It’s the most reliable way to select dropdown values.

2. Select by Label (Visible Text)

await page.selectOption('#dropdown', { label: 'United Kingdom' });

You can use this when you want to select an option based on the visible text shown in the dropdown.

3. Select by Index

await page.selectOption('#dropdown', { index: 3 });

This selects the fourth option (index starts at 0). You can select a value by index if the values or labels are dynamic, but the order is fixed.

Playwright example test script to select a value from the dropdown

Here is a full example of a playwright test script in typescript(JavaScript) to select a value from a drop-down using value, visible text, and index.

const { test, expect } = require('@playwright/test');

test('Select value from dropdown using value, visible text and index', async ({ page }) => {
  await page.goto('https://only-testing-blog.blogspot.com/2025/04/playwright-practice-page.html');
  //Select value from dropdown using value.
  await page.selectOption('#dropdown', 'country1');
  await expect(page.locator('#dropdownOutput')).toContainText('Selected: country1');
  //Select value from dropdown using visible text.
  await page.selectOption('#dropdown', { label: 'India' });
  await expect(page.locator('#dropdownOutput')).toContainText('Selected: country2');
  //Select value from dropdown using index.
  await page.selectOption('#dropdown', { index: 3 });
  await expect(page.locator('#dropdownOutput')).toContainText('Selected: country3');
});

Playwright code example selecting dropdown value using selectOption method.

Handling Dynamic Dropdowns

If your dropdown is generated by JavaScript or rendered asynchronously, use waitForSelector before selecting:

await page.waitForSelector('#dropdown');
await page.selectOption('#dropdown', 'USA');

Here, the waitForSelector() method will wait until the dropdown is visible on the page.

Selecting multiple values from a multi-select dropdown

If you are working with a multi-select drop-down, then pass an array of values to select multiple values from the drop-down.

await page.selectOption('#multiSelect', ['India', 'UK']);

Selecting a value from the custom div-based dropdown

The selectOption() method will not work if your dropdown is rendered using a custom div tag. In this case, you can use the locator().click() method to simulate user interaction.

Get Selected Value from Dropdown in Playwright

If you want to get selected values from a drop-down, then you can use page.$eval() in Playwright.

const { test, expect } = require('@playwright/test');

test('Get value from dropdown Playwright', async ({ page }) => {
  await page.goto('https://only-testing-blog.blogspot.com/2025/04/playwright-practice-page.html');
  await page.waitForSelector('#dropdown');
  await page.selectOption('#dropdown', 'country2');
  const value = await page.$eval('#dropdown', el => el.value);
  console.log('Selected value:', value);
});

This test script will get the selected value from the dropdown and print it to the console.

Winding Up

Selecting a dropdown value in Playwright is easy using value, visible text, and index. You can use the selectOption() method to select a value from a drop-down.

Aravind

Hi, I’m Aravind, a seasoned Automation Test Engineer with 17+ years of industry experience. I specialize in tools like Selenium, JMeter, Appium, and Excel automation. Through this blog, I share practical tutorials, tips, and real-world insights to help testers and developers sharpen their automation skills.