css - 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?

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.