ElementClickInterceptedException while trying to click a checkbox within surveymonkey.com through Selenium and Python

Question

I'm playing around with a mini-challenge that's been set to automate a form response on survey monkey, I've set up a dummy survey for the purpose of this example.

Essentially, selenium is unable to click the box due to an error with a button display obscuring it.

ElementClickInterceptedException: Message: Element  input id="234136539_1601280849" class="checkbox-button-input " name="234136539[]" type="checkbox"> is not clickable at point (237.5,345.5) because another element span class="checkbox-button-display "> obscures it

I've looked at this question which is Java specific, and I can't quite get my head around how I go about getting past this, I've tried implicit waits, clicking on the box around it but a little lost where to begin without learning Java.

from selenium import webdriver
from selenium.webdriver.common.keys import Keys 
driver = webdriver.Firefox() 
driver.get('https://www.surveymonkey.com/r/L9DJGXR') 
vote_check = driver.find_element_by_id('234136539_1601280849') 
vote_check.click()

This code should replicate the problem with the dummy survey.

Answer 1

Right-click on the checkbox next to "Me" and choose Inspect... what element is selected? The SPAN. That's because the SPAN overlaps the INPUT you want to click. That's what that error is telling you. You are trying to click on an element that is covered by another element. Selenium can't "see" the page to see that the element underneath is not really obscured.

The solution is to click either the SPAN that was in the error or the LABEL. It doesn't really matter which you do, both will work. Two CSS selectors are below

[id='234136539_1601280849'] + label // clicks the LABEL
^ has this ID
                            ^ '+' means sibling
                              ^ LABEL tag

[id='234136539_1601280849'] + label > span // clicks the SPAN
everything is the same as above until...
                                    ^ '>' means child
                                      ^ SPAN tag

Answer 2

To click the second check box associated with text Me you have to induce WebDriverWait for the element to be clickable and you can use the following solution:

• Code Block:

  from selenium import webdriver
  from selenium.webdriver.support.ui import WebDriverWait
  from selenium.webdriver.support import expected_conditions as EC
  from selenium.webdriver.common.by import By
  driver = webdriver.Firefox(executable_path=r'C:\Utility\BrowserDrivers\geckodriver.exe') 
  driver.get('https://www.surveymonkey.com/r/L9DJGXR') 
  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[@class='question-body clearfix notranslate ']//following::label[2]"))).click()
  

• Browser Snapshot: