6

I am trying to test a VueJS website using Selenium with Javascript; I am currently trying to simply click on a dropdown but all my tries results in

ElementNotInteractableError: element not interactable
  (Session info: chrome=89.0.4389.90)

I tried a ton of different ways and css or xpath selections, including

A) fast checking

 const elem = await driver.findElement(
   By.css(
     'div.mb2:first-of-type > div.multiselect.col-12.border:first-of-type > div.multiselect__tags > span.multiselect__placeholder',
     ),
   )
   await elem.click()

B) well checking everything

await driver.wait(until.elementLocated(By.css('div[data-fetch-key="1"] > div.multiselect.col-12.border > div.multiselect__tags')), timeout)
await driver.wait(until.elementIsVisible(element), timeout)
await driver.wait(until.elementIsEnabled(element), timeout)
await element.click()

C) setting to display:block everything

const disabledList = await driver.findElements(By.css('[style*="display:none"]'))

for (elem of disabledList) {
  try {
    await driver.executeScript(
      "arguments[0].setAttribute('style', 'display:block !important; visibility: visible !important; opacity: 1 !important; position:initial !important')",
       elem,
    )
    elem.click()
  } catch (error) {
    console.log('---------broken but still goes on-------------', error)
  }
}

VueJS template starts with

<template>
    <div class="px2 md-px4 py3">
        <h4 class="mb2">choose discipline</h4>
        <SelectDropdownComponent
            ref="disciplineList"
            :has-border="true"
            class="mb2"
            select-id="discipline"
            :options="disciplineList"
            placeholder="discipline"
            :preselected-value="disciplineStep.discipline ? disciplineStep.discipline : disciplineQuery"
            open-direction="bottom"
            @selectedValue="onSelectedDiscipline"
        />
[...]
</div>
</template>

Could someone just address me on why this element should not be interactable? the only way it worked is using x and y coordinates for a click, but since it is a dropdown, it opens and I cannot use coordinates to pick a specific option (since they could change in order and number).

UPDATE: after asking and searching, I discovered that for the frontend website is used the vue-multiselect plugin.

UPDATE 2: I tried rebuilding the entire test but this time using cypress and cypress-xpath and it works. There's something I'm missing but I don't get it.

UPDATE 3: With cypress it's REALLY hard to deal with iFrames, which I need it; maybe i'll switch back to selenium, but I absolutely need to solve this issue, I don't get why the elements are considered as not interactable.

Don Diego
  • 1,309
  • 3
  • 23
  • 46
  • 1
    Try with this it is pure JAva, but think that there is similar thing in JS https://stackoverflow.com/a/65529424/11270766 – Gaj Julije Mar 22 '21 at 09:53
  • @GajJulije I tried, but did not work; in fact it's not a matter of timing, it says the elements are not interactable, it finds them! For some reasons, they are not "clickable" (mouse cursor does not change to "hand cursor" if I put it on a dropdown. – Don Diego Mar 24 '21 at 08:32
  • Do you have something like "until.elementIsClickable" or any wait that contains word clickable. (I do not use JS i java it is wait.until(ExpectedConditions.elementToBeClickable(webe));) – Gaj Julije Mar 24 '21 at 13:44
  • Yes, i use wait.elementIsVisible and elementIsEnabled (see my question point B), which is the equivalent of ElementIsClickable in JS (you can find them both here: https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/until.html#elementIsVisible ) – Don Diego Mar 24 '21 at 14:49
  • 1
    It's not a matter of timing. I tried waiting even 15 seconds before manipulating the dom, elements are still not interactable – Don Diego Mar 24 '21 at 15:09
  • Can you read http://makeseleniumeasy.com/2020/05/26/elementnotinteractableexception-element-not-interactable/ and focus on part when it say div and span.I came across some answers that div or span elements can make this happen, but did not realy beleved. Now I beleve. I will try to dig for it. But please do same also. – Gaj Julije Mar 24 '21 at 15:14
  • And read this also https://stackoverflow.com/questions/37110096/make-the-span-element-inside-div-clickable :-) – Gaj Julije Mar 24 '21 at 15:15

0 Answers0