Unable to use selectByVisibleText() on drop down menu values that contain  

[christian-bromann]

From @adamlemisch on December 29, 2016 16:14

The problem

When attempting to make a selection using selectByVisibleText() from a drop down menu who's values contain &nbsp's, the following error is received:

An element could not be located on the page using the given search parameters.
running chrome
Error: An element could not be located on the page using the given search parameters.
    at elementIdElement("4", "./option[normalize-space(.) = "A01 - NORTHWEST"]|./optgroup/option[normalize-space(.) = "A01 - NORTHWEST"]") - selectByVisibleText.js:33:22

Menu structure:

Commands attempted:
PageOnePage.area_drop_down.selectByVisibleText('A01 - NORTHWEST');
PageOnePage.area_drop_down.selectByVisibleText('A01 - NORTHWEST');

Environment

• WebdriverIO version: ^4.5.2
• Node.js version: v7.2.1
• Standalone mode or wdio testrunner: wdio
• if wdio testrunner, running synchronous or asynchronous tests: synchronous
• Additional wdio packages used (if applicable): N/A

Please let me know if more information is needed.

Copied from original issue: webdriverio/webdriverio#1795

[christian-bromann]

From @AbhiMatcha on June 7, 2018 6:45

Still im facing this issue. :(

[christian-bromann]

@AbhiMatcha feel free to provide a PR

[christian-bromann]

From @rohithnl007 on October 29, 2018 9:47

This worked for me,
menuItemsOptions(element) - dropdown menu option(s)
dropDownButton(element) - dropdown arrow
textToSelect(String) - text we want to select

static selectByVisibleTextInDropdown(menuItemsOptions, dropDownButton, textToSelect) {
        browser.click(dropDownButton);
        const menuItems = browser.elements(menuItemsOptions).value;
        for (const item of menuItems) {
            const menuItem = browser.elementIdText(item.ELEMENT).value;
            console.log(`menuItem: ${  menuItem}`);
            if (menuItem.toLowerCase().includes(textToSelect.toLowerCase())) {
                console.log(`Clicking on ${menuItem}`);
                browser.elementIdClick(item.ELEMENT);
                break;
            }
        }
    }