Selenium Webdriver - Color Support

---

---

Selenium Webdriver can be used to detect the color of a web element on a web page using the Color class. Also, to detect the features like the color, background-color, and border we would use the getCssValue() method.

To get the color, background-color, border-color and color of an element, we would need to pass them as a parameter to the getCssValue() method. It would return the value in rgba format. We would take the help of the Color class to convert rgba value to Hex.

Let us now discuss the identification of an element on a webpage shown in the below image. First, we would need to right click on the webpage, and then click on the Inspect button in the Chrome browser. Then, the corresponding HTML code for the whole page would be visible. For investigating a single element on a page, we would need to click on the left upward arrow, available to the top of the visible HTML code as highlighted below.

Once, we had clicked and pointed the arrow to the element (highlighted element) its HTML code would be visible. Along with that, the color, and background-color information would be visible under the Styles tab.

Let us take an example of the button Login appearing on the above page. In the Style tab, we found its color value as #fff, background-color as #0d6efd and border-color as #0d6efd.

Let us get the background color, and color of that element using the getCssValue() method.

Syntax

Syntax to get color and background-color −

WebDriver driver = new ChromeDriver();

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

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

Example

Code Implementation on ColorSupports.java class file.

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://www.tutorialspoint.com/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();
   }
}

Output

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

In the above example, we captured the color of the button in rgba format and received the message in the console - rgba code for color: rgba(255, 255, 255, 1). Then converted the color in rgba format to Hex format and obtained the message in the console - Hex format for Element Color is: #ffffff. Next we captured the background color of the same button in rgba format and received the message in the console - rgba code for background-color: rgba(13, 110, 253, 1). Then converted the background color in rgba format to Hex format and obtained the message in the console - Hex format Element Background-Color is: #0d6efd.

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

Let us take another example of the same Login button discussed previously, and get the border color using the getCssValue() method.

Syntax

Syntax to get border color −

WebDriver driver = new ChromeDriver();

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

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

Example

Code Implementation on BorderColorSupports.java class file.

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://www.tutorialspoint.com/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();
   }
}

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>

Output

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

Process finished with exit code 0

In the above example, we captured the border color of the button in rgba format and received the message in the console - rgba code for color: rgba(13, 110, 253). Then converted the color in rgba format to Hex format and obtained the message in the console - Hex format for element Border-Color is: #0d6efd.

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

Thus, in this tutorial, we had discussed how to have Color support using the Selenium Webdriver.