javascript - WebDriverError: element click intercepted: Other element would receive the click - detection - Stack Overflow

admin管理员组

文章数量:1348086

I would like to detect if an element is clickable before attempting to click it. In my specific use case the element is hidden by another element on top of it during processing and when done, the overlay is removed and the element can be clicked. Unfortunately the condition elementIsVisible does not consider an element to be hidden by another element nor does the method WebElement.isDisplayed of an element.

// find an element that is hidden behind some overlay
const hiddenElement = await driver.findElement(By.id('hiddenElement'));

// wait for element returns the "hidden" element
const await visibleElement = driver.wait(webdriver.until.elementIsVisible(hiddenElement));

// "isDisplayed" reports the "hidden" element as visible
const visible = await hiddenElement.isDisplayed();

I could clearly use the overlay element to detect if the element is hidden but this would have to be customized for each different type of overlay and I'm actually looking for a more generic way to detect if an element is actually clickable.

I would like to detect if an element is clickable before attempting to click it. In my specific use case the element is hidden by another element on top of it during processing and when done, the overlay is removed and the element can be clicked. Unfortunately the condition elementIsVisible does not consider an element to be hidden by another element nor does the method WebElement.isDisplayed of an element.

// find an element that is hidden behind some overlay
const hiddenElement = await driver.findElement(By.id('hiddenElement'));

// wait for element returns the "hidden" element
const await visibleElement = driver.wait(webdriver.until.elementIsVisible(hiddenElement));

// "isDisplayed" reports the "hidden" element as visible
const visible = await hiddenElement.isDisplayed();

I could clearly use the overlay element to detect if the element is hidden but this would have to be customized for each different type of overlay and I'm actually looking for a more generic way to detect if an element is actually clickable.

• javascript
• selenium
• selenium-webdriver

Share Improve this question Follow asked May 7, 2019 at 5:35 doberkoflerdoberkofler 10.4k2424 gold badges8888 silver badges148148 bronze badges 4

• How about condition elementToBeClickable? – Fenio Commented May 7, 2019 at 5:55
• Had same experience. This is because at the moment there are some other elements appear. Like Fade in message or etc. Solution is wait until page is stable. then perform your function. Note ElementToBeClickable may also not work – Devdun Commented May 7, 2019 at 5:55
• @Fenio I'm not aware of any condition elementToBeClickable in the webdriver api for javascript? – doberkofler Commented May 7, 2019 at 6:14
• @doberkofler Right, you look for JS solution and there is no such solution. Basically, this condition checks if the element is visible and enabled. It won't help you case – Fenio Commented May 7, 2019 at 6:17

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I did actually find a solution that works as expected by myself that can be distilled to the following:

A function isElementClickable that is responsible for checking if an element is clickable:

function isElementClickable(element) {
    const SCRIPT = `
    const element = arguments[0];

    // is element visible by styles
    const styles = window.getComputedStyle(element);
    if (!(styles.visibility !== 'hidden' && styles.display !== 'none')) {
        return false;
    }

    // is the element behind another element
    const boundingRect = element.getBoundingClientRect();

    // adjust coordinates to get more accurate results
    const left = boundingRect.left + 1;
    const right = boundingRect.right - 1;
    const top = boundingRect.top + 1;
    const bottom = boundingRect.bottom - 1;

    if (document.elementFromPoint(left, top) !== element ||
        document.elementFromPoint(right, top) !== element ||
        document.elementFromPoint(left, bottom) !== element ||
        document.elementFromPoint(right, bottom) !== element) {
        return false;
    }

    return true;
    `;

    return element.getDriver().executeScript(SCRIPT, element);
}

A function 'elementIsClickableCondition' that can be used as a replacement condition instead of webdriver.until.elementIsVisible:

function elementIsClickableCondition(locator) {
    return new webdriver.WebElementCondition('until element is visible', async function (driver) {
        try {
            // find the element(s)
            const elements = await driver.findElements(locator);
            if (elements.length > 1) {
                throw new Error(`elementIsClickableCondition: the locator "${locator.toString()} identifies "${elements.length} instead of 1 element`);
            } else if (elements.length < 1) {
                return null;
            }

            const element = elements[0];

            // basic check if the element is visible using the build-in functionality
            if (!await element.isDisplayed()) {
                return null;
            }

            // really check if the element is visible
            const visible = await isElementClickable(element);

            return visible ? element : null;
        } catch (err) {
            if (err instanceof webdriver.error.StaleElementReferenceError) {
                return null;
            } else {
                throw err;
            }
        }
    });
}

本文标签：