如何在Java版Selenium中通过已有父元素查找子元素？

问题背景 #

页面包含多个<div>父元素，每个<div>下对应一个<p>子元素，已通过以下代码定位到第一个<div>元素：

@FindBy(xpath="(//div)[1]")
WebElement div_1;

需求：无需使用@FindBy注解定义子元素，直接在测试代码中通过div_1查找其对应的<p>子元素。

页面HTML示例 #

<html>
<body>
<div>
    This is div 1
    <p>
        This is paragraph 1 under div 1.
    </p>
</div>

<div>
    This is div 2
    <p>
        This is paragraph 2 under div 2.
    </p>
</div>

<div>
    This is div 3
    <p>
        This is paragraph 3 under div 3.
    </p>
</div>

</body>
</html>

实现方案 #

可以利用WebElement自带的findElement()方法，在父元素的上下文范围内定位子元素，以下是几种常用方式：

1. 相对XPath定位

使用以.开头的相对XPath，限定查找范围为当前父元素的上下文：

// 查找div_1下所有后代中的<p>元素
WebElement pUnderDiv1 = div_1.findElement(By.xpath(".//p"));

// 若需精准定位直接子元素，可使用
WebElement directPUnderDiv1 = div_1.findElement(By.xpath("./p"));

• .//p：匹配父元素下所有层级的<p>后代元素
• ./p：仅匹配父元素的直接子元素<p>

2. 标签名定位

如果父元素下仅有一个<p>子元素，直接通过标签名定位更简洁：

WebElement pUnderDiv1 = div_1.findElement(By.tagName("p"));

3. CSS选择器定位

利用CSS选择器的相对语法进行定位：

// 查找父元素下所有后代中的<p>元素
WebElement pUnderDiv1 = div_1.findElement(By.cssSelector("p"));

// 仅匹配父元素的直接子元素<p>
WebElement directPUnderDiv1 = div_1.findElement(By.cssSelector("> p"));

说明 #

上述方法均通过WebElement.findElement()实现局部查找，该方法会将查找范围限制在当前父元素内部，而非整个文档，因此能精准定位到目标子元素。

内容的提问来源于stack exchange，提问作者noobie_coder