python中selenium等到元素可点击，元素未点击成功解决办法

环境描述

• python版本: 3.10.0
• selenium版本: 3.141.0
• 浏览器: firefox
• 浏览器版本: 112.0.1 (64 位)

问题描述

我在使用python中的selenium显示等待等到元素可点击后，点击元素，等到元素可点击了，但是元素没有点击成功。示例代码如下。

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

with webdriver.Firefox() as driver:
	driver.maximize_window()

	url = "https://www.baidu.com/"
	driver.get(url)

	wait = WebDriverWait(driver, 10)
	locator = By.CSS_SELECTOR, "input#su"
	method = EC.element_to_be_clickable(locator)
	element = wait.until(method)

	chains = ActionChains(driver)
	chains.move_to_element(element).click().perform()

注:以上代码可点击成功，代码仅供参考

问题分析

我认为等到元素可点击，但是没有点击成功有以下几种可能性(仅供参考，欢迎指出问题和补充):

1. 元素被禁用了，可使用element的is_enabled方法判断元素是否已启用。

2. 元素被隐藏了，可通过下面的代码判断元素是否被隐藏。

   display_style = element.value_of_css_property("display")
   visibility_style = element.value_of_css_property("visibility")
   if display_style == "none" or visibility_style == "hidden":
       print("元素被隐藏了")
   else:
       print("元素可见")
   

   3.元素被其它元素遮挡了，这也是我遇到的问题，可通过下面的代码判断元素是否被其它元素遮挡。

   is_element_overlapped = self.driver.execute_script("""
                       function isOverlapping(element) {
                           const rect1 = element.getBoundingClientRect();
                           const elements = document.querySelectorAll("*");
                           for (let i = 0; i < elements.length; i++) {
                               const element = elements[i];
                               if (element === rect1) continue;
                               const rect2 = element.getBoundingClientRect();
                               if (
                                   rect1.top < rect2.bottom &&
                                   rect1.bottom > rect2.top &&
                                   rect1.left < rect2.right &&
                                   rect1.right > rect2.left
                               ) {
                                   return true;
                               }
                           }
                           return false;
                       }
                       return isOverlapping(arguments[0]);
   		""", element)
   if is_element_overlapped:
       print("元素被遮挡了")
   else:
       print("元素没有被遮挡")
   

   元素被遮挡点击方法

   解决方法1

   使用js进行点击，代码如下。

   driver.execute_script("arguments[0].click();", element)
   

   解决方法2

   定位到上层元素再将鼠标移动到要点击的元素上。代码如下。

   def click_by_offset(driver: WebDriver, element: WebElement) -> None:
   	""" 鼠标先移动到该元素的父元素上，鼠标再移动到该元素上，然后点击 """
   	# 要点击的元素的位置
   	x, y = element.location.values()
   
   	# 要点击的元素的父元素
   	parent_element = driver.execute_script("return arguments[0].offsetParent;", element)
   
   	assert isinstance(parent_element, WebElement), f"{parent_element}类型错误，应为{WebElement}"
   
   	# 要点击的元素的父元素的位置
   	parent_x, parent_y = parent_element.get_attribute("offsetLeft"), parent_element.get_attribute("offsetTop")
   
   	# 偏移量
   	xoffset, yoffset = x - int(parent_x), y - int(parent_y)
   
   	# 点击
   	ActionChains(driver).move_to_element_with_offset(parent_element, xoffset, yoffset).click().perform()
   

   完整示例代码如下。

   from selenium import webdriver
   from selenium.webdriver import ActionChains
   from selenium.webdriver.common.by import By
   from selenium.webdriver.remote.webdriver import WebDriver
   from selenium.webdriver.remote.webelement import WebElement
   from selenium.webdriver.support.wait import WebDriverWait
   from selenium.webdriver.support import expected_conditions as EC
   
   
   def click_by_offset(driver: WebDriver, element: WebElement) -> None:
   	""" 鼠标先移动到该元素的父元素上，鼠标再移动到该元素上，然后点击 """
   	# 要点击的元素的位置
   	x, y = element.location.values()
   
   	# 要点击的元素的父元素
   	parent_element = driver.execute_script("return arguments[0].offsetParent;", element)
   
   	assert isinstance(parent_element, WebElement), f"{parent_element}类型错误，应为{WebElement}"
   
   	# 要点击的元素的父元素的位置
   	parent_x, parent_y = parent_element.get_attribute("offsetLeft"), parent_element.get_attribute("offsetTop")
   
   	# 偏移量
   	xoffset, yoffset = x - int(parent_x), y - int(parent_y)
   
   	# 点击
   	ActionChains(driver).move_to_element_with_offset(parent_element, xoffset, yoffset).click().perform()
   
   
   if __name__ == '__main__':
   	with webdriver.Firefox() as driver:
   		driver.maximize_window()
           
   		url = "https://www.baidu.com"
   		driver.get(url)
           
   		wait = WebDriverWait(driver, 10)
   		locator = By.CSS_SELECTOR, "input#su"
   		method = EC.element_to_be_clickable(locator)
   		element = wait.until(method)
           
   		click_by_offset(driver, element)