• Selenium Video Tutorials

Selenium WebDriver - WebElement 命令

上一頁
下一頁

Selenium Webdriver 可用於提取有關網頁上特定元素的多種資訊。例如，我們可以驗證元素在網頁上是否存在/不存在，已啟用/已停用或已選中/未選中。

Selenium Webdriver 中的基本 WebElement 命令

  • 要驗證元素是否存在於網頁上，我們可以藉助 **isDisplayed()** 方法。如果元素存在，isDisplayed() 將返回 true，否則返回 false。
  • 要驗證元素是否在網頁上被選中，我們可以藉助 **isSelected()** 方法。如果元素被選中，isSelected() 將返回 true，否則返回 false。
  • 要驗證元素是否在網頁上已啟用，我們可以藉助 **isEnabled()** 方法。如果元素已啟用，isEnabled() 將返回 true，否則返回 false。
  • 要獲取元素的標籤名稱，我們可以藉助 **getTagName()** 方法。
  • 要獲取元素的 x 和 y 座標，我們可以藉助 **getRect()** 方法。
  • 要獲取元素的背景顏色或顏色，我們可以藉助 **getCssValue()** 方法。
  • 要獲取與 DOM 關聯的元素的執行時值，我們可以藉助 **getAttribute()** 方法並將值作為引數傳遞給該方法。
  • 要獲取元素的文字，我們可以藉助 **getText()** 方法。

識別 HTML 中的單選按鈕

右鍵單擊網頁，然後單擊 Chrome 瀏覽器中的“檢查”按鈕。要檢查頁面上的單選按鈕，請單擊位於可見 HTML 程式碼頂部的左上方箭頭，如下所示。

Selenium WebElement 1

單擊並將箭頭指向單選按鈕（如下圖所示）後，可以看到其 HTML 程式碼，其中反映了輸入標籤名稱和 type 屬性的值為 radio。

Selenium WebElement 2

示例 1

讓我們以以上頁面為例，我們將使用 click() 方法單擊其中一個單選按鈕。然後，我們將使用上述方法驗證單選按鈕是否存在、已啟用和已選中。

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 java.util.concurrent.TimeUnit;

public class ValidatingRadioButtons {
   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);

      // Opening the webpage where we will click radio button
      driver.get("https://tutorialspoint.tw/selenium/practice/radio-button.php");

      // identify radio button then click
      WebElement radiobtn = driver.findElement
         (By.xpath("/html/body/main/div/div/div[2]/form/div[1]/input"));
      radiobtn.click();

      // verify if radio button is selected
      boolean result = radiobtn.isSelected();
      System.out.println("Checking if a radio button is selected: " + result);

      // verify if radio button is displayed
      boolean result1 = radiobtn.isDisplayed();
      System.out.println("Checking if a radio button is displayed: " + result1);

      // verify if radio button is enabled
      boolean result2 = radiobtn.isEnabled();
      System.out.println("Checking if a radio button is enabled: " + result2);

      // identify another radio button
      WebElement radiobtn1 = driver.
         findElement(By.xpath("/html/body/main/div/div/div[2]/form/div[5]/input"));

      // verify if radio button is disabled
      boolean result3 = radiobtn1.isEnabled();
      System.out.println("Checking if the other radio button is disabled: " + result3);

      // verify if radio button is unselected
      boolean result4 = radiobtn1.isEnabled();
      System.out.println("Checking if the other radio button is unselected: " + result4);

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

輸出

Checking if a radio button is selected: true
Checking if a radio button is displayed: true
Checking if a radio button is enabled: true
Checking if the other radio button is disabled: false
Checking if the other radio button is unselected: false

Process finished with exit code 0

在上面的示例中，我們首先單擊了一個單選按鈕，然後在控制檯中使用訊息驗證該單選按鈕是否存在、是否已選中和是否已啟用 - **正在檢查單選按鈕是否已選中：true，正在檢查單選按鈕是否已顯示：true，正在檢查單選按鈕是否已啟用：true**。

然後，我們驗證了另一個單選按鈕是否已停用和未選中，控制檯中的訊息為 - **正在檢查另一個單選按鈕是否已停用：false，以及正在檢查另一個單選按鈕是否未選中：false**。

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

示例 2

我們可以使用 **getTagName()** 方法獲取單選按鈕的標籤名稱。

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 java.util.concurrent.TimeUnit;

public class RadioButtonTagNames {
   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);

      // Opening the webpage where we will click radio button
      driver.get("https://tutorialspoint.tw/selenium/practice/radio-button.php");

      // identify radio button then click
      WebElement radiobtn = driver.findElement
         (By.xpath("/html/body/main/div/div/div[2]/form/div[1]/input"));

      String text = radiobtn.getTagName();
      System.out.println("Get the radio button tagname: " + text);

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

輸出

Get the radio button tagname: input

Process finished with exit code 0

在上面的示例中，我們在控制檯中獲得了單選按鈕的標籤名稱，訊息為 - **獲取單選按鈕標籤名稱：input**。

