如何在 python 中使用 selenium 单击 Vue/Vuetify 卡片？

Question

我使用的是selenium 4.0.0版本，供参考

我正在尝试单击充当按钮的 Vuetify 卡片元素，但我运行遇到了 element not interactable: [object HTMLDivElement] has no size and location 或 element not interactable 错误。过去我已经能够用动作链解决类似的问题，但它似乎不适用于此。

这是包含按钮的列表元素：

<li class="lu-li list-item" data-v-711d8d7a="" style="display: flex;">
    <div class="addCard v-card v-card--link v-sheet theme--light" data-v-711d8d7a="" tabindex="0" onselectstart="return false;">
        ::before
        <i class="v-icon notranslate btnAdd material-icons theme--light enableIcon" data-v-711d8d7a="" aria-hidden="true">
            add
            ::after
        </i>
    </div>
</li>

我尝试的第一件事就是简单地单击该元素，然后在它不起作用时单击它下面的 <i> 元素：

addQLButton = driver.find_element(By.CLASS_NAME, "addCard")
addQLButton.click()

addQLButton = driver.find_element(By.CLASS_NAME, "btnAdd")
addQLButton.click()

我已经尝试在 v-card <div> 和 <i> 元素上使用 WebDriverWait 以确保它们在被单击之前可用，它顺利通过：

WebDriverWait(driver, timeout=10).until(lambda d: d.find_element(By.CLASS_NAME, "addCard"))
WebDriverWait(driver, timeout=10).until(lambda d: d.find_element(By.CLASS_NAME, "btnAdd"))

我已经尝试使用动作链来确保元素可见（这在过去曾出现过类似的错误），但我仍然运行遇到同样的问题：

addQLButton = driver.find_element(By.CLASS_NAME, "addCard")
actions.move_to_element(addQLButton).perform()
driver.execute_script("arguments[0].click();", addQLButton)

addQLButton = driver.find_element(By.CLASS_NAME, "btnAdd")
actions.move_to_element(addQLButton).perform()
driver.execute_script("arguments[0].click();", addQLButton)

这些元素不在 iframe 中，我确信我选择了正确的 window，因为我仍然能够与其元素进行交互。

我有点不知所措，任何帮助将不胜感激。如果我没有足够清楚地解释问题，我很乐意回答任何澄清问题。

Answer 1

我设法让它与一些 javascript:

一起工作

js = "document.querySelector('.btnAdd').click();"
driver.execute_script(js)

如何在 python 中使用 selenium 单击 Vue/Vuetify 卡片？

How to click a Vue/Vuetify card using selenium in python?

python

selenium

vue.js

vuetify.js