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

问题描述

我有一个输入和一个数据列表，例如

<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");之前。

如何通过硒与数据列表进行交互？

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

解决方法

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

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

然后就可以通过getAttribute方法获取option的值

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

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

input.sendKeys(optionValue);

,

SelectElement 是一个特定的类，旨在简化 SELECT 元素的使用。 DATALIST 元素没有这样的类。 SelectElement 的源是公开可用的 here，因此您可以根据需要为 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);