While testing an application many times we get some testcases where we have to check the value of CSS attributes. Suppose we have the following cucumber step:

Then(/^The month section should have a grey background$/) do
  @page = @page.assert_month_background_color
end

The CSS attributes and of the element is:

background-color: #d77040;
border-radius: 5px;
color: #fff;
font-size: 30px;
font-weight: 600;
margin: 0 auto;
padding: 10px 0 12px;
text-align: center;

We can get the value of any CSS attribute by first locating the desired element and then using ".css_value()" method with the CSS attribute to get the value of desired attribute

def assert_month_background_color

        @session.find(:xpath, path).native.css_value('background-color')

   end

The above method will return the background color code in 'rgb' format but not in the hexa code.

Let's suppose the rgb code of the element is rgb[102, 184, 126] then to convert this to hexa code we do:

    "#%02X%02X%02X" % [102, 184, 126]

This will return the hexa code of the given rgb code.

We can also pass other attributes inside "css_value()" to get the value of attributes.