How can you get the selected option of a dropdown with Playwright

Question

I am using the C# Language Bindings of Playwright.

Example HTML:

<select id="txtType" name="Type" class="form-control">
        <option>Blog Posts</option>
        <option>Books</option>
        <option>Presentations</option>
        <option>Videos</option>
        <option>Podcasts</option>
        <option>Examples</option>
</select>

I know that I can use Page.SelectOptionAsync to set the selected option for the dropdown, but how do I get the currently selected ones?

When I have a look at all of the properties of the DropDown, I can't see any difference in the ElementHandles.

Vomiturition

If it is for evaluation / assertion only, then there is expect to_have_value – Morrie

Answer 1

<select id="element_id">
  <option value="1">Option 1</option>
  <option value="2" selected>Option 2</option>
<select>

For NodeJS Playwright

To get the selected option value (2) from the dropdown:

await page.$eval('#element_id', sel => sel.value)

To get the selected option text ("Option 2") from the dropdown:

await page.$eval('#element_id', sel => sel.options[sel.options.selectedIndex].textContent)

---

For C# just wrap the second argument in quotes:

await page.EvalOnSelectorAsync<string>("#element_id", "sel => sel.value")
await page.EvalOnSelectorAsync<string>("#element_id", "sel => sel.options[sel.options.selectedIndex].textContent")

Reinforce

Awesome, thank you. – Ginkgo

Answer 2

For the sake of completeness, here's a nicer option for NodeJS Playwright, in my opinion, using the locator evaluate function:

  test('should render correctly', async () => {
    // act
    await page.goto('http://localhost:' + localPort);

    // assert
    async function extractSelectedDisplayedValue(selectedOption) {
      return selectedOption.evaluate(sel => sel.options[sel.options.selectedIndex].textContent);
    }
    const selectedImageOption = page.locator('#imageSelect');
    expect(await extractSelectedDisplayedValue(selectedImageOption)).toBe('Option 1 ');
  }, 60_000)

(I know the question was about C#, but it pops up when you search for the issue in general, and my attempts in NodeJs took me here.)

Cider

Thanks, that really helped me! For those using TypeScript, sel in this example should be of type HTMLSelectElement – Pentapody

So, with the help from github.com/microsoft/playwright/discussions/12804, const select = this.page.locator('#UserAddress_State');const testContent = await select.evaluate((node: HTMLSelectElement) => node.options[node.options.selectedIndex].textContent); – Vardon

Answer 3

You can use EvalOnSelectorAsync, passing a CSS selector, and function expecting that element and returning the value of that element:

await page.EvalOnSelectorAsync<string>("#txtType", "el => el.value")

Fastidious

Answer 4

It's pretty old question, but now you can use:

await page.Locator("#txtType").InputValueAsync();

Magic