Selenium 简明教程

Selenium WebDriver - Relative Locators

除了用于识别网页上元素的普通定位器外，Selenium 4 还提供了使用相对定位器（也称为友好定位器）的选项。

What are Relative Locators in Selenium?

相对定位器用于识别没有足够信息在 Web 应用程序上唯一定位到的元素。为了检测到它，我们可以相对于另一个元素（可以通过其属性唯一定位到）在空间上识别它。

请注意，在使用相对定位器时，我们需要添加 import 语句：

import org.openqa.selenium.support.locators.RelativeLocator

此外，如果使用了 Maven 项目，则 pom.xml 中应该添加版本大于 4 的 Selenium 依赖项。这是因为相对定位器仅从 Selenium 4.0 开始支持。

Selenium Webdriver 中使用的相对定位器如下：

above()
below()
near()
toLeftOf()
toRightOf()

Example - above() Relative Locator

让我们来看一下下面页面中突出显示的元素示例，其中我们将使用 above 定位器识别链接 login 上方显示的文本 Practice Form 。

Syntax

WebDriver driver = new ChromeDriver();

// identify element the first element
WebElement l = driver.findElement(By.xpath("value of xpath locator"));

// identify element above the first link element
WebElement e = driver.findElement(RelativeLocator.with(By.tagName("a")).above(l));

代码实现

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.locators.RelativeLocator;
import java.util.concurrent.TimeUnit;

public class RelativeLocatorsAbove {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // launching a browser and navigate to a URL
      driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");

      // identify first element
      WebElement l = driver.findElement(By.xpath("//*[@id='collapseTwo']/div/ul/li[2]/a"));

      // identify element above the first element
      WebElement e = driver.findElement(RelativeLocator.with(By.tagName("a")).above(l));

      // Getting element text value the above identified element
      System.out.println("Getting element text: " + e.getText());

      // Closing browser
      driver.quit();
   }
}

在 pom.xml 文件中添加的依赖项：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
   http://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>

   <groupId>org.example</groupId>
   <artifactId>SeleniumJava</artifactId>
   <version>1.0-SNAPSHOT</version>

   <properties>
      <maven.compiler.source>16</maven.compiler.source>
      <maven.compiler.target>16</maven.compiler.target>
      <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
   </properties>

   <!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java -->
   <dependencies>
      <dependency>
         <groupId>org.seleniumhq.selenium</groupId>
         <artifactId>selenium-java</artifactId>
         <version>4.11.0</version>
      </dependency>
   </dependencies>
</project>

Getting element text: Practice Form

Process finished with exit code 0

在上面的示例中，我们使用上述相对定位器识别出了元素，并使用控制台中的消息 Getting element text: Practice Form 获取了其文本。

最后，收到了消息 Process finished with exit code 0 ，表示代码成功执行。

Example - below() Relative Locator

让我们来看一下下面页面中突出显示的元素的另一个示例，其中我们将使用 below 定位器识别链接 Register 下方显示的链接 Login 。

Syntax

WebDriver driver = new ChromeDriver();

// identify element the first element
WebElement l = driver.findElement(By.xpath("value of xpath locator"));

// identify element below the first link element
WebElement e = driver.
   findElement(RelativeLocator.with(By.tagName("a")).below(l));

代码实现

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.locators.RelativeLocator;
import java.util.concurrent.TimeUnit;

public class RelativeLocatorsBelow {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // launching a browser and navigate to a URL
      driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");

      // identify first element
      WebElement l = driver.findElement(By.xpath("//*[@id='collapseTwo']/div/ul/li[2]/a"));

      // identify element below the first element
      WebElement e = driver.findElement(RelativeLocator.with(By.tagName("a")).below(l));

      // Getting element text value the below identified element
      System.out.println("Getting element text: " + e.getText());

      // Closing browser
      driver.quit();
   }
}

Getting element text: Register

在上面的示例中，我们使用以下相对定位器识别出了元素，并使用控制台中的消息 Getting element text: Register 获取了其文本。

Example - toLeftOf() Relative Locator

让我们来看一下下面页面中突出显示的元素的另一个示例，其中我们将使用 toLeftOf 定位器识别输入框左侧显示的标签文本 Name 。

Syntax

WebDriver driver = new ChromeDriver();

// identify element the first element
 WebElement l = driver.findElement(By.xpath("value of xpath locator"));

// identify element to left of the first element
WebElement e = driver.
   findElement(RelativeLocator.with(By.tagName("a")).toLeftOf(l));

代码实现

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.locators.RelativeLocator;
import java.util.concurrent.TimeUnit;

public class RelativeLocatorsLeft {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // launching a browser and navigate to a URL
      driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");

      // identify first element
      WebElement l = driver.findElement(By.xpath("//*[@id='name']"));

      // identify element left of the first element
      WebElement e = driver.findElement(RelativeLocator.with(By.tagName("label")).toLeftOf(l));

      // Getting element text to left of identified element
      System.out.println("Getting element text: " + e.getText());

