Невозможно выбрать опцию Элемент с Javascript (ни с Селеном, ни с Транспортиром)

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 не изменяется, а только элементы ввода и вывода.

Мы используем эту библиотеку в нашем приложении Angular. (Я знаю, Angular не получает никаких изменений от Javascript библиотеки, которую мы не должны использовать et c .. но поверьте мне, это не имеет значения в этом контексте).

Так что на самом деле мы просто хотим нажмите на любой элемент Slider в наших Приемочных тестах (транспортир, так сказать Selenium).

1. попробуйте щелкнуть Protractor: Ошибка - невозможно щелкнуть параметр, поскольку они отсутствуют в выделенном элементе.

2. попробовать Javascript щелкнуть в Protractor следующим образом:

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

или как это, так как getWebElement возвращает обещание в моем случае:

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

это на самом деле не выдает никакой ошибки, но я не вижу никаких изменений в моем HTML.

попробуйте, наконец-то я попытался щелкнуть этот элемент в консоли моего браузера следующим образом:

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

(и да document.getElementById ("1km") действительно находит элемент option)

щелчок возвращает неопределенное в консоли (как и ожидалось), но он также не перемещает ползунок, или внесите какие-либо изменения в DOM.

Как я могу щелкнуть эти элементы с помощью Javascript?

Answer 1

Вы должны попробовать использовать:

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

Использование mouseMove перемещает курсор к элементу, чтобы вы могли щелкнуть по нему. Цепочка таких команд означает, что они будут выполнены в указанном порядке.

В этом случае перейдите к элементу, а затем щелкните его.

---

Публикация этого ответа в ответ на ваш запрос в комментариях.