无法单击具有 Javascript 的选项元素（既不使用 Selenium，也不使用 Protractor）

Question

我们的一个页面上有这个滑块组件。这是一个纯 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

当您用鼠标单击滑块时，DOM 中的 none 个选项元素发生变化，但只是输入和输出元素。

我们在 Angular 应用程序中使用这个库。（我知道，Angular 没有从我们不应该使用的 Javascript 库中得到任何更改等等。但相信我，这在这种情况下是无关紧要的）。

所以实际上我们只想单击我们的用户验收测试（Protractor，Selenium 可以这么说）上的任何 Slider 元素。

尝试使用量角器单击：错误 - 无法单击选项，因为它们不在 select 元素中。
尝试使用 Javascript 在量角器中单击，如下所示：

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

或者像这样，因为 getWebElement returns 在我的例子中是一个承诺：

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

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

试试，我终于尝试在浏览器的控制台上点击这个元素，如下所示：

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

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

单击 returns 在控制台中未定义（如预期的那样），但它也不会移动滑块，或在 DOM 中进行任何更改。

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

Answer 1

您应该尝试使用：

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

使用 mouseMove 将 'cursor' 移动到您可以单击的元素。像这样链接命令意味着它们将按照所述顺序执行。

在这种情况下，移动到元素然后单击它。

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

无法单击具有 Javascript 的选项元素（既不使用 Selenium，也不使用 Protractor）

Cannot click an option Element with Javascript (neither with Selenium, nor with Protractor)

html

javascript

selenium

protractor