CODEWITHSUNDEEP
c#webautomationplaywrightplaywright-sharp
Andreas Willich
Andreas Willich

Reputation: 5835

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

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.

Upvotes: 12

Views: 25663

Answers (4)

Gucu112
Gucu112

Reputation: 957

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

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

Upvotes: 1

RobertG
RobertG

Reputation: 1706

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

Upvotes: 6

Artur A
Artur A

Reputation: 9159

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

Upvotes: 7

hardkoded
hardkoded

Reputation: 21695

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

Upvotes: 2

Related Questions