Can't click on a dropdown testing website in VueJS using Selenium JS

Viewed 505

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.

0 Answers
Related