Selenium 简明教程

Selenium WebDriver - Relative Locators

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

Selenium 4 gives the options of using the relative locators (also known as friendly locators) apart from the normal locators used for the purpose of identifying elements on a web page.

What are Relative Locators in Selenium?

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

Relative locators are used to identify an element which does not have enough information to locate it uniquely on a web application. For detecting it, we can identify it spatially with respect to another element (which can be located uniquely with its properties).

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

Please note that, while using the Relative locators, we would need to add the import statement −

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

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

Also, in case if a Maven project is used, Selenium Dependencies for versions greater than four should be added in the pom.xml. This is because the relative locators are only supported from Selenium 4.0 onwards.

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

The relative locators used in Selenium Webdriver are listed below −

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

Example - above() Relative Locator

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

Let us take an example of the highlighted elements in the below page, where we would identify the text Practice Form which is appearing above the link login with the help of the above locator.

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));

代码实现

Code Implementation

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 文件中添加的依赖项：

Dependencies added in pom.xml file −

<?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 获取了其文本。

In the above example, we had identified the element with the help of the above relative locator and obtained its text with the message in the console - Getting element text: Practice Form.

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

Finally, the message Process finished with exit code 0 was received, signifying successful execution of the code.

Example - below() Relative Locator

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

Let us take another example of the highlighted elements in the below page, where we would identify the link Login which is appearing below the link Register with the help of the below locator.

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));

代码实现

Code Implementation

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 获取了其文本。

In the above example, we had identified the element with the help of the below relative locator and obtained its text with the message in the console - Getting element text: Register.

Example - toLeftOf() Relative Locator

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

Let us take another example of the highlighted elements in the below page, where we would identify the label text Name which is appearing to the left of an input box with the help of the toLeftOf locator.

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));

代码实现

Code Implementation

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: 获取了其文本。

In the above example, we had identified the element with the help of the toLeftOf relative locator and obtained its text with the message in the console - Getting element text: Name:.

Example - toRightOf() Relative Locator

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

Let us take another example of the highlighted elements in the below page, where we would identify the text Selenium - Automation Practice Form which is appearing to the right of the page logo with the help of the toRightOf locator.

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));

代码实现

Code Implementation

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 。

In the above example, we had identified the element with the help of the toRightOf relative locator and obtained its text with the message in the console - Getting element text: Selenium - Automation Practice Form.

Example - near() Relative Locator

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

Let us take another example of the highlighted elements in the below page, where we would identify and check the checkbox which is appearing near the label Sports with the help of the near locator.

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));

代码实现

Code Implementation

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 。

In the above example, we had identified the checkbox with the help of the near relative locator and verified if the checkbox is checked with the message in the console - Verify if selected: true.

Example - Chaining of Relative Locator

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

Let us take another example of the highlighted elements in the below page, where we would enter the text Selenium in the input box which is appearing above the label Email: and right of the label Name: with the help of the chaining locators above and toRightOf.

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");

代码实现

Code Implementation

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 。

In the above example, we had identified the element with the help of the chain of relative locators and obtained the text entered with the message in the console - Value entered is: Selenium.

Conclusion

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

This concludes our comprehensive take on the tutorial on Selenium WebDriver Relative Locators. We’ve started with describing what are relative locators in Selenium, and examples to illustrate how to use relative locators in Selenium Webdriver. This equips you with in-depth knowledge of the Selenium WebDriver Relative Locators. It is wise to keep practicing what you’ve learned and exploring others relevant to Selenium to deepen your understanding and expand your horizons.