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

Question

We have this slider component on one of our pages. This is a pure Javascript Library:

And this is how its DOM roughly look like:

<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

When you click on slider with mouse, none of the option elements in DOM are changed, but just the input and output elements.

We are using this library on our Angular Application. (I know, Angular does not get any changes from Javascript Library we should not use etc.. but believe me this is irrelevant in this context).

So actually we just want to click on any Slider element on our User Acceptance Tests (Protractor, Selenium so to speak).

try with Protractor click: Error- Cannot click an option because they are not in a select element.
try with Javascript click within Protractor like this:

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

or like this since getWebElement returns a promise in my case:

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

this actually does not throw any error, but i do not see any change on my HTML.

try, i finally tried to click this element on my browser's console like this:

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

(and yes document.getElementById("1km") really finds the option element)

click returns undefined in console (as expected), but it also does not move the slider, or make any changes in DOM.

How can i click these option elements with Javascript?

Have you tried it with .click().perform()? Something like this perhaps: browser.actions(). mouseDown(element1). mouseMove(element2). mouseUp(). perform(); Docs: protractortest.org/#/… — nopassport1
actually i would like to make this with pure javascript now.. and click().perform does not work since click does not exist on my option element.. but the other suggestion with mousemove i can try.. thank you — akcasoy
it indeed worked with mouseMove(elm).click().perform() ! thanks a lot.. you can also write this as an answer, then i will accept it — akcasoy

nopassport1 nopassport1 · Accepted Answer · 2020-02-06T16:09:28

You should try using:

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

Using mouseMove moves the 'cursor' to the element for you to be able to click it. Chaining the commands like this means they will be executed in said order.

In this case, moving to the element and then clicking it.

Posting this as an answer based on your request in the comments.

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

1 Answers