Question

使用Selenium，我可以找到子元素和父元素。如何从指定的父母那里获得孩子的深度？

以下是HTML的一小部分示例

<div class="header">
    <div></div>
    <div></div>
        <div>
            <ul>
                <li>
                    <img />
                </li>
            </ul>
        </div>
    <div></div>
    <div></div>
</div>

这是我用来查找img标签父级的xpath。

document.evaluate('../ancestor::div[contains(concat(" ", normalize-space(@class), " "), " header ")]', $('img')[0], null, XPathResult.ANY_UNORDERED_NODE_TYPE, null)

所以我现在用什么来计算使用xpath的父元素和子元素之间的元素数量。我知道xpath中的count方法，但是我对如何仍然没有经验。结果应该是父母距离标签5个级别。

Answer 1

如果您热衷于使用jQuery在javascript中执行此操作，则应执行以下功能：

       function getDistanceFromElement(src){
            return getDistance(src, 10, 1);
        }

        function getDistance(src, maxDepth, distance){
            if(maxDepth > 0) {
                var parent = $(src).parent();
                if($(parent).hasClass("header")) {
                    return distance + 1;
                } else {
                    return getDistance(parent, maxDepth - 1, distance + 1);
                }
            } else {
                return;
            }
        }

使用以下HTML

<div class="header">
    <div></div>
    <div></div>
        <div>
            <ul>
                <li>
                    <img id="my_image"/>
                </li>
            </ul>
        </div>
    <div></div>
    <div></div>
</div>

，以下调用将显示5：

$(document).ready(function() {
    var srcImage = $("#my_image");

    var d = getDistanceFromElement(srcImage);
    alert(d);

});

Answer 2

我会第二个@ benjamind的答案，直接在XPath中执行此操作可能有点困难。但是我们可能会使用一个小技巧：您要查找的深度可以计算为img标记到根标记的深度与父标记到根标记的深度之间的差异。试试这个：

count(ancestor::*) - count(ancestor::div[contains(concat(' ', normalize-space(@class), ' '), ' header ')][1]/ancestor::*)

Answer 3

比benjamin.d的方法简单一点 $("#my_image").parentsUntil("div[class='header']").length + 1;

请注意，+ 1也用于计算<div class="header">。如果没有它，此函数将返回位于被检查元素之间的元素数。

如何使用xpath计算父元素的子元素深度？

3 个答案: