Selenium：如何使用IWebElement.FindElement()根据祖先的属性之一找到任何祖先

Question

假设我有这个HTML

<div class="item-wrapper">
<div>
<h6>My Header 1</h6>              
<div>
<div>
<div>
<label>
<input type="checkbox" />
<span class="class1">Text 2</span>       
<span class="class2"></span>
</label>
<div>
</div>
</div>
<div class="item-wrapper">
<div>
<h6>My Header 2</h6>              
<div>
<div>
<div>
<label>
<input type="checkbox" />
<span class="class1">Text 2</span>       
<span class="class2"></span>
</label>
<div>
</div>
</div>

我如何让任何孩子到共同的父母，即<div class="item-wrapper">？在本例中，属性是类。但是，该属性可以是可以标识共同祖先的任何属性。

var xPathToAncestor = "ancestor::div[@class='item-wrapper']";
var ancestor = child.FindElement(By.XPath(xPathToAncestor)

我已经尝试了很多组合//ancestor::div[@class='item-wrapper']，.//ancestor::div[@class='item-wrapper']，但没有任何效果。

Answer 1

您可以使用

//div[@class='item-wrapper']//span

此查找跨度标记，这些标记是直接和间接子项

寻找直接子级

//div[@class='item-wrapper']/span

如何使用祖先：

//ancestor::div[@class="item-wrapper"]

这将找到一个带有标签div和类项包装器的元素，并且是任何子项的父级

//span/ancestor::div[@class="item-wrapper"]

在您的情况下，只需更改

var xPathToAncestor = "./ancestor::div[@class='item-wrapper']";

请参阅"."，它表示子节点是 XPath 的上下文节点

这将查找带有标签div 和类项包装器的元素，并且是 span 标签的父元素

//ancestor::div[@class="item-wrapper"]/span

查找作为类="项目包装器"和div 标签的直接子级的 span 标签

//ancestor::div[@class="item-wrapper"]//span

查找作为类="项目包装器"和div 标签的直接或非直接子级的 span 标签

Answer 2

要访问与公共父<div class="item-wrapper">相关的任何子项，您可以使用以下基于 xpath 的定位器策略：

• 使用xpath获取<input type="checkbox" />：

  //div[@class='item-wrapper']//h6[text()='My Header']//following::label[1]/input[1]
  

• 使用xpath获取<span class="class1">Text 1</span>：

  //div[@class='item-wrapper']//h6[text()='My Header']//following::label[1]//span[@class='class1']
  

<小时 />

更新

根据您的问题更新，要获取通用父<div class="item-wrapper">，您可以使用以下基于 xpath 的定位器策略：

• 使用xpath和文本Text 2ancestor：

  //span[text()='Text 2']//ancestor::div[@class='item-wrapper']
  

• 使用xpath和class="class1"属性的ancestor：

  //span[@class='class1']//ancestor::div[@class='item-wrapper']
  

Answer 3

您可以尝试使用 CSS 选择器而不是 XPath。

以您问题中的 HTML 为例：

<div class="item-wrapper">
<div>
<h6>My Header</h6>              
<div>
<div>
<div>
<label>
<input type="checkbox" />
<span class="class1">Text 1</span>       
<span class="class2"></span>
</label>
<div>
</div>
</div>

要定位class="class1"，您可以使用以下内容：

var classOne = driver.findElement(By.cssSelector(".item-wrapper > div(2) > div > label > '.class1'"));

1. 这将定位item-wrapper类，
2. 然后是第 2div(因为第 1div包含header)，
3. 然后是下一个div
4. 然后是label
5. 那么任何有类class1
6. 或者，您可以使用span而不是类名。这将使它var classOne = driver.findElement(By.cssSelector(".item-wrapper > div(2) > div > label > span(1)));.因为你想要第一个span而不是第二个。

请注意，class的 CSS 选择器是.。您可以使用不同的 CCS 选择器。

这个答案也解释了使用CSS选择器。