html - 使用 XPath 选择具有最高 z-index 的元素

Question

在我的 Selenium 应用程序中，我尝试选择一个具有最高 z-index 的元素。该值不是在元素本身中定义的，而是在祖先节点上定义的(嵌套级别未知)。此外，如果使用 display: none 不可见祖先，则不应返回它。

示例 HTML:

  <div class="container" style="z-index: 10">
    <div style="display: none">
      <!-- this should not be selected because it is invisible (and the z-index is lower than the others) -->
      <div myattr="example"></div>
    </div>
  </div>
  <div class="container" style="z-index: 100">
    <div>
      <!-- this should not be selected because the z-index is lower than the others -->
      <div myattr="example"></div>
    </div>
  </div>
  <div class="container" style="z-index: 1000">
    <div>
      <!-- this should be selected because it is visible and has the highest z-index -->
      <div myattr="example"></div>
    </div>
  </div>

目前我有一个正则表达式，它选择所有带有 myattr="example" 的元素，这些元素没有带有 display: none 的祖先:

//div[@myattr='example'
and not(ancestor::div[contains(@style,'display:none')])
and not(ancestor::div[contains(@style,'display: none')])]

我需要一个附加条件来选择具有最高 z-index 的元素，可以说是在其他元素之上可见的元素。对于每个找到的节点，必须查看所有祖先，直到找到具有特定类的节点(本例中为 container)。然后只返回具有最高 z-index 祖先的元素。

这甚至可以用 XPath 实现吗？

Answer 1

我非常努力地尝试了，但我认为您无法使用单个 XPath 1.0 表达式实现此目的。您可以靠近，但还不够。

您需要使用一些其他逻辑。有大约一千种不同的方法。

例如，获取所有 container 元素，按 z-index 对它们进行排序，并测试它们的 myattr="example" 后代的可见性:

// Gets all containers - could also be Gets all elements containing z-index
List<WebElement> containers = driver.findElements(By.className("container"));

// Sorts the containers in an descending order by their z-indexes
Collections.sort(containers, Collections.reverseOrder(new Comparator<WebElement>() {
    @Override
    public int compare(WebElement o1, WebElement o2) {
        return getZindex(o1) - getZindex(o2);
    }
    private int getZindex(WebElement elem) {
        String zindex = elem.getAttribute("style").toLowerCase().replace("z-index: ", "");
        return Integer.parseInt(zindex);
    }
}));

// look for a visible candidate to return as a result
for (WebElement container : containers) {
    WebElement result = container.findElement(By.cssSelector("*[myattr='example']"));
    if (result.isDisplayed()) {
        return result;
    }
}
throw new IllegalStateException("No element found.");

---

编辑:在您接受这个答案后，我回到问题并提出了 XPath 1.0 解决方案。它非常丑陋，性能很差，我无法验证它的正确性(它适用于你的例子和我试过的其他几个例子)，所以我建议你使用上面的 WebDriver 方法。无论如何，我会分享它:

Copypastable oneliner:

//div[@myattr='example' and not(ancestor::div[contains(@style,'display: none')])]/ancestor::div[@class='container' and substring-after(@style,'z-index:') > substring-after(../div[not(descendant::div[contains(@style,'display: none')])]/@style,'z-index:')]

格式化版本:

//div
    [
        @myattr='example'
        and not(ancestor::div[contains(@style,'display: none')])
    ]
    /ancestor::div
        [
            @class='container'
            and substring-after(@style,'z-index:')
                > substring-after(
                    ../div[not(descendant::div[contains(@style,'display: none')])]/@style,
                    'z-index:')
        ]

以及人类语言的自由翻译(不是字面的!):

SELECT A VISIBLE <div @myattr='example'> NODE
//div
    [
        @myattr='example'
        and not(ancestor::div[contains(@style,'display: none')])
    ]
    THAT HAS A <div @class='container'> ANCESTOR
    /ancestor::div
        [
            @class='container'
            WHOSE z-index IS GREATER THAN z-index...
            and substring-after(@style,'z-index:')
                > substring-after(
                    ...OF ALL VISIBLE SIBLINGS
                    ../div[not(descendant::div[contains(@style,'display: none')])]/@style,
                    'z-index:')
        ]