      // Closing browser
      driver.quit();
   }
}

Getting element text: Name:

在上面的示例中，我们使用 toLeftOf 相对定位器识别出了元素，并使用控制台中的消息 Getting element text: Name: 获取了其文本。

Example - toRightOf() Relative Locator

我们以以下页面中高亮元素的另一个示例，我们将在 toRightOf 定位器的帮助下识别出现在页面徽标右侧的文本 Selenium - Automation Practice Form 。

Syntax

WebDriver driver = new ChromeDriver();

// identify element the first element
WebElement l = driver.findElement(By.xpath("value of xpath locator"));

// identify element to right of the first element
WebElement e = driver.
   findElement(RelativeLocator.with(By.tagName("h1")).toRightOf(l));

代码实现

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.locators.RelativeLocator;
import java.util.concurrent.TimeUnit;

public class RelativeLocatorsRight {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // launching a browser and navigate to a URL
      driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");

      // identify first element
      WebElement l = driver.findElement(By.xpath("/html/body/div/header/div[1]/a"));

      // identify element right of the first element
      WebElement e = driver.findElement(RelativeLocator.with(By.tagName("h1")).toRightOf(l));

      // Getting element text to right of identified element
      System.out.println("Getting element text: " + e.getText());

      // Closing browser
      driver.quit();
   }
}

Getting element text: Selenium - Automation Practice Form

在上面的示例中，我们已借助 toRightOf 相对定位器识别了该元素，并使用控制台中的消息获取其文本 - Getting element text: Selenium - Automation Practice Form 。

Example - near() Relative Locator

我们以以下页面中高亮元素的另一个示例，我们将在 near 定位器的帮助下识别并选中出现在标签 Sports 附近的复选框。

Syntax

WebDriver driver = new ChromeDriver();

// identify element the first element
 WebElement l = driver.findElement(By.xpath("value of xpath locator"));

// identify element to near of the first element
WebElement e = driver.
   findElement(RelativeLocator.with(By.tagName("input")).near(l));

代码实现

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.locators.RelativeLocator;
import java.util.concurrent.TimeUnit;

public class RelativeLocatorsNear {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // launching a browser and navigate to a URL
      driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");

      // identify first element
      WebElement l = driver.findElement(By.xpath("//*[@id='practiceForm']/div[7]/div/div/div[1]/label"));

      // identify element near the first element
      WebElement e = driver.findElement(RelativeLocator.with(By.tagName("input")).near(l));

      // check checkbox
      e.click();

      // verify is selected
      System.out.println("Verify if selected: " + e.isSelected());

      // Closing browser
      driver.quit();
   }
}

Verify if selected: true

在上面的示例中，我们已借助 near 相对定位器识别了该复选框，并使用控制台中的消息验证了该复选框是否被选中 - Verify if selected: true 。

Example - Chaining of Relative Locator

我们以以下页面中高亮元素的另一个示例，我们将在 chaining 定位器 above 和 toRightOf 的帮助下，在出现在文本标签 Email: 的上方并在文本标签 Name: 右侧的输入框中输入文本 Selenium 。

Syntax

WebDriver driver = new ChromeDriver();

// identify element the first element
WebElement l = driver.findElement(By.xpath("value of xpath locator"));

// identify element the second element
WebElement m = driver.findElement(By.xpath("value of xpath locator"));

// identify element by chaining relative locators
// identify element by chaining elements
WebElement e = driver.findElement(RelativeLocator.with
   (By.tagName("input")).above(l).toRightOf(m));

// enter some text
e.sendKeys("Selenium");

代码实现

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.locators.RelativeLocator;
import java.util.concurrent.TimeUnit;

public class RelativeLocatorsChain {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // launching a browser and navigate to a URL
      driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");

      // identify first element
      WebElement l = driver.findElement(By.xpath("//*[@id='practiceForm']/div[1]/label"));

      // identify second element
      WebElement s = driver.findElement(By.xpath("//*[@id='practiceForm']/div[2]/label"));

      // identify element by chaining elements
      WebElement e = driver.findElement(RelativeLocator.with
         (By.tagName("input")).above(s).toRightOf(l));

      // input text
      e.sendKeys("Selenium");

      // verify is selected
      System.out.println("Value entered is: " + e.getAttribute("value"));

      // Closing browser
      driver.quit();
   }
}

Value entered is: Selenium

在上面的示例中，我们已借助相对定位器链识别了该元素，并使用控制台中的消息获取了输入的文本 - Value entered is: Selenium 。

Conclusion

这结束了我们在 Selenium WebDriver 相对定位器教程中的全面讲解。我们首先描述了 Selenium 中有哪些相对定位器，然后举了一些示例来说明如何在 Selenium Webdriver 中使用相对定位器。这使你对 Selenium WebDriver 相对定位器有了深入的了解。明智的做法是不断练习你所学的内容，并探索与 Selenium 相关的其他内容，以加深你的理解并拓展你的视野。