How to verify the color and background color of a web element in Selenium?

Sometimes when we perform automated testing using the Selenium software, it becomes an important task to verify if the background colour of web elements is as expected, for this we can use the Selenium software and perform some test cases to verify the background colour and element colour.

There are many color formats such as hex and RGB etc. For this article, we will be using the hex colour code for running the test cases. We can use the Java programming language and give the selenium any website to run the test cases on, it will check whether the background colour is the same as the required background colour.

Following are the code and steps required for verifying the background colour of an element in selenium:

Step 1: Get Web Element ID:

The first step is to get the web element ID, for this simply visit the website where we are going to test and verify the colour, as you can see we have obtained the ID by using the developer features of the browser.

Step 2: Verify color of the web element:

Now we can check the color of the web element, for this we can simply use the following code:

// Demo.java

package tests;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class Demo {

    @Test
    public void sampleTest() {
        WebDriver driver = new ChromeDriver();
        driver.manage().window().maximize();
        driver.get("https://example.com/");

        String rgbaColor = driver.findElement(By.xpath("//div[@id='cssmenu']/ul"))
                                   .getCssValue("background-color");

        System.out.println(rgbaColor);
        driver.quit();
    }
}

Once we run the above code in selenium, we will get the following output in the test case output, it will tell us the color of the web element:

Step 3: Verify background color of web element:

Now once we have verified the color of the web element, we can also verify whether the background color of any web element matches with the color which is specified in the test case, for this we will be using the following code:

// Demo.java

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.Assert;
import org.testng.annotations.Test;
import org.openqa.selenium.support.Color;

public class Demo {

    @Test
    public void sampleTest() {
        WebDriver driver = new ChromeDriver();
        driver.manage().window().maximize();
        driver.get("https://example.com/");

        String expectedColor = "#333333";

        String rgbaActualColor = driver.findElement(By.xpath("//div[@id='cssmenu']/ul"))
                                       .getCssValue("background-color");

        Color color = Color.fromString(rgbaActualColor);
        String actualColor = color.asHex();

        Assert.assertEquals(actualColor, expectedColor);

        driver.quit();
    }
}

Once we run the above code, it will check whether the required web element has the expectedColor code or not, if it is not in the required color code then the test will be failed otherwise it will be passed, as you can see in the image below:

Conclusion

We can easily verify the background color as well as any other color which is present with unique HTML attribute by using the code mentioned above, we can also convert these color codes from one color code to another according to our inputs for verifying the test cases.