XPath 查找子元素的父元素

Posted 2023-03-05

【中文标题】XPath 查找子元素的父元素

【英文标题】：XPath find parent of a child element

【发布时间】：2018-07-09 21:49:17

【问题描述】：

我有这样的结构：

<div class="Container">
  <div class="HighlightContainer">
    <div class="NodeTextHighlightContainer">
      <span class="TreeItemSelected">Products</span>
    </div>
    <button class="ContainerSelectedMenu" type="button"></button>
  </div>
</div>

由于 DOM 的行为方式并试图保持动态，我只能定位包含文本 Products 的 span。使用类似的东西：

Driver.FindElement(By.XPath("//div[contains(@class, 'Container')]/descendant::span[text() = 'Products']"));

但是，我需要基于该 span 元素定位class="ContainerSelectedMenu" 所在的按钮，最好的方法是什么？类似于获取 Container 子元素的父 div，然后找到按钮元素。

【问题讨论】：

我完全没有这方面的经验，但是..不是用来选择父母的吗？

【参考方案1】：

我通过上下遍历找到了不同的方法来做到这一点，效果很好，但我现在更喜欢这种方法：

xpath = "//div[contains(@class, 'Container') and descendant::span[text() = 'Products']]//button";

基本上，您将带有text() = 'Products' 的后代作为您真正想要的div 标签的要求的一部分，即父标签。然后您可以使用//button 或//button[@class='ContainerSelectedMenu'] 轻松搜索按钮

这里实际上不需要descendant 轴，所以可以用这个来简化一下：

xpath = "//div[contains(@class, 'Container') and .//span[text() = 'Products']]//button";

英文...

找一个div

1.

有一个@class，其中包含“Container”和

2.

有一个后代 span 元素，其文本为 `Products 找到div 的后代button

【讨论】：

我认为您需要在 //span 之前使用 .（所以它应该是 .//span），以便它从当前上下文开始。

@DanielHaley 听起来不错，我会进行编辑，谢谢！

很好的解释，这很有帮助。

【参考方案2】：

一种方法是定位span，然后向上找到祖先div，然后返回到与class匹配的元素...

//span[normalize-space()='Products']/ancestor::div[contains(@class,'Container')]//*[contains(@class,'ContainerSelectedMenu')]

另一种方法是定位div，然后是span，然后上两层，然后返回到与class匹配的元素...

//div[contains(@class,'Container')]//span[normalize-space()='Products']/../../*[contains(@class,'ContainerSelectedMenu')]

另一种方法（类似于@mrfreester）是匹配div，测试span，然后直接转到匹配class的元素...

//div[contains(@class, 'Container') and .//span[normalize-space()='Products']]//*[contains(@class,'ContainerSelectedMenu')]

这三个都匹配button。