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.

If it is for evaluation / assertion only, then there is expect [to_have_value](https://playwright.dev/python/docs/api/class-locatorassertions#locator-assertions-to-have-value) — mfit, Aug 02 '23 at 11:43

score 7 · Answer 1 · answered Sep 11 '21 at 10:31

<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")

score 5 · Answer 2 · answered Nov 13 '22 at 12:04

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.)

Thanks, that really helped me! For those using TypeScript, `sel` in this example should be of type `HTMLSelectElement` — makeiteasy, Nov 22 '22 at 14:16
So, with the help from https://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);` — Brian Hong, Jul 12 '23 at 16:48

score 2 · Answer 3 · answered Feb 11 '21 at 15:10

2

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")

answered Feb 11 '21 at 15:10

hardkoded

18,915
3
52
64

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

3 Answers3