使用Selenium ChromeDriver在数据列表中选择选项

Question

我有一个输入和一个类似的数据列表

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

现在，我想使用硒来选择数据列表中的一个项目。

首先，我向输入端发送一个密钥，如

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

然后我尝试将数据列表视为类似的<select>元素

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

我收到了带有信息的UnexpectedTagNameException

元素本应被选择，但却是数据列表

在我有机会select.SelectByText("one");之前。

如何使用硒与数据列表交互？

此外，当浏览器失去焦点时，下拉列表似乎会关闭。这是预期的行为吗？

Answer 1

使用选项子位置从数据列表中选择选项元素，例如，我在这里选择第二个选项

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

然后您可以使用getAttribute方法来获得选项的值

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

然后您需要将值输入到输入字段中，因为数据列表将值提供给输入字段：

input.sendKeys(optionValue);

Answer 2

SelectElement是一个特定的类，旨在使SELECT元素的使用更容易。DATALIST元素没有这样的类。SelectElement的源代码在这里是公开的，所以如果你想的话，你可以为DATALIST创建一个并行的源代码

在这种情况下，最简单的解决方案是只使用

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

这将选择您想要的值。

---

如果是我，我会把它放在一个方法中，这样我所要做的就是发送所需的选项。

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

然后称之为

SetOption("one");

---

如果这是一个你将要与之交互的元素，并且它有一组选项列表，你可以更进一步，创建一个带有值的枚举，然后让你的方法将该枚举作为参数。我经常使用这种方法，它完全消除了打字错误，必须查找可用选项列表等……基本上它节省了很多时间。

枚举看起来像

public enum DatalistOptions
{
one,
two,
three
}

更新后的方法看起来像

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

调用它的代码看起来像

SetOption(DatalistOptions.one);