Text color in Selenium

vibssingh

Retrieve Border Color with Selenium in Java

HOME

Borders often serve as important visual cues, such as indicating focus states, hover effects, or validation results (e.g., turning red for an error). Borders can change dynamically based on interactions (e.g., clicking a button will change its border color). Ensuring these responses occur as expected is key in testing interactive web elements.

To find the border color of web element in Selenium (Java), use the getCssValue method. We will use the `getCssValue` to extract properties like `border-color`.

org.openqa.selenium.support.Color.

In the below example, we want to find the border color of the highlighted text.

Below is the Selenium program that find the border color of a web element.

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.chrome.ChromeOptions;
import org.openqa.selenium.support.Color;

import java.time.Duration;

public class Border_Example {

    public static void main(String args[]) {

        ChromeOptions chromeOptions = new ChromeOptions();
        WebDriver driver = new ChromeDriver(chromeOptions);
        driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
        driver.manage().window().maximize();

        try {
            driver.get("https://www.tutorialspoint.com/selenium/practice/login.php");

            // identify the element
            WebElement nameBox = driver.findElement(By.xpath("//*[@id='email']"));

            // get element border color in rgb format
            String nameBoxBorderColor = nameBox.getCssValue("border-color");
            System.out.println("RGB code for border color: " + nameBoxBorderColor);

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

            // convert rgb to rgba using Color class
            String rgbaColor = Color.fromString(nameBoxBorderColor).asRgba();
            System.out.println("RGBA format for element Border-Color is: " + rgbaColor);

            // Retrieve the border color value for each side
            String borderTopColor = nameBox.getCssValue("border-top-color");
            String borderRightColor = nameBox.getCssValue("border-right-color");
            String borderBottomColor = nameBox.getCssValue("border-bottom-color");
            String borderLeftColor = nameBox.getCssValue("border-left-color");

            // Print the retrieved border colors
            System.out.println("Border Top Color: " + borderTopColor);
            System.out.println("Border Right Color: " + borderRightColor);
            System.out.println("Border Bottom Color: " + borderBottomColor);
            System.out.println("Border Left Color: " + borderLeftColor);

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

The output of the above program is

Explanation:

1. Set Up Chrome Options and WebDriver

ChromeOptions is created. A ChromeDriver object driver is created to control the Chrome browser. implicitlyWait is set to 10 seconds to wait for elements to be present before throwing an exception. The browser window is maximized for better visibility during the test.

ChromeOptions chromeOptions = new ChromeOptions();
WebDriver driver = new ChromeDriver(chromeOptions);
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
driver.manage().window().maximize();

2. Navigate to the Webpage

The get() method of driver is used to navigate to the specified URL.

https://www.tutorialspoint.com/selenium/practice/login.php

3. Find Element

The element is located by the specified id with “email”.

WebElement nameBox = driver.findElement(By.xpath("//*[@id='email']"));

4. Retrieve CSS Property

The getCssValue method retrieves the border color of the element in RGB format.

 // get element border color in rgb format
String nameBoxBorderColor = nameBox.getCssValue("border-color");
System.out.println("RGB code for border color: " + nameBoxBorderColor);

5. Convert Color Formats

RGB to Hex: Color.fromString(rgbaColor).asHex() converts the RGB color to hexadecimal format.
RGB to RGBA: Color.fromString(rgbaColor).asRgba() converts the RGB color to RGBA format for additional representation.

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

// convert rgb to rgba using Color class
String rgbaColor = Color.fromString(nameBoxBorderColor).asRgba();
System.out.println("RGBA format for element Border-Color is: " + rgbaColor);

6. Retrieve border color of each side

Use getCssValue to retrieve each part of the border color to determine the color on each side.

String borderTopColor = nameBox.getCssValue("border-top-color");
String borderRightColor = nameBox.getCssValue("border-right-color");
String borderBottomColor = nameBox.getCssValue("border-bottom-color");
String borderLeftColor = nameBox.getCssValue("border-left-color");

7.  Clean Up

The finally block ensures that the browser is closed irrespective of whether the test passes or fails, using driver.quit() to close all browser windows and end the session.

// Close the browser
driver.quit();

Summary:

  1. Initialize a WebDriver and direct it to interact with your target webpage.
  2. Identify the desired web element using suitable locators.
  3. Retrieve and print out the CSS values for border color using getCssValue with attribute “border-color”.
  4. Use getCssValue to retrieve each part of the border color. This helps determine the color on each side. Use attributes “border-right-color”, “border-bottom-color”, “border-top-color” and “border-left-color”.

That’s it! Congratulations on making it through this tutorial and hope you found it useful! Happy Learning!!

vibssingh

How to Retrieve Text and Background Colors with Selenium in Java

Last Updated On

HOME

In the web development, user experience plays a crucial part. Testers should ensure that style guides are followed across different pages. They should also be applied consistently to components. Verifying that the colors on a web page match design specifications helps maintain brand consistency. It ensures that the user interface looks as intended. There are chances that colors render differently across browsers and devices. Testing across different environments ensures that no matter where the website is accessed, the experience remains consistent.

To find the text color and background color of a web element in Selenium (Java), use the “getCssValue” method. Use “color” for the text color. Use “background-color” for the background color. You can convert the result to HEX using

org.openqa.selenium.support.Color.

Find Text color

In the below example, we want to find the text color of the highlighted text.

Below is the Selenium program that find the text color and match it with the expected color.

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.chrome.ChromeOptions;
import org.openqa.selenium.support.Color;
import java.io.IOException;
import java.time.Duration;

public class Color_Example {

    public static void main(String args[]) throws IOException {

        String expectedColor = "#ffffff"; // White color in HEX

        ChromeOptions chromeOptions = new ChromeOptions();
        WebDriver driver = new ChromeDriver(chromeOptions);
        driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
        driver.manage().window().maximize();

        try {
            // Navigate to Url
            driver.get("https://www.selenium.dev/");

            WebElement element = driver.findElement(By.id("dev-partners"));

            // Retrieve the font color CSS property as RGBA
            String rgbaColor = element.getCssValue("color");
            System.out.println("rgbaColor : " + rgbaColor);

            // Convert the RGBA color to hex using the Color class
            String hexColor = Color.fromString(rgbaColor).asHex();
            System.out.println("hexColor : " + hexColor);

            // Convert the RGBA color to RGB using the Color class
            String rgbColor = Color.fromString(rgbaColor).asRgb();
            System.out.println("rgbColor : " + rgbColor);

            // Verify the color (example: verifying against expected #ffffff color)
            if (hexColor.equals(expectedColor)) {
                System.out.println("Hex color is as expected.");
            } else {
                System.out.println("Hex color is not as expected. Found: " + hexColor);
            }

        } finally {
            // Close the browser
            driver.quit();
        }
    }
}

The output of the above program is

Explanation:

1.Define Expected Color

Variable expectedColor is defined to hold the expected hexadecimal color value (`#ffffff`, representing white).

 String expectedColor = "#ffffff"; // White color in HEX

2. Set Up Chrome Options and WebDriver

ChromeOptions is created. A ChromeDriver object driver is created to control the Chrome browser. implicitlyWait is set to 10 seconds to wait for elements to be present before throwing an exception. The browser window is maximized for better visibility during the test.

ChromeOptions chromeOptions = new ChromeOptions();
WebDriver driver = new ChromeDriver(chromeOptions);
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
driver.manage().window().maximize();

3. Navigate to a Webpage

The get() method of driver is used to navigate to the specified URL.

driver.get("https://www.selenium.dev/");

4. Find Element and Retrieve CSS Property

The element is located by the specified id, “dev-partners”. The getCssValue method retrieves the color of the element in RGBA format.

WebElement element = driver.findElement(By.id("dev-partners"));

// Retrieve the font color CSS property as RGBA
String rgbaColor = element.getCssValue("color");
System.out.println("rgbaColor : " + rgbaColor);

5. Convert Color Formats

RGBA to Hex: `Color.fromString(rgbaColor).asHex()` converts the RGBA color to hexadecimal format.
RGBA to RGB: `Color.fromString(rgbaColor).asRgb()` converts the RGBA color to RGB format for additional representation.

 // Convert the RGBA color to hex using the Color class
String hexColor = Color.fromString(rgbaColor).asHex();
System.out.println("hexColor : " + hexColor);

// Convert the RGBA color to RGB using the Color class
String rgbColor = Color.fromString(rgbaColor).asRgb();
System.out.println("rgbColor : " + rgbColor);

6. Verify Color

The hexadecimal color of the element is compared with expectedColor. If they match, it prints a confirmation message. If they do not match, it prints a message indicating the color did not match the expected value.

 // Verify the color (example: verifying against expected #ffffff color)
 if (hexColor.equals(expectedColor)) {
          System.out.println("Hex color is as expected.");
} else {
          System.out.println("Hex color is not as expected. Found: " + hexColor);
}

7.  Clean Up

The finally block ensures that the browser is closed irrespective of whether the test passes or fails, using driver.quit() to close all browser windows and end the session.

// Close the browser
driver.quit();

Find Background color

If we want to find the background color, then use the below command:

getCssValue("background-color")

Below is an example to find the background color.

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.chrome.ChromeOptions;
import org.openqa.selenium.support.Color;

import java.io.IOException;
import java.time.Duration;

public class BackgroundColor_Example {

    public static void main(String args[]) throws IOException {

        ChromeOptions chromeOptions = new ChromeOptions();
        WebDriver driver = new ChromeDriver(chromeOptions);
        driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
        driver.manage().window().maximize();

        try {
            // Navigate to Url
            driver.get("https://www.selenium.dev/");

            WebElement element = driver.findElement(By.id("dev-partners"));

            // Retrieve the background color CSS property
            String bgColorValue = element.getCssValue("background-color");
            System.out.println("color : " + bgColorValue);

            // Convert the background color to HEX format
            String hexColor = Color.fromString(bgColorValue).asHex();
            System.out.println("hexColor : " + hexColor);

            // Convert the background color to RGB format
            String rgbColor = Color.fromString(bgColorValue).asRgb();
            System.out.println("rgbColor : " + rgbColor);

            // Verify the color (example: verifying against expected #43b02a color)
            String expectedColor = "#43b02a"; // Green color in HEX
            if (hexColor.equals(expectedColor)) {
                System.out.println("Background color is as expected.");
            } else {
                System.out.println("Background color is not as expected. Found: " + hexColor);
            }
        } finally {
            // Close the browser
            driver.quit();
        }
    }
}

The output of the above program is

Summary:
1. Initialize a WebDriver and direct it to interact with your target webpage.
2. Identify the desired web element using suitable locators.
3. Retrieve and print out the CSS values for text and background colors using getCssValue.

More details about colors in Selenium can be found from this page – https://www.selenium.dev/documentation/webdriver/support_features/colors/

That’s it! Congratulations on making it through this tutorial and hope you found it useful! Happy Learning!!