示例 3

讓我們在下面的圖片中再舉一個例子，我們將使用 **getRect()** 方法獲取頁面上文字 **Selenium - 自動化實踐表單** 的高度、寬度、x 和 y 座標。

Selenium WebElement 3

程式碼實現

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.Rectangle;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class ElementPositions {
   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);

      // Opening the webpage
      driver.get("https://tutorialspoint.tw/selenium/practice/radio-button.php");

      // Identify the element with xpath locator
      WebElement e = driver.findElement(By.xpath("/html/body/div/header/div[2]/h1"));

      Rectangle res = e.getRect();
      
      // Getting height, width, x, and y coordinates of element
      System.out.println("Getting height: " + res.getHeight());
      System.out.println("Getting width: " + res.getWidth());
      System.out.println("Getting x-cordinates: " + res.getX());
      System.out.println("Getting y-cordinates: " + res.getY());
      
      // Closing browser
      driver.quit();
   }
}

輸出

Getting height: 29
Getting width: 395
Getting x-cordinates: 453
Getting y-cordinates: 18

Process finished with exit code 0

在上面的示例中，我們在控制檯中獲得了文字的高度、寬度、x 和 y 座標，訊息為 - **獲取高度：29，獲取寬度：395，獲取 x 座標：453，以及獲取 y 座標：18**。

示例 4

讓我們在下面的圖片中再舉一個例子，我們將獲取突出顯示的元素 **登入**（在“樣式”部分中顯示）的背景顏色。我們將藉助 **getCssValue()** 方法並將 background-color 作為引數傳遞給該方法。

Selenium WebElement 4

程式碼實現

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 java.util.concurrent.TimeUnit;

public class ElementsCSSProperty {
   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);

      // Opening the webpage
      driver.get("https://tutorialspoint.tw/selenium/practice/selenium_automation_practice.php");

      // Identify the element with xpath locator
      WebElement e = driver.findElement(By.xpath("//*[@id='practiceForm']/div[11]/input"));

      // Getting background color of the element
      System.out.println ("Getting background color of element: " + e.getCssValue("background-color"));

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

輸出

Getting background color of element: rgba(13, 110, 253, 1)

Process finished with exit code 0

在上面的示例中，我們以 rgb 格式在控制檯中獲得了頁面上元素的背景，訊息為 - **獲取元素的背景顏色：rgba(13, 110, 253, 1)**。

示例 5

讓我們以以下頁面為例，我們將首先使用 sendKeys() 方法在輸入框中輸入文字 **Selenium**。然後，我們將使用 **getAttribute()** 方法獲取與 DOM 關聯的元素的執行時值，並將值作為引數傳遞。

Selenium WebElement 5

程式碼實現

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 java.util.concurrent.TimeUnit;

public class InputBoxs {
   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);

      // Opening the webpage
      driver.get("https://tutorialspoint.tw/selenium/practice/selenium_automation_practice.php");

      // Identify the element with xpath locator
      WebElement em = driver.findElement
         (By.xpath("//*[@id='name']"));
         
      // enter text in input box
      em.sendKeys("Selenium");

      // Get the value entered
      String t = em.getAttribute("value");
      System.out.println("Text entered: " + t);

      // clear the text entered
      em.clear();

      // Get no text after clearing text
      String t1 = e.getAttribute("value");
      System.out.println("Get text after clearing: " + t1);

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

輸出

Entered text is: Selenium
Get text after clearing: 

Process finished with exit code 0

在上例中，我們首先在輸入框中輸入文字Selenium，並在控制檯中檢索輸入的值，訊息為：輸入文字：Selenium。然後清除輸入的值，輸入框中沒有值。因此，我們還在控制檯中收到了訊息：清除後獲取文字：。

示例 6

讓我們來看一下下面頁面的例子，我們將使用getText()方法獲取突出顯示元素的文字 - Selenium - 自動化實踐表單。

Selenium WebElement 6

程式碼實現

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 java.util.concurrent.TimeUnit;

public class ElementsText {
   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);

      // Opening the webpage
      driver.get("https://tutorialspoint.tw/selenium/practice/selenium_automation_practice.php");

      // Identify the element with xpath locator
      WebElement e = driver.findElement
         (By.xpath("/html/body/div/header/div[2]/h1"));

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

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

輸出

Getting element text: Selenium - Automation Practice Form

Process finished with exit code 0

在上例中，我們在控制檯中獲得了元素的文字，訊息為 - 獲取元素文字：Selenium - 自動化實踐表單。

結論

本教程對Selenium WebDriver WebElement命令進行了全面的講解。我們從描述HTML中如何識別單選按鈕開始，講解了Selenium Webdriver中的基本Web元素命令，並透過示例說明了如何在Selenium Webdriver中使用它們。這使您能夠深入瞭解WebDriver WebElement命令。最好繼續練習您學到的知識，並探索與Selenium相關的其他知識，以加深您的理解並拓寬您的視野。

列印頁面
上一頁
下一頁
廣告
© . All rights reserved.