html - 是否可以有没有高度和宽度的可见元素？

Question

我一直在研究现有的 Selenium 自动化框架，其中有一段代码可以检查元素的宽度和高度。如果它们只有正值，那么它将是可交互的，例如单击、双击等。

public boolean isElementInteractable(WebElement element) {
    JavascriptExecutor js = (JavascriptExecutor) driver;
    String offsetWidth = js.executeScript("return arguments[0].offsetWidth;", element).toString();
    String offsetHeight = js.executeScript("return arguments[0].offsetHeight;", element).toString();

    if ((Integer.parseInt(offsetWidth) != 0 && Integer.parseInt(offsetHeight) != 0) && element.isDisplayed()) {
        return true;
    }
    return false;
}

在我看来，每个可见/可交互的元素都具有正的高度和宽度。我很困惑为什么要编写这段代码。

能否请您确认我的理解是否正确？如果没有，请帮助我了解可能的情况。

Answer 1

WebElement 必须有宽度和高度才能变得棘手，但在两种情况下它可以被认为是可见的:它具有正的 stroke-width 或它们具有正大小的子节点/文本节点

来自 WebDriver specifications Element displayedness

The element displayed algorithm is a boolean state where true signifies that the element is displayed and false signifies that the element is not displayed. To compute the state on element, invoke the Call(bot.dom.isShown, null, element).

来自 bot.dom.isShown_在 github 中(第 437 行)

function positiveSize(e) {
    var rect = bot.dom.getClientRect(e);
    if (rect.height > 0 && rect.width > 0) {
      return true;
    }
    // A vertical or horizontal SVG Path element will report zero width or
    // height but is "shown" if it has a positive stroke-width.
    if (bot.dom.isElement(e, 'PATH') && (rect.height > 0 || rect.width > 0)) {
      var strokeWidth = bot.dom.getEffectiveStyle(e, 'stroke-width');
      return !!strokeWidth && (parseInt(strokeWidth, 10) > 0);
    }
    // Zero-sized elements should still be considered to have positive size
    // if they have a child element or text node with positive size, unless
    // the element has an 'overflow' style of 'hidden'.
    return bot.dom.getEffectiveStyle(e, 'overflow') != 'hidden' &&
        goog.array.some(e.childNodes, function(n) {
          return n.nodeType == goog.dom.NodeType.TEXT ||
                 (bot.dom.isElement(n) && positiveSize(n));
        });
    }