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

【问题标题】：Select option in datalist using Selenium ChromeDriver使用 Selenium ChromeDriver 在数据列表中选择选项
【发布时间】：2021-01-16 21:11:34
【问题描述】：

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

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

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

首先，我向输入发送一个键

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

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

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

【问题讨论】：

你可以只使用 xpath //datalist[id='thedatalist']/option[value()='one'] 。然后使用 .click() 就可以了。
我不会在选择器中使用值，我也不喜欢 xpath，但我会尝试类似你的建议。
个人喜好。您也可以在 CSS 选择器中执行类似 String.Format("/option[value()='{0}']",anyvalue ) 的操作，以根据不同的值类型进行查找。String.Format("/option[' {0}']",number ) 来查找索引。
你能在这里分享 url 以便我可以给 xpath
谢谢你，但我会使用 css @JustinLambert

标签： c# html selenium selenium-chromedriver html-datalist

【解决方案1】：

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

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

然后就可以通过getAttribute方法获取选项的值了

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

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

input.sendKeys(optionValue);

【讨论】：

【解决方案2】：

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);

【讨论】：