XPATH:如何 select 祖父母的第三个 child 元素

XPATH: How to select a grandparent's 3rd child element

这是我的 DOM 示例:

<div id="x-auto-2121" class="GI05A-4CEKC">
    <div class="GI05A-4CBKC GI05A-4COJC GI05A-4CGKC GI05A-4CFKC">
        <img style="height: 18px; width: 17px;" src="https://someserver.com/clear.gif"/>
        <img class="GI05A-4CDKC"/>
        <img class="GI05A-4CMJC"/>
        <img class="GI05A-4CCKC"/>
        <span class="GI05A-4CHKC">
            <span>The Unique Value I Can Search For</span>
        </span>
    </div>
</div>

我知道值 "The Unique Value I Can Search For" 并且可以使用类似这样的方法找到它 //span[text()='The Unique Value I Can Search For']

问题是我想select祖父母的第三个child:

 <img class="GI05A-4CMJC"/>

我正在尝试使用 Selenium 来测试一个 UI 非常不友好的自动化(诅咒你,GXT)。显然,我是 xpath 的新手。

<div id="x-auto-2121" class="GI05A-4CEKC">
    <div class="GI05A-4CBKC GI05A-4COJC GI05A-4CGKC GI05A-4CFKC">  <-- Common ancestor
        <img src="https://someserver.com/clear.gif"/>
        <img class="GI05A-4CDKC"/>
        <img class="GI05A-4CMJC"/>                                 <-- Node of interest
        <img class="GI05A-4CCKC"/>
        <span class="GI05A-4CHKC">
            <span>The Unique Value I Can Search For</span>         <-- Node of interest
        </span>
    </div>
</div>

方法一

从关键节点开始,向上导航到感兴趣节点的共同祖先,然后向下挖掘到结果。我们的核心是

//span/../../img

然后就是指定我们想要哪个span和哪个img的问题了。

//span[text()='The Unique Value I Can Search For']/../../img[3]

方法二

从感兴趣节点的共同祖先开始,然后深入挖掘结果。我们的核心是

//div/img

然后就是指定我们想要哪个div和哪个img的问题了。

//div[span/span/text()='The Unique Value I Can Search For']/img[3]

您可以使用具有正确 ID 的标签启动 xpath。如果 id 不是动态的,您可以使用下面的 xpath 来获取所需的元素。

//div[@id='x-auto-2121']/div/img[3]