Cannot click on toggle with selenium because of ElementNotInteractableException

Question

I am trying to click a toggle with Selenium Webdriver and Python but get the following exception:

 selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable
                           (Session info: chrome=86.0.4240.111)

My HTML code

<div _ngcontent-c7="" class="form-group">
  <label _ngcontent-c7="" for="opened">Opened</label>
 <div _ngcontent-c7="" class="toggle-switch">
    <input _ngcontent-c7="" id="opened" name="opened" type="checkbox" class="ng-untouched ng-pristine ng-valid">
  <label _ngcontent-c7="" for="opened"></label>
 </div>
 <span _ngcontent-c7="" class="form-control-helper">Toggle text description.</span>
</div>

I use the following selector and it is 100% unique:

.toggle-switch>label[for=opened]

What can be the issue? This is the Angular modal dialog. I tried many unique locators, both XPATH and CSS and I am sure this is not a locator problem. Did someone else had a similar problem?

My Python code:

    toggle = driver.find_element_by_css_selector(".toggle-switch>label[for=opened]")
    toggle.click()

Thanks.

DMart · Accepted Answer · 2020-10-27 18:18:16Z

1

you're trying to interact with the label. you want the input element:

 #remove the label from page
 driver.execute_script("document.querySelector(\"strong[for='opened']\").style.visibility = 'hidden';")

 toggle = driver.find_element_by_css_selector("#opened")
 toggle.click()

edited Oct 27, 2020 at 18:18

answered Oct 27, 2020 at 16:56

DMart

2,4851 gold badge15 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

vitaliis Over a year ago

Thank you for your help. I tried it but got the error: selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element <input _ngcontent-c6="" id="opened" name="opened" type="checkbox" class="ng-untouched ng-pristine ng-valid"> is not clickable at point (621, 448). Other element would receive the click: <label _ngcontent-c6="" for="opened"></label> (Session info: chrome=86.0.4240.111)

vitaliis Over a year ago

I added debug("Element is visible? " + str(toggle.is_displayed())) and see False. It means the element is not found by selenium.

DMart Over a year ago

ahh the label is styled to overlay the input some how. Ok.

DMart Over a year ago

I updated to remove the label overlay. A Pain, but may be neccesary.

DMart Over a year ago

I messed up my strings.

|

vitaliis · Accepted Answer · 2021-04-20 16:19:44Z

1

The best bulletproof option which I use now is:

toggle = driver.find_element_by_css_selector(".toggle-switch>label[for=opened]")
driver.execute_script("arguments[0].click();", toggle)

In addition, sometimes I need to wait until an element that covers my toggle becomes not visible with:

 wait.until(EC.invisibility_of_element_located((By.CSS_SELECTOR, "my css selector")))

edited Apr 20, 2021 at 16:19

answered Feb 3, 2021 at 21:48

vitaliis

4,1975 gold badges26 silver badges48 bronze badges

Collectives™ on Stack Overflow

Cannot click on toggle with selenium because of ElementNotInteractableException

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related