How to select options from <Input> based dropdown menus in Selenium?

Question

The website I'm testing has been built with Visual Studio C#. The dropdown menus I'm to test don't use the usual format of:

<select>
    <option>...</option>
    ...
    ...
</select>

Instead, they're built:

<input name="exampleName" type="text" class="rcbInput" id="exampleInput"
  value="exampleValue" readonly="readonly" autocomplete="off">

With each value appearing lower down in the code as a list item.

Each of these list items is within an structure like:

Form > rcbSlide > ... > rcbList > ul > li

Where li objects are the values in the dropdown menu.

---

What I want to know is, how can I select a dropdown value in this structure?

When I use the standard

Select select = new Select(driver.findElement(By.whatever()))

It gives me an error saying something along the lines of 'Select' expected, got 'input'.

Answer 1

One other possibility, I use this when I am desperate, is to simply select the main drop down, then send the down key. The Enter key i.e.

yourOption = element(by.id('exampleInput')).
element(by.xpath("//li[text()='YourText']"));

yourOption.sendKeys(Keys.DOWN);
yourOption.sendKeys(Keys.RETURN);

Answer 2

Here Select select = new Select(driver.findElement(By.whatever())) is working only for select HTML tag.

You need to select <input name="exampleName" type="text" class="rcbInput" id="exampleInput" value="exampleValue" readonly="readonly" autocomplete="off">

So follow this steps for solution:

1. First click on this driver.findElement(By.xpath("//input[@id='exampleInput']")).click();

2. Then select/click your li element same as above example. driver.findElement(By.xpath("li xpath")).click();

Note : li xpath depends on your HTML code

Let me know If any query regarding this answer.

Answer 3

Most recently I've been working in the Protractor selenium bindings for NodeJS. I'm not sure if this method is universally available for other bindings.

//the first call to element is the group of options in your dropdown
//the second call to element, chained off of the first, looks for subelements in the dom
var yourOption = element(by.id('exampleInput')).element(by.xpath("//li[text()='YourText']"));
yourOption.click()

If something like this is not available in your chosen library you can accomplish the same thing with only xpath

//barebones NodeJS bindings
var yourOption = driver.findElement(By.xpath("//input[@id='exampleInput']//li[text()='YourText']"));
yourOption.click()

The xpath there has an english translation along the lines of "Find an < input > tag with an id of 'exampleInput' then nested at any depth under it in the DOM find an < li > tag which has text inside that matches 'YourText'"

Please note that both of these will only work if the element exists in the DOM at the time the action is performed in your script. If other actions or a wait condition are needed to get the tag to appear you'll need to perform those first.

Answer 4

I am on WebDriver 3.141.0

Here's my code sample

public void SelectInputDropDown(By input, By dropdownItem)
{
  IWebElement filterElement = Driver.FindElement(input);
  filterElement.Click();

  // select the menu option
  IWebElement popup = WaitForElement(dropdownItem);

  // for whatever readon, we need a "pause" before we interact
  // with the pop-up menu
  // This is simply Thread.Sleep(500)
  Pause();
  
  popup.Click();
}

Here's the WaitForElement() implementation...I allow the exceptions to bubble up The object Idle is simply WebDriverWait and driver is an instance of IWebDriver

public IWebElement WaitForElement(By by)
{
  IWebElement toReturn =
    Idle.Until(driver =>
    {
      IWebElement e = driver.FindElement(by);
      return e;
    });
  return toReturn;
}