css - 用 Selenium 检测阻塞覆盖

Question

我正在测试一个网站，该网站会打开浏览器内的弹出窗口以显示对象详细信息。这些弹出窗口有时是模态的，我的意思是它们使屏幕的其余部分不起作用，并触发灰色透明覆盖层，覆盖除弹出窗口之外的所有内容。此覆盖是预期行为，这意味着我需要一种方法来检测它是否被正确触发。

但是，我对此类覆盖的实现还不够熟悉，无法确定应该在 DOM 中的何处查找控制此类行为的属性。因此，我希望有人能够提供有关如何配置此类覆盖的更多信息，从而为我指明正确的方向。

显而易见的解决方案是简单地尝试单击一个按钮，看看会发生什么，但我希望编写一种可以在整个测试套件中实现的方法，而不必为每种情况编写不同的检查。

对于那些感兴趣的人，我正在使用 Selenium 编写 Java 脚本。

Answer 1

我知道这已经过时了，但它仍然可能对其他人有帮助。我最近刚刚为我们的 React 网站解决了类似的问题。我相信我们正在使用react-block-ui模块来实现我们的阻塞覆盖。

基本上，由于两个已知事实，我能够检测到某个元素被覆盖层阻挡:

1. 该元素位于遵循特定命名约定的包含 div(“覆盖层”)内。在我们的例子中，它是 section-overlay-X。
2. 如果该叠加层处于阻塞状态，则该叠加层将具有一个类属性(名为 av-block-ui)。

(希望您也可以访问此信息......或类似有用的信息。)

根据这些信息，我编写了几个实用方法来帮助我确定特定的 WebElement 是否被覆盖层阻止。如果被阻止，则抛出 ElementNotInteractableException。

对于 Java:

...
By SECTION_OVERLAY_ANCESTOR_LOCATOR = By.xpath("./ancestor::div[contains(@id, 'section-overlay-')][1]");
...

    private WebElement findUnblockedElement(By by) {
    WebElement element = driver.findElement(by);
    if (isBlockedByOverlay(element)) {
        throw new ElementNotInteractableException(String.format("Element [%s] is blocked by overlay", element.getAttribute("id")));
    } else {
        return element;
    }
    }

    private boolean isBlockedByOverlay(WebElement element) {
    List<WebElement> ancestors = element.findElements(SECTION_OVERLAY_ANCESTOR_LOCATOR);
    WebElement overlayAncestor = ancestors.get(0);
    String overlayClass = overlayAncestor.getAttribute("class");
    return !StringUtils.isBlank(overlayClass);
    }

这是我的片段: https://bitbucket.org/snippets/v_dev/BAd9dq/findunblockedelement