How to click the ul, li drop down menu with a filter search input box using Selenium

Question

It is an automation of an desktop eCommerce website being used on a Browserstack mobile emulator. Basically it is test automation of MobileWeb application.

It is a drop down of 'Sold To' list items, contains probably nearly a 1000 items. Once user clicks the drop down box, a (filter)search box appears as part of the list and when user enters the filter text, the list is filtered to show those items which match the input string. Filter string is such that it results in only one result. Automation script has to click that one result 'list item'.

I tried to retrieve the list of items using the cssSelector as

'div#myDropdown>a.mobile-soldto-list>span'

, like

    List<WebElement> listItems = driver.findElements(By.cssSelector("div#myDropdown>a.mobile-soldto-list>span"));

which returned 944 items which checks out with what Browser dev tools also showed.

Then, I tried to iterate through each WebElement having a specific option text like..

for(WebElement listItem: listItems) {
    if(listItem.getText().startsWith("SOME TEXT")) {
        System.out.println("text="+listItem.getText());
        listItem.click();
        break;
    }
}

The text printed out by System.out matches the "SOME TEXT". But after clicking happened, the drop down box collapsed to the original list as like the page was rendered the first time. It is suspected that the code could not click on the list item, instead clicked on the dropdown box and the list collapsed as in original position.

What is the secret sauce, I am missing and how can I correct it ?

Answer 1

I use Actions class to work with dropdown search functionalities.

 Actions actions=new Actions(driver);
 actions.sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.RETURN).build().perform();

it will move the driver down to the result and click on it.

Answer 2

Thanks @aiz! Even Actions class approach also did not work. Finally, I have to retrieve all the items in the drop down menu web element, retrieve all the menu item list, then going one by one menu item, checking for the menu item text and clicking it with JavaScriptExecutor has only worked. Initially here also, I encountered 'element is not interactable' exception. I have to use this syntax:

        JavascriptExecutor executor = (JavascriptExecutor) driver;
//      executor.executeScript("arguments[0].scrollIntoView(true);", listItem); --> did not work

//      listItem.click(); --> did not work

        executor.executeScript("arguments[0].click();", listItem);  

In the filtered menu item list, no xpath, cssselector seems to be working, even though the retrieved WebElement text is matching as expected, but click() is NOT working. Only 'JavaScriptExecutor' could click on the filtered menu item