I am trying to select one of the dropdown list value using select class Getting the err ElementNotInteractableException element not interactable

Question

Here is the HTML code:

<input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-6a055dc1-379b-0ad4-c88a-bfd07a8356b4" style="" xpath="1">
<ul id="select-options-6a055dc1-379b-0ad4-c88a-bfd07a8356b4" class="dropdown-content select-dropdown" tabindex="0" style="" xpath="1"><li class="disabled" id="select-options-6a055dc1-379b-0ad4-c88a-bfd07a8356b40" tabindex="0"><span>Choose</span></li><li id="select-options-6a055dc1-379b-0ad4-c88a-bfd07a8356b41" tabindex="0"><span>Marriage</span></li><li id="select-options-6a055dc1-379b-0ad4-c88a-bfd07a8356b42" tabindex="0" class="selected"><span>Home Renovation</span></li><li id="select-options-6a055dc1-379b-0ad4-c88a-bfd07a8356b43" tabindex="0"><span>Holiday Planning</span></li><li id="select-options-6a055dc1-379b-0ad4-c88a-bfd07a8356b44" tabindex="0"><span>Debt Refinancing</span></li><li id="select-options-6a055dc1-379b-0ad4-c88a-bfd07a8356b45" tabindex="0"><span>Medical Emergency</span></li><li id="select-options-6a055dc1-379b-0ad4-c88a-bfd07a8356b46" tabindex="0"><span>Others</span></li></ul>
<svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xpath="1"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
<select class="" type="select" id="7" options="[object Object]" name="loan_purpose" tabindex="-1" xpath="1"><option value="" disabled="" selected="">Choose</option><option value="1">Marriage</option><option value="2">Home Renovation</option><option value="3">Holiday Planning</option><option value="4">Debt Refinancing</option><option value="5">Medical Emergency</option><option value="6">Others</option></select>

I could able to click on the dropdown list using the below code:

WebDriverWait(self.driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//input[@class='select-dropdown dropdown-trigger']"))).click()

self.driver.find_element_by_xpath("//select[@name='loan_purpose']/option[text()='Home Renovation']").click()

when I am trying to select the value using this code,getting the error message:

unable to select the value in the dropdown list,getting the following error message:
ElementNotInteractableException: Message: element not interactable: Element is not currently visible and may not be manipulated (Session info: chrome=77.0.3865.90)

Answer 1

Hi there, you are facing this error because in your code you are using class name with xpath to select the item, but class name is not providing a single class name. "select-dropdown dropdown-trigger" is not a single class, but two classes used to provide properties to your Select element. So its better to use other locator like id or name or use ChroPath to get xpath for your required element.

Comments

Thank you for looking in to the question.  I am new to automation.

i tried with this code

self.driver.find_element_by_xpath("//span[contains(text(),'Home Renovation')]").click()

it was selecting the value.

---

So are you facing any other problem? Or it worked for you?

---

Hi there,I still encounter the problem with this code

self.driver.find_element_by_xpath("//span[contains(text(),'Home Renovation')]").click()

It is selecting the value "marriage" instead of Home Renovation.

why it is selecting that value?

i do change the code with self.driver.find_element_by_xpath("//span[contains(text(),'Others')]").click() but then it is 

selecting the value "Debt Refinancing".

Please help out.

---

Hi there,I still encounter the problem with this code

self.driver.find_element_by_xpath("//span[contains(text(),'Home Renovation')]").click()

It is selecting the value "marriage" instead of Home Renovation.

why it is selecting that value?

i do change the code with self.driver.find_element_by_xpath("//span[contains(text(),'Others')]").click() but then it is 

selecting the value "Debt Refinancing".

Please help out.

---

Hi Swana, while providing the xpath("//span[contains(text),'Others']") instead of using contains method in xpath, try using index number used to write dropdown items. Every dropdown item must have an index number. Use that to get the element.

---

Hi Abha,

In my HTML code, i didn't see any index attribute for the span tag.Please go through the HTML code.

<input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-6a055dc1-379b-0ad4-c88a-bfd07a8356b4" style="" xpath="1">
<ul id="select-options-6a055dc1-379b-0ad4-c88a-bfd07a8356b4" class="dropdown-content select-dropdown" tabindex="0" style="" xpath="1"><li class="disabled" id="select-options-6a055dc1-379b-0ad4-c88a-bfd07a8356b40" tabindex="0"><span>Choose</span></li><li id="select-options-6a055dc1-379b-0ad4-c88a-bfd07a8356b41" tabindex="0"><span>Marriage</span></li><li id="select-options-6a055dc1-379b-0ad4-c88a-bfd07a8356b42" tabindex="0" class="selected"><span>Home Renovation</span></li><li id="select-options-6a055dc1-379b-0ad4-c88a-bfd07a8356b43" tabindex="0"><span>Holiday Planning</span></li><li id="select-options-6a055dc1-379b-0ad4-c88a-bfd07a8356b44" tabindex="0"><span>Debt Refinancing</span></li><li id="select-options-6a055dc1-379b-0ad4-c88a-bfd07a8356b45" tabindex="0"><span>Medical Emergency</span></li><li id="select-options-6a055dc1-379b-0ad4-c88a-bfd07a8356b46" tabindex="0"><span>Others</span></li></ul>
<svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xpath="1"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
<select class="" type="select" id="7" options="[object Object]" name="loan_purpose" tabindex="-1" xpath="1"><option value="" disabled="" selected="">Choose</option><option value="1">Marriage</option><option value="2">Home Renovation</option><option value="3">Holiday Planning</option><option value="4">Debt Refinancing</option><option value="5">Medical Emergency</option><option value="6">Others</option></select>

---

Hi Swarna, so in case you aren't able to see index attribute, then in that case you can try this code snippet to first get all the list options:

resultSet = driver.find_element_by_xpath("//section[@id='abc']/ul")
options = resultSet.find_elements_by_tag_name("li")

To loop through list of <li> nodes simply do:

for option in options:
    print(option.text)

---

which locator i should use in this case 

//section[@id='abc']/ul

if i understand correctly,i should provide the locator id of Ul tag

which is this 

"select-options-6a055dc1-379b-0ad4-c88a-bfd07a8356b4" .plz confirm.

---

Yes, the Id would be this only, but are you using section tag before ul tag?  Because 

//section[@id='abc']/ul

means section is the parent tag/node of ul

---

When i executed this  below code

resultSet = driver.find_element_by_xpath("//section[@id='select-options-6a055dc1-379b-0ad4-c88a-bfd07a8356b4']/ul")
options = resultSet.find_elements_by_tag_name("li")
for option in options:
    print(option.text)

I am getting the following error message:

NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//section[@id='select-options-6a055dc1-379b-0ad4-c88a-bfd07a8356b4']/ul"} (Session info: chrome=77.0.3865.90)