Question

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

但是，我对这种覆盖的实现还不够熟悉，无法确定在DOM中我应该找到哪些属性来管理这种行为。因此，我希望有人能够获得更多有关如何配置此类叠加层的信息，这可能会让我指出正确的方向。

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

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

Answer 1

我知道这是旧的，但它可能仍然可以帮助别人。我刚刚解决了React网站的类似问题。我相信我们正在使用react-block-ui模块来实现阻塞覆盖。

基本上，由于2个已知事实，我能够检测到某个元素被叠加层阻挡：

该元素位于某个命名约定之后的包含div（“overlay”）中。在我们的例子中，它是section-overlay-X。
此叠加层如果阻止，则会有一个类属性（名为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

Answer 2

这并不适用于所有情况，但我通过检查 body 元素的溢出值解决了这个问题。模态的味道我试图在页面处于活动状态时克服页面的禁用滚动。

用硒检测阻塞覆盖层

2 个答案: