Selenium 4 新定位器 relative locators

1. 获取某个元素上方的元素 (above)

场景：已知“密码”输入框的参考元素为“邮箱”输入框的下方。反过来，我们可以通过“密码”输入框定位到它上方的“邮箱”输入框。

WebElement passwordInput = driver.findElement(By.id("password"));
WebElement emailInput = driver.findElement(withTagName("input")
                                .above(passwordInput));

2. 获取某个元素下方的元素 (below)

场景：定位“提交”按钮下方的错误提示（假设错误提示在按钮之后渲染且位于视觉下方）。

WebElement submitButton = driver.findElement(By.tagName("button"));
WebElement errorMsg = driver.findElement(withTagName("p")
                                .below(submitButton));

3. 获取某个元素左侧的元素 (toLeftOf)

场景：在密码输入框左侧是其对应的标签 <label>密码</label>。

WebElement passwordInput = driver.findElement(By.id("password"));
WebElement passwordLabel = driver.findElement(withTagName("label")
                                    .toLeftOf(passwordInput));

4. 获取某个元素右侧的元素 (toRightOf)

场景：标签“邮箱”右侧紧挨着输入框。

WebElement emailLabel = driver.findElement(By.xpath("//label[text()='邮箱']"));
WebElement emailInput = driver.findElement(withTagName("input")
                                  .toRightOf(emailLabel));

5. 获取某个元素附近的元素 (near)

场景：找到一个靠近“提交”按钮的加载图标。它会自动寻找最接近参考元素的匹配标签。

WebElement submit = driver.findElement(By.tagName("button"));
WebElement loader = driver.findElement(withTagName("div")
                              .near(submit));
// 可自定义最大距离（单位像素），例如 100px
WebElement loader2 = driver.findElement(withTagName("div")
                                .near(submit, 100));

链式组合使用

相对定位器支持链式调用，进一步缩小筛选范围。例如：定位“密码”标签下方且位于提交按钮左侧的输入框。

WebElement submitBtn = driver.findElement(By.tagName("button"));
WebElement passwordLabel = driver.findElement(By.xpath("//label[text()='密码']"));
WebElement input = driver.findElement(withTagName("input")
                             .below(passwordLabel)
                             .toLeftOf(submitBtn));

链式调用中的多个条件以 AND 方式组合，目标元素必须同时满足所有位置关系。

Python 实现示例

Python 语法同样简洁。需先从 selenium.webdriver.support.relative_locator 导入 with_tag_name 或使用 RelativeBy。

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.relative_locator import with_tag_name

driver = webdriver.Chrome()
driver.get("https://example.com")

email_label = driver.find_element(By.XPATH, "//label[text()='邮箱']")
email_input = driver.find_element(with_tag_name("input").to_right_of(email_label))

password_input = driver.find_element(By.ID, "password")
email_input_above = driver.find_element(with_tag_name("input").above(password_input))

# near 使用
btn = driver.find_element(By.TAG_NAME, "button")
tooltip = driver.find_element(with_tag_name("div").near(btn, 50))