Verify color in selenium ide

Question

I am actually looking at selenium IDE for testing many parts of websites, so I am new at this. I have been looking for verifying css styles attributes (for example font color, background color and such) of elements of a web page.

I found many documentation using the command "VerifyAttribute", but those are from 3 to 6 years ago, and the actual version does not have this command, and I can't seem to find any equivalent.

I have tried the "VerifyElementPresent" and such commands, but the test always pass although I have added css attributes (like background-color=#333333), because the element is present in the page, whatever i write in the "Value" box.

So my questions are:

1- Is it possible to verify css styles attributes and values with Selenium IDE?

2- If yes, which command should I use, and how to write a correct expected value?

Answer 1

You can use execute <script> to execute a JavaScript command. You basically want to get the style attribute of the element or use the getComputedStyle depending on your case.

The below example is for https://github.com/ :

First will be the execute step

Command : execute
Target : return getComputedStyle(document.querySelector(".Header-old")).backgroundColor
Value : backgroundColor

Followed by the assert on the extracted value :

Command : assert
Target : backgroundColor
Value : "rgb(36, 41, 46)"

Answer 2

rgba_value = element.value_of_css_property('color')

where element is found by driver.find_element(xpath-value)

rgb_value = change_css_output_to_rgb_value(rgba_value)

icon_color_name = get_colour_name(rgb_value)