如何使用 Selenium 从 HTML5 数据列表中进行选择

Posted 2023-03-05

【中文标题】如何使用 Selenium 从 HTML5 数据列表中进行选择

【英文标题】：How to select from a HTML5 datalist with Selenium

【发布时间】：2017-05-09 20:07:28

【问题描述】：

我正在尝试从数据列表中进行选择，但似乎只有列表中的第一个元素是可选的。

这是一个 html sn-p:

<td>
<input id="applianceFilterTextbox" class="flat" name="applianceFilter" list="applianceNames" value="ROC-1006 - B827EBB5D539" style="width: 100%"/>
<datalist id="applianceNames">
<!-- ngRepeat: app in appliances -->
<option class="ng-binding ng-scope" ng-repeat="app in appliances" value="ROC-1006 - B827EBB5D539" ng-value="app.DisplayName">ROC-1006 - B827EBB5D539</option>
<!-- end ngRepeat: app in appliances -->
<option class="ng-binding ng-scope" ng-repeat="app in appliances" value="ROC-1007 - B827EBD15125" ng-value="app.DisplayName">ROC-1007 - B827EBD15125</option>
<!-- end ngRepeat: app in appliances -->
<option class="ng-binding ng-scope" ng-repeat="app in appliances" value="ROC-1008 - B827EB05DEF3" ng-value="app.DisplayName">ROC-1008 - B827EB05DEF3</option>
<!-- end ngRepeat: app in appliances -->
<option class="ng-binding ng-scope" ng-repeat="app in appliances" value="ROC-1009 - B827EB2A379C" ng-value="app.DisplayName">ROC-1009 - B827EB2A379C</option>
<!-- end ngRepeat: app in appliances -->
</datalist>
</td>

我的模块如下：

public void SelectApplianceFromDatalist(int index)

    ExplicitWait.waitElementToBeClickable(driver, 25, appliancesFilterTextBox);
    appliancesFilterTextBox.Clear();
    appliancesFilterTextBox.Click();
    string select1 = driver.FindElement(By.XPath("//*[@id='applianceNames']/option['" + index + "']")).GetAttribute("value");
    index++;
    string select2 = driver.FindElement(By.XPath("//*[@id='applianceNames']/option['" + index + "']")).GetAttribute("value");
    index++;
    string select3 = driver.FindElement(By.XPath("//*[@id='applianceNames']/option['" + index + "']")).GetAttribute("value");
    index++;
    string select4 = driver.FindElement(By.XPath("//*[@id='applianceNames']/option['" + index + "']")).GetAttribute("value");

    appliancesFilterTextBox.SendKeys(driver.FindElement(By.XPath("//*[@id='applianceNames']/option['"+ index +"']")).GetAttribute("value"));

select1、select2、select3 和 select4 仅用于调试目的。当使用例如 3 的索引值调用模块时，它们都包含第一个选项的值。

【参考方案1】：

尝试使用简单的方法sendKeys() 发送您所需的值，例如 -

    driver.findElement(By.id("applianceFilterTextbox")).clear();
    driver.findElement(By.id("applianceFilterTextbox")).sendKeys("ROC-1008 - B827EB05DEF3");

它将清除默认选择的值并输入您需要的值。

另一件事是，我认为您使用了正确的方法，但您的 XPath 存在小错误。改变

By.XPath("//*[@id='applianceNames']/option['" + index + "']") 

到

By.XPath("//*[@id='applianceNames']/option["+ index +"]")

【讨论】：

因为我不知道所需的值是什么，所以我不能按照您的建议使用简单的 sendKeys() 方法。但是您对 XPath 表达式中的小错误是正确的。删除简单的前导引号后，我的方法运行良好。

接受的答案未解决仅使用项目文本的开头作为搜索词时如何在数据列表中搜索。

@Andres，我没有收到您对已接受答案的评论和反对意见。如果您有任何问题，请随时在 SO 上发帖。