Get color attribute from the styles table

Question

I need to verify the value of background color of div. Here's the HTML:

<div id="outercontainer" align="left">

The information about background color is defined in file style.css like so:

#outercontainer {
    background-color: #EAEAEA;
    margin-left: auto;
    margin-right: auto;
    opacity: 1;
    width: 1000px;
    z-index: 2;
}

I tried to get the value of bgcolor using selenium.getattribute command, but selenium returned me following error message :

ERROR: Could not find element attribute: css=#oute rcontainer@background-color on session bc60eb07f15e4e63986634fb59bf58a1

as the result. This part of my code:

try
{
     string atr_str = selenium.GetAttribute("css=#outercontainer@background-color");
     Console.WriteLine(atr_str);
}
catch (SeleniumException)
{
     Console.WriteLine("Color value was not got.");
}

In fact I tried different ways with different types of locators, but nothing helped me. What can you advise to do?

Unpretentious

You can't use CSS locators to access an element's style attributes. – Cysteine

But can you tell me the right way? I'm novice in web-development QA – Unpretentious

Answer 1

I don't have a C# environment to test it in, but something like this should work:

string js = "
    window.document.defaultView.getComputedStyle(
        window.document.getElementById('outercontainer'), null).
            getPropertyValue('background-color');
            ";
string res = selenium.GetEval(js);

Now res will contain the rgba value of the background color. You will have to use Javascript since Selenium doesn't work on the computed styles, only on the styles defined in the HTML tags themselves.

I played with the linebreaks a bit to keep things readable: the js string can all be put on a single line.

Maloney

Thank you. I used this way. It works. By the the way it solves some other problems, I've got in my work. – Unpretentious

+1 cause the OP didn't choose your answer and it was the correct answer – Timbrel

i have given background-color as #730606 . and i am getting the result as res="rgb(115, 6, 6)". how to compare these two values? so that we can verify whether the given color is correct or not? – Wimsatt

As a side note, this won't work for IE6,7,8. Here's how to overcome it.. And about that colour comparing - your original is in HEX, your new is in normal decimal, so you'll want the first one to convert to decimal, too (or the other way around - your pick). – Brachio

am using firefox 12. and how can i convert color from hex to rgd?? i can get the rgd value from here and i can use it manually. but is their any way to convert the color automatically ? in selenium... – Wimsatt

Oh, c'mon. You must have heard of RGB color coding and hexadecimal numbers. You can do it! There's definitely a lot of tools for it, too. – Brachio

Answer 2

Try with:

string rgbaColor = yourElement.GetCssValue("background-color");

Luing