• Selenium Video Tutorials

Selenium WebDriver - 相對定位器

上一頁
下一頁

Selenium 4 提供了使用相對定位器（也稱為友好定位器）的選項，除了用於識別網頁上元素的普通定位器之外。

Selenium 中的相對定位器是什麼？

相對定位器用於識別在 Web 應用程式中沒有足夠資訊唯一定位的元素。為了檢測它，我們可以根據另一個元素（可以使用其屬性唯一定位）的空間位置來識別它。

請注意，使用相對定位器時，需要新增匯入語句：

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

此外，如果使用 Maven 專案，則應在 pom.xml 中新增 4.0 以上版本的 Selenium 依賴項。這是因為相對定位器僅從 Selenium 4.0 開始受支援。

Selenium WebDriver 中使用的相對定位器如下所示：

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

示例 - above() 相對定位器

讓我們以下面頁面中突出顯示的元素為例，我們將使用 **above** 定位器來識別出現在 **login** 連結上方的文字 **Practice Form**。

Selenium Relative Locators 1

語法

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://tutorialspoint.tw/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

在上面的示例中，我們藉助 above 相對定位器識別了元素，並透過控制檯中的訊息獲得了其文字 - **獲取元素文字：Practice Form**。

最後，收到訊息 **程序已完成，退出程式碼為 0**，表示程式碼成功執行。

示例 - below() 相對定位器

讓我們再以下面頁面中突出顯示的元素為例，我們將使用 **below** 定位器來識別出現在 **Register** 連結下方的連結 **Login**。

Selenium Relative Locators 2

語法

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://tutorialspoint.tw/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

在上面的示例中，我們藉助 below 相對定位器識別了元素，並透過控制檯中的訊息獲得了其文字 - **獲取元素文字：Register**。

示例 - toLeftOf() 相對定位器

讓我們再以下面頁面中突出顯示的元素為例，我們將使用 **toLeftOf** 定位器來識別出現在輸入框左側的標籤文字 **Name**。

Selenium Relative Locators 3

語法

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://tutorialspoint.tw/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 相對定位器識別了元素，並透過控制檯中的訊息獲得了其文字 - **獲取元素文字：Name：**。

示例 - toRightOf() 相對定位器

讓我們再以下面頁面中突出顯示的元素為例，我們將使用 **toRightOf** 定位器來識別出現在頁面徽標右側的文字 **Selenium - Automation Practice Form**。

Selenium Relative Locators 4

語法

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://tutorialspoint.tw/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 相對定位器識別了元素，並透過控制檯中的訊息獲得了其文字 - **獲取元素文字：Selenium - Automation Practice Form**。

示例 - near() 相對定位器

讓我們再以下面頁面中突出顯示的元素為例，我們將使用 **near** 定位器來識別並選中出現在 **Sports** 標籤附近的複選框。

Selenium Relative Locators 5

語法

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://tutorialspoint.tw/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 相對定位器識別了複選框，並透過控制檯中的訊息驗證了該複選框是否已選中 - **驗證是否選中：true**。

示例 - 相對定位器的鏈式呼叫

讓我們再以下面頁面中突出顯示的元素為例，我們將使用 **above** 和 **toRightOf** 鏈式定位器，在出現在 **Email：** 標籤上方且 **Name：** 標籤右側的輸入框中輸入文字 **Selenium**。

Selenium Relative Locators 6

語法

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://tutorialspoint.tw/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

在上面的示例中，我們藉助相對定位器的鏈式呼叫識別了元素，並透過控制檯中的訊息獲得了輸入的文字 - **輸入的值是：Selenium**。

結論

本教程全面介紹了 Selenium WebDriver 相對定位器。我們從描述 Selenium 中的相對定位器開始，並透過示例說明如何在 Selenium WebDriver 中使用相對定位器。這使您能夠深入瞭解 Selenium WebDriver 相對定位器。明智的做法是繼續練習您所學的內容，並探索與 Selenium 相關的其他內容，以加深您的理解並拓寬您的視野。

列印頁面
廣告
© . All rights reserved.