Selenium "Message: element not interactable" for visible VUE input box

Question

I have a HTML page generated by VUE. The page element is as below:

<input name="" id="newTvAdvertiserSelected" type="text" autocomplete="nope" placeholder="" tabindex="0" class="multiselect__input" style="width: 0px; position: absolute; padding: 0px;">

I then have the Selenium code as below to click it.

driver.find_element_by_id("newTvAdvertiserSelected").click()

If I manually click it, it works. I can also manually type in the box. However, it doesn't accept Selenium click also doesn't accept "send_keys". I got this error "Message: element not interactable".

The script also waited 5 seconds for the page and I can see all the elements on the page. So I think the script has waited long enough to load all elements.

Does VUE input and class="multiselect__input" need some special handling?

This VUE component is a combination of "input" and "select". When I type in something, it can automatically populate the dropdown list. And then I have to "Select" from the dropdown list.

The section's HTML is as below:

 <!---->
 <div class="el-form-item__content">
   <div tabindex="-1" class="multiselect" style="">
     <div class="multiselect__select"></div>  
     <div class="multiselect__tags">
      <div class="multiselect__tags-wrap" style="display: none;"></div> 
     <!----> 
     <div class="multiselect__spinner" style="display: none;"></div> 
<input name="" id="newTvAdvertiserSelected" type="text" autocomplete="nope" placeholder="" tabindex="0" class="multiselect__input" style="width: 0px; position: absolute; padding: 0px;"> 
<span class="multiselect__single">Just typed in COmpany Name X</span> <!----></div> 
<div tabindex="-1" class="multiselect__content-wrapper" style="max-height: 300px; display: none;">
<ul class="multiselect__content" style="display: inline-block;"> <!----> 
<li class="multiselect__element">
<span data-select="" data-selected="" data-deselect="" class="multiselect__option multiselect__option--highlight"><span>Company name A</span></span> <!----></li>
<li class="multiselect__element"><span data-select="" data-selected="" data-deselect="" class="multiselect__option"><span>Company name B</span></span> <!----></li>
<li class="multiselect__element"><span data-select="" data-selected="" data-deselect="" class="multiselect__option"><span>Company name C</span></span> <!----></li> 
<li style="display: none;"><span class="multiselect__option">
<span>No Data</span>
</span>
</li> 
<li style="display: none;"><span class="multiselect__option">List is empty.</span></li> 
</ul>
</div>
</div>
<!---->
</div>
</div>```

I think there are more than one element on the page. Check if this returns count more that 1. `print(len(driver.find_elements_by_id("newTvAdvertiserSelected")))` — KunduK, Nov 26 '20 at 11:26
Try with JS executor to click `driver.execute_script("arguments[0].click();", driver.find_element_by_id("newTvAdvertiserSelected"))` — KunduK, Nov 26 '20 at 22:33
@PDHide I have modified the question and have included the section's HTML code. — FlatWorld, Nov 26 '20 at 22:52
@Kunduk Thanks for the JS executor tip. This time. It doesn't give me any error, but it also seems not performing the required action. If I change "arguments[0].click()" to arguments[0].SendKeys('zxxx'). The code thrown exception which is expected. I at least knows that it is doing something and get the feeling that this might be the right direction. I'll dig more to see if I can come up a working solution. — FlatWorld, Nov 26 '20 at 23:10

score 2 · Answer 1 · answered Nov 26 '20 at 23:59

Thank you @DebanjanB, @KunduK and @PDHide. Using JS execute works. The code is as follow:

driver.execute_script("arguments[0].click();arguments[0].dispatchEvent(new Event('focus')); arguments[0].value = 'XXX'; setTimeout(1000); arguments[0].dispatchEvent(new Event('input'))", driver.find_element_by_id("newTvAdvertiserSelected"))

undetected Selenium · Answer 2 · 2020-11-26T22:59:07.453

0

To click on the element you can use either of the following Locator Strategies:

Using id:

driver.find_element_by_id("newTvAdvertiserSelected").click()

Using css_selector:

driver.find_element_by_css_selector("input.multiselect__input#newTvAdvertiserSelected").click()

Using xpath:

driver.find_element_by_xpath("//input[@class='multiselect__input' and @id='newTvAdvertiserSelected']").click()

Ideally, to click on the element you need to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies:

Using ID:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.ID, "newTvAdvertiserSelected"))).click()

Using CSS_SELECTOR:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "input.multiselect__input#newTvAdvertiserSelected"))).click()

Using XPATH:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@class='multiselect__input' and @id='newTvAdvertiserSelected']"))).click()

Note: You have to add the following imports :

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

Update

As a last resort you can use the execute_script() method as follows:

Using CSS_SELECTOR:

driver.execute_script("arguments[0].click();", WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "input.multiselect__input#newTvAdvertiserSelected"))))

Using XPATH:

driver.execute_script("arguments[0].click();", WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@class='multiselect__input' and @id='newTvAdvertiserSelected']"))))

edited Nov 26 '20 at 22:59

answered Nov 26 '20 at 13:44

undetected Selenium

183,867
41
278
352

1

Thank you @DebanjanB. However, I tried ```WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.ID, "newTvAdvertiserSelected"))).click() ```. It doesn't work as well. It thrown errors but no error message details. I did use ```driver.find_element_by_id("newTvAdvertiserSelected").click()```. It didn't work. That's was the reason I asked in this forum. – FlatWorld Nov 26 '20 at 21:27
@FlatWorld How about the _xpath_ and _css_? Did those work for you? – undetected Selenium Nov 26 '20 at 21:34
Tried both xpath and css, same result. I think it has located the correct element because when I use the xpath in Chrome to locate the element manually, it only return one element and that is the correct element. Let me check to see if I could read anything from the element to double confirm Selenium is indeed find out the right element. – FlatWorld Nov 26 '20 at 21:51
I used below code to print the ID. It does print the correct ID. So Selenium has found out the right element. But just can not click it. ```element1= driver.find_element_by_css_selector("input.multiselect__input#newTvAdvertiserSelected") val = element1.get_attribute("id") print val``` – FlatWorld Nov 26 '20 at 22:51
@FlatWorld Checkout the answer update and let me know the status. – undetected Selenium Nov 26 '20 at 22:59
The updated JS execute_script() code thrown exception but the message is blank. I tried both CSS_Selector and XPATH. I think JS script is the right way to go. – FlatWorld Nov 26 '20 at 23:35

Selenium "Message: element not interactable" for visible VUE input box

2 Answers2

Update