Select option in datalist using Selenium ChromeDriver

Question

I have an input together with a datalist like

<input type="text" id="theinput" list="thedatalist">
<datalist id="thedatalist">
  <option value="one"></option>
  <option value="two"></option>
  <option value="three"></option>
</datalist>

Now, I want to use selenium to select an item in the datalist.

First, I send a key to the input like

var remoteWebDriver = (RemoteWebDriver) browser;
var input = remoteWebDriver.FindElementsByCssSelector("#theinput");

input.SendKeys("o");

and then I try to treat the datalist as a <select> element like

var datalist = remoteWebDriver.FindElementsByCssSelector("#thedatalist");
var select = new SelectElement(datalist);

I got UnexpectedTagNameException with the message

Element should have been select but was datalist

before I had the chance to select.SelectByText("one");.

How do I interact with the datalist with selenium?

Also, it seems like the dropdown closes when the browser loses focus. Is that expected behavior?

Answer 1

SelectElement is a specific class designed to make using SELECT elements easier. There is no such class for DATALIST elements. The source for SelectElement is publicly available here so you could create a parallel one for DATALIST, if you wanted to.

The simplest solution in this case is to just use

driver.FindElement(By.Id("theinput")).SendKeys("one");

That will select the value you want.

---

If it were me, I would put this in a method so that all I have to do is send the desired option.

public void SetOption(string option)
{
    driver.FindElement(By.Id("theinput")).SendKeys(option);
}

and then call it like

SetOption("one");

---

If this is an element you are going to be interacting with a lot and it has a set list of options, you could go one step further and create an enum with values and then have your method take that enum as a parameter. I use this method a lot and it completely eliminates typos, having to look up the list of available options, etc... basically it saves a lot of time.

The enum looks like

public enum DatalistOptions
{
    one,
    two,
    three
}

The updated method looks like

public void SetOption(DatalistOptions option)
{
    driver.FindElement(By.Id("theinput")).SendKeys(option.ToString());
}

and the code to call it looks like

SetOption(DatalistOptions.one);

Answer 2

Select the option element from the datalist using the option child position for example, here I am selecting the second option

WebElement lists = driver.findElement(By.cssSelector("datalist#thedatalist option:nth-child(2)"))

Then you can get the value of the option by using the getAttribute method

String optionValue = lists.getAttribute("value"); //two

Then you need to input the value into the input field because the datalist provides the values to the input feild:

input.sendKeys(optionValue);