javascript - 无法使用 Javascript 单击选项元素(无论是使用 Selenium 还是使用 Protractor)

Question

我们的一个页面上有这个 slider 组件。这是一个纯 Javascript 库:

它的 DOM 大致如下:

<div>
   <input value="8">
   <output>50 km</output>
   <datalist>
      <option value="0" label="1 km">1 km</option>
      <option value="1" id="1km">5 km</option>
      <option value="2">10 km</option>
      ..
      <option value="8">50 km</option>
      ..
      <option value="12" label="200 km">200 km</option>
   </datalist>
</div

当您用鼠标单击 slider 时，DOM 中的任何选项元素都不会更改，而只会更改输入和输出元素。

我们正在我们的 Angular 应用程序上使用这个库。 (我知道，Angular 没有从 Javascript 库中获得任何我们不应该使用的更改等......但相信我，这在这种情况下是不相关的)。

所以实际上我们只想单击用户验收测试中的任何 slider 元素( Protractor ，可以说是 Selenium)。

1. 尝试使用 Protractor 单击:错误 - 无法单击选项，因为它们不在选择元素中。

2. 尝试在 Protractor 中使用 Javascript 单击，如下所示:

   browser.executeScript('arguments[0].click();', element(by.id('1km')).getWebElement());

或者像这样，因为 getWebElement 在我的例子中返回一个 promise :

element(by.id('1km')).getWebElement().then((elm) => {
    browser.executeScript('arguments[0].click();', elm);
});

这实际上不会引发任何错误，但我在 HTML 上没有看到任何变化。

尝试一下，我终于尝试在浏览器控制台上单击此元素，如下所示:

document.getElementById("1km").click()

(是的 document.getElementById("1km") 确实找到了选项元素)

单击在控制台中返回未定义(如预期)，但它也不会移动 slider ，或在 DOM 中进行任何更改。

如何使用 Javascript 单击这些选项元素？

Answer 1

您应该尝试使用:

mouseMove(elm).click().perform();

使用mouseMove将“光标”移动到元素，以便您能够单击它。像这样链接命令意味着它们将按所述顺序执行。

在本例中，移动到该元素，然后单击它。

<小时/>

根据您在评论中的请求将此作为答案发布。