WebDriverError：元素点击被拦截：其他元素会收到点击 - 检测

Question

我想在尝试单击某个元素之前检测它是否可单击。在我的特定用例中，元素在处理过程中被其上的另一个元素隐藏，完成后，覆盖层被删除，元素可以被点击。不幸的是，条件elementIsVisible不考虑一个元素被另一个元素隐藏，元素的方法也不考虑WebElement.isDisplayed。

// 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();

我可以清楚地使用覆盖元素来检测元素是否被隐藏，但这必须针对每种不同类型的覆盖进行自定义，我实际上正在寻找一种更通用的方法来检测元素是否实际上是可点击的。

Answer 1

我确实找到了一个可以按我自己的预期工作的解决方案，可以提炼成以下内容：

isElementClickable负责检查元素是否可点击的函数：

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);
}

一个函数 'elementIsClickableCondition' 可以用作替换条件而不是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;
            }
        }
    });
}