Python Selenium4点击Vue/Vuetify卡片出现element not interactable错误如何解决

报错element not interactable: has no size and location的根本原因为：元素已被加载到DOM树中，但未完成样式渲染、处于视口外、或CSS属性为隐藏状态，无法触发交互。你此前使用的WebDriverWait仅验证了元素存在于DOM，未验证元素可交互，是主要的失效原因。

from selenium.webdriver.support import expected_conditions as EC

# 初始化等待实例
wait = WebDriverWait(driver, timeout=10)
# 使用更精准的CSS选择器定位，避免匹配到页面中隐藏的同class元素
add_card_locator = (By.CSS_SELECTOR, "li.list-item div.addCard.v-card--link")
# 等待元素可点击，代替原有的仅判断元素存在的逻辑
addQLButton = wait.until(EC.element_to_be_clickable(add_card_locator))

# 强制滚动元素到视口中央，避免元素不在可视区域的问题
driver.execute_script("arguments[0].scrollIntoView({block: 'center', inline: 'center'});", addQLButton)

# 若仍有问题可打开下方注释打印元素状态排查
# print("元素宽度：", addQLButton.get_attribute("offsetWidth"))
# print("元素高度：", addQLButton.get_attribute("offsetHeight"))
# print("display样式：", addQLButton.value_of_css_property("display"))
# print("visibility样式：", addQLButton.value_of_css_property("visibility"))

# 使用JS触发点击，规避Selenium原生点击的交互限制
driver.execute_script("arguments[0].click();", addQLButton)

• 检查页面中是否存在多个匹配addCard类名的元素，若存在可使用driver.find_elements(By.CLASS_NAME, "addCard")获取所有匹配元素，按下标选取对应的可交互元素
• 若按钮所在列表为虚拟滚动/懒加载列表，需要先触发列表滚动到按钮所在位置，再执行定位操作
• 无需定位子元素<i>标签触发点击，Vuetify的v-card--link自带完整点击事件，直接操作外层div元素即可

内容的提问来源于stack exchange，提问作者Funky Disco Demon