使用 Selenium 选择 HTML5 输入+数据列表控件项

Question

用例是在 selenium 的帮助下从下拉列表中选择一个项目。我尝试了以下但无法实现我的目标。输入标签是指一个 datalist 。

    String baseUrl = "https://angular-cwmwke.stackblitz.io" ; 
    driver.get(baseUrl); // opens the webpage
    // Put some wait for the page to load the dropdown
    driver.findElement(By.xpath("//input[@list='id-car']")).click(); // clicks on the dropdown
    driver.findElement(By.xpath("//*[@id='id-car']/option[1]")).click(); // Does not works.

它失败了，这是个例外。 JavascriptException: javascript 错误：选项元素不在选择中

Selenium 版本：3.14.0 和 Chrome 版本：78.0.3904.108

这是 HTML（请忽略选项值）：

<input _ngcontent-c0="" list="id-car" ng-reflect-model="[object Object]" class="ng-pristine ng-valid ng-touched">
<datalist _ngcontent-c0="" id="id-car">
<!--bindings={
 "ng-reflect-ng-for-of": "[object Object],[object Object"
   }-->
 <option _ngcontent-c0="" value="[object Object]" ng-reflect-value="[object Object]">Ford-GTX</option>
 <option _ngcontent-c0="" value="[object Object]" ng-reflect-value="[object Object]">Ferarri - Enzo</option>
 <option _ngcontent-c0="" value="[object Object]" ng-reflect-value="[object Object]">VW - Amarok</option>
</datalist>

Answer 1

关于datalist 标签的一些注意事项，这与select 的不同之处在于select 元素将选择限制为预定义的集合，而datalist 给出了建议 em> 选项，但可以接受任何输入。此外，datalist 选项通常与value 属性一起使用，因此在这种情况下（您也可以手动测试）当您单击任何选项时，显示的值是相同的（[object Object]）。

值得注意的是，您收到 JavascriptException: javascript error: option element is not in a select 的原因是，我认为 Selenium 期望 option 标签位于 @ 987654328@ 元素。 datalist 标记的操作更像是一个常规输入文本框而不是一个选择，并且在使用 Selenium 时必须这样对待。

因此，首先，如果您有权访问该 html 代码，我会将值更新为文本现在的样子。它看起来像这样：

<option _ngcontent-c0="" value="Ford-GTX" ng-reflect-value="Ford-GTX"/>
<option _ngcontent-c0="" value="Ferarri - Enzo" ng-reflect-value="Ferarri - Enzo"/>
<option _ngcontent-c0="" value="VW - Amarok" ng-reflect-value="VW - Amarok"/>

用于“选择”某个选项的 Selenium 代码将是这样的：

var input = driver.findElement(By.xpath("//input[@list='id-car']"));
var option = driver.findElement(By.xpath("//*[@id='id-car']/option[1]"));
var value = option.getAttribute("value");
input.clear();
input.SendKeys(value);

如果这不是您想要实现的行为，并且您可以再次访问 html，则可以考虑改用 select 元素。

如果你无权访问html，并且真的想使用内部html文本，你可以简单地修改上面的代码以引用innerHTML而不是value：

var input = driver.findElement(By.xpath("//input[@list='id-car']"));
var option = driver.findElement(By.xpath("//*[@id='id-car']/option[1]"));
var text = option.getAttribute("innerHTML");
input.clear();
input.SendKeys(text);

但是请记住，这可能会导致表单提交时出现一些奇怪的行为，因为真正的用户点击显示的是value，而不是text。