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

要单击与文本 Me 相关联的第二个复选框，必须诱使 WebDriverWait 使元素可点击，您可以使用以下解决方案：

• 代码块：

  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()
  

• 浏览器快照：

Answer 2

右键单击“我”旁边的复选框，然后选择“检查...”。选择了什么元素？ SPAN。这是因为SPAN与您要单击的INPUT重叠。那就是那个错误告诉你的。您试图单击另一个元素覆盖的元素。 Selenium无法“查看”页面以查看其下方的元素并未真正被遮盖。

解决方案是单击错误的SPAN或LABEL。做什么都不重要，两者都可以。下面是两个CSS选择器

[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