Selenium WebDriver - 顏色支援

Selenium WebDriver可以使用Color類檢測網頁上web元素的顏色。此外，要檢測顏色、背景顏色和邊框等特性，可以使用getCssValue()方法。

要獲取元素的顏色、背景顏色、邊框顏色，需要將它們作為引數傳遞給getCssValue()方法。它將返回 rgba 格式的值。我們將藉助Color類將rgba值轉換為十六進位制。

識別網頁上的元素

啟動Chrome瀏覽器，並在該瀏覽器上開啟一個應用程式。右鍵單擊網頁，然後單擊“檢查”按鈕。之後，將顯示該頁面的整個HTML程式碼。要識別頁面上的元素，請單擊HTML程式碼頂部左側的向上箭頭，如下所示。

單擊並指向元素（突出顯示的元素）後，其HTML程式碼將出現。此外，顏色和背景顏色資訊將在樣式選項卡中提供。

識別元素的背景和顏色

讓我們以上面頁面上顯示的登入按鈕為例。在“樣式”選項卡中，我們發現其顏色值為#fff，背景顏色為#0d6efd，邊框顏色為#0d6efd。讓我們使用getCssValue()方法獲取該元素的背景顏色和顏色。

示例

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

public class ColorSupports {
   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 open a URL
      driver.get("https://tutorialspoint.tw/selenium/practice/selenium_automation_practice.php");

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

      // get element color in rgba format
      String s = l.getCssValue("color");
      System.out.println("rgba code for color: " + s);

      // convert rgba to hex using Color class
      String c = Color.fromString(s).asHex();
      System.out.println("Hex format for Element Color is: " + c);

      // get element background color in rgba format
      String b = l.getCssValue("background-color");
      System.out.println("rgba code for background-color: " + b);

      // convert rgba to hex using Color class
      String g = Color.fromString(b).asHex();
      System.out.println("Hex format Element Background-Color is: " + g);

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

輸出

rgba code for color: rgba(255, 255, 255, 1)
Hex format for Element Color is: #ffffff
rgba code for background-color: rgba(13, 110, 253, 1)
Hex format Element Background-Color is: #0d6efd

Process finished with exit code 0

在上面的例子中，我們以 rgba 格式捕獲了按鈕的顏色，並在控制檯中收到訊息 - 顏色的 rgba 程式碼：rgba(255, 255, 255, 1)。然後將 rgba 格式的顏色轉換為十六進位制格式，並在控制檯中獲得訊息 - 元素顏色的十六進位制格式為：#ffffff。

接下來，我們以 rgba 格式捕獲了同一個按鈕的背景顏色，並在控制檯中收到訊息 - 背景顏色的 rgba 程式碼：rgba(13, 110, 253, 1)。然後將 rgba 格式的背景顏色轉換為十六進位制格式，並在控制檯中獲得訊息 - 元素背景顏色的十六進位制格式為：#0d6efd。

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

識別元素的邊框顏色

讓我們再以前面討論的同一個登入按鈕為例，並使用getCssValue()方法獲取邊框顏色。

示例

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

public class BorderColorSupports {
   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 open a URL
      driver.get("https://tutorialspoint.tw/selenium/practice/selenium_automation_practice.php");

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

      // get element border color in rgba format
      String s = l.getCssValue("border-color");
      System.out.println("rgba code for border color: " + s);

      // convert rgba to hex using Color class
      String g = Color.fromString(s).asHex();
      System.out.println("Hex format for element Border-Color is: " + g);

      // 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>

輸出

rgba code for border color: rgb(13, 110, 253)
Hex format for element Border-Color is: #0d6efd

在上面的例子中，我們以 rgba 格式捕獲了按鈕的邊框顏色，並在控制檯中收到訊息 - 顏色的 rgba 程式碼：rgba(13, 110, 253)。然後將 rgba 格式的顏色轉換為十六進位制格式，並在控制檯中獲得訊息 - 元素邊框顏色的十六進位制格式為：#0d6efd。

結論

本教程對 Selenium WebDriver 顏色支援進行了全面講解。我們首先介紹瞭如何在網頁上識別元素，然後透過示例演示瞭如何使用 Selenium WebDriver 識別元素的邊框顏色、背景顏色和顏色。這使您能夠深入瞭解 Selenium WebDriver 顏色支援。最好繼續練習您所學到的知識，並探索與 Selenium 相關的其他內容，以加深您的理解並拓寬您的視野。

列印頁面