How to find the CSS style attribute of a specific html element using Robot Framework?

Question

I am writing a script automation test using Robot Framework and Selenium2Library to test our web application (in .txt format). One of my test cases is checking the CSS style attribute of an HTML tag.

Is there any specific keyword in the Robot Framework to get the CSS style attribute of an html element?

Here is my testing scenario:

 <div id="check_style" style="width:20px;height:20px;background-color:#ffcc00;"></div> 

Now I have to save the background color of this particular html tag in the variable ${bg_color} . Is there any specific keyword in the Robot Framework to complete this process?

Can you suggest an effective way to deal with this situation?

I think we can use this javascript function for the above purpose:

document.getElementById("check_style").style["background-color"]

But how to use this particular function to store the background-background value in the variable ${bg_color} ?

(I tried to execute ${bg_color} = Execute Javascript document.getElementById("check_style").style["background-color"] , but does not work!)

Answer 1

You can use the Selenium2Library Get Element Attribute keyword to get the style attribute:

 | | ${style}= | Get element attribute | id=check_style@style 

You can then use the regex to find the background color attribute or perform additional parsing. The latter would be easier to do in python than with robot keywords.

For example, if you understand regular expressions, something like the following may work. Of course, you probably want to add bulletproofness.

 | | ${style}= | get element attribute | id=check_style@style | | ${color}= | evaluate | re.search("background-color: *(.*?);", '''${style}''').group(1) | re 

Note. You may not get the same literal meaning as in raw HTML. For example, on my machine, ${color} returned as rgb(255, 204, 0) , although the color in HTML is #ffcc00 .