How to get element color with Selenium

Question

I want to check the color of an element in an html page. The color of this element is set with a javascript, look at the image

The element with div-id "Ab_banco_M1T1_switch" can assume 4 values, of course only one of them is displayed according to the value of "val" variable. The val variable is set from the server somehow, it seemes the script polls the server every X-seconds and update the value of val.

I've tried to get the color of the element as follow:

WebElement element = wait.until(ExpectedConditions.presenceOfElementLocated(By.id("Ab_banco_M1T1_switch")));

element.getAttribute("background")
element.getAttribute("style")
element.getAttribute("background-color") 
element.getCssValue("style")
element.getCssValue("color")

with no success, they return "null" or the backgorund-color of the page.

The only way to get the color is to use the Xpath /html/body/div/div[2]/div[2]/div[2]/div/div/div/div[3]/div (for red, if I want the green /html/body/div/div[2]/div[2]/div[2]/div/div/div/div[2]/div)

But it is not what I want. Indeed, the Xpath localizes the element, but it doesn't tell me if the color displayed is red or another one, I can know it only by looking at the web page.

In other words, I would like to access the current displayed color as Firebug does, look at the panel on right side, you can see that element.style ->background-Color = red.

When I invoke element,getCssCValue("background-color") I get the backgorund-color of #body_right_div.

Thank you in advance.

Answer 1

try this, worked perfect for me:

import org.openqa.selenium.support.Color;

String color = driver.findElement(By.xpath("xpath_value")).getCssValue("color");
System.out.println(color);
String hex = Color.fromString(color).asHex();
System.out.println(hex);

So you can get color using getCssValue("color"); and getCssValue("background-color");. However, that would be in RGB, so you need to convert to hex. With hex code you can then compare the value and print it out so that you can see what you are getting after each getCssValue.

Answer 2

You can get the element color(Background color of element) by:

element.getCssValue("background-color");

You can get the element text/caption color by:

element.getCssValue("color");

For example if you want to get the background and text color of "Sign in" button for LinkedIn, the code is as follows:

driver.get("https://www.linkedin.com/");
        String buttonColor = driver.findElement(By.name("submit")).getCssValue("background-color");
        String buttonTextColor = driver.findElement(By.name("submit")).getCssValue("color");
        System.out.println("Button color: " + buttonColor);
        System.out.println("Text color " + buttonTextColor);