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

I am using selenium version 4.0.0, for reference.

I'm trying to click a Vuetify card element, which is acting as a button, but I running into an element not interactable: [object HTMLDivElement] has no size and location or just element not interactable errors. I have been able to solve similar problems with action chains in the past, but it doesn't seem to work with this.

This is the list element the button is contained within:

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

The first things I tried was simply clicking on the element, and then clicking on the <i> element beneath it when that didn't work:

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

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

I have already tried using WebDriverWait on both the v-card <div> and <i> element to make sure they are available before being clicked, which it passes without any issues:

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

I have already tried using action chains to make sure the elements are visible (this has worked in the past with similar errors), but I still run into the same issue:

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)

The elements are not in an iframe, and I am sure I have the correct window selected as I am still able to interact with its elements.

I am at a bit of a loss, any help would be much appreciated. I'm happy to answer any clarifying questions if I didn't explain the issue clearly enough.

CodePudding user response：

I managed to get it working with some javascript:

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