Cannot select Dropdown options in Demo testing site
Hi everyone, I am doing some practice testing this demo site: https://www.saucedemo.com/inventory.html It has a dropdown just below the cart icon. In the DOM it looks like this: <select class="product_sort_container" data-test="product_sort_container"><option value="az">Name (A to Z)</option><option value="za">Name (Z to A)</option><option value="lohi">Price (low to high)</option><option value="hilo">Price (high to low)</option></select>
I wrote a function to select one of its options:
public async selectDropdownOption(optionValue: string) {
const selectContainer = await this.page.locator('.product_sort_container');
await selectContainer.click();
// Locate the option by its value and click it
const option = await selectContainer.locator(option[value="${optionValue}"]);
await option.click();
}
But when I run it, it opens the dropdown but does not go to any of the options. It ends with a timeout in the end. I don't know how to select the one I desire... Can you please advise?
This thread is trying to answer question "How can I select a specific option from a dropdown menu on a demo testing site?"
await page.getByText('Name (A to Z)Name (A to Z)Name (Z to A)Price (low to high)Price (high to low)').click(); or await page.locator('[data-test="product_sort_container"]').click();
await page.locator('[data-test="product_sort_container"]').selectOption('za'); await page.locator('[data-test="product_sort_container"]').selectOption('az'); await page.locator('[data-test="product_sort_container"]').selectOption('lohi'); await page.locator('[data-test="product_sort_container"]').selectOption('hilo');
await page.locator('[data-test="product_sort_container"]').selectOption('za'); await page.locator('[data-test="product_sort_container"]').selectOption('az'); await page.locator('[data-test="product_sort_container"]').selectOption('lohi'); await page.locator('[data-test="product_sort_container"]').selectOption('hilo');
Pick the option you want to select from dropdown
Thank you so much ❤️
public async selectDropdownOption(optionValue: string) { await this.page .locator('[data-test="product_sort_container"]') .selectOption(optionValue); }
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.