Playwright testing - Select option

💬 App Building
9

Thanks for confirming.

For anyone who finds this in the future, just clicking the dropdown then clicking the option was very flaky for me for some reason. I did not try the SelectOverlay so that may work better.

I ended up writing a method that clicks the dropdown, empties any existing value, types the new value (to ensure dropdown option is available), then clicks outside of the dropdown to close it. Probably overkill but not flaky at all.

async selectDropdownOption(
        dropdownLocator: Locator, 
        optionText: string, 
        mainFrameContainer?: Locator
    ): Promise<void> {
        await dropdownLocator.click();
        await dropdownLocator.fill(''); // Clear any existing value
        await dropdownLocator.pressSequentially(optionText, { delay: 25 });
        await this.page.getByRole('listbox').getByRole('option', { name: optionText, exact: true }).click();

        
        // Click outside to close dropdown - use provided container or default to page
        const container = mainFrameContainer || this.page;
        await container.click('body');
        
        await expect(dropdownLocator).toHaveValue(optionText, { timeout: 10000 });
    }
1 Like