如何在 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 中，我确信我选择了正确的窗口，因为我仍然能够与其元素交互。

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

Answer 1

我设法让它与一些 javascript 一起工作：

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