Get Selected Option
What is the official way to get the currently selected option from a select? I looked through https://playwright.dev/docs/input#select-options, but it only seems to list ways to select an option., not get an option. In the given example if I use locator.inputValue() then I get the value 1648 which is the right option, but I need the actual text of the option. If I use locator.innerText() then I get the the text of the first option, "Select One". Am I missing something obvious?
This thread is trying to answer question "What is the official way to get the currently selected option from a select in Playwright?"
you can access the selected option and get the text:
test('test select', async ({ page }) => {
await page.setContent([
`<select>`,
`<option value selected>One</option>`,
`<option value="2">Two</option>`,
`</select>`
].join('\n'));
await expect(page.locator('select > option[selected]')).toHaveText("One");
});Maybe something is broken in our app then because in the example I have given the selected option in the UI is the "Test" option which does not have the "selected" attribute.
You can use the :check pseudo-class to get the selected option:
test('test select', async ({ page }) => {
await page.setContent([
`<select>`,
`<option value selected>One</option>`,
`<option value="2">Two</option>`,
`</select>`
].join('\n'));
await expect(page.locator('select > option:checked')).toHaveText('One');
await page.locator('select').selectOption('2');
await expect(page.locator('select > option:checked')).toHaveText('Two');
});Related Ask AI answer for "How do I retrieve the value of the selected option in a dropdown using Playwright?".
Answer
Retrieving Selected Option in Playwright
You can easily get the currently selected option from a select element in Playwright using the page.getAttribute() method. This method allows you to fetch the value of a specific attribute for an element.
Here's a quick example:
const selectedOption = await page.getAttribute('select#mySelect', 'value');In this code snippet, 'select#mySelect' is the selector for the select element you're interested in. 'value' is the attribute name that corresponds to the value of each option in the select element.
The page.getAttribute() method returns a Promise that resolves to either null or a string. If no option is selected, it will return null.
If you're interested in other attributes of the currently selected option, such as its label or index, you can adjust your code like so:
const label = await page.getAttribute('select#mySelect', 'label');
const index = await page.getAttribute('select#mySelect', 'index');Keep in mind that these examples assume you've already navigated to a page using Playwright and have access to a valid instance of page.
For the most accurate information, always refer back to the official Playwright documentation. Happy testing with Playwright!
Related Discord Threads
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.