How to find the CSS style attribute of a particular HTML element using Robot Framework?

Question

I am writing an automation test script using Robot Framework & Selenium2Library for testing our web application. One of my test cases involves checking the CSS style attribute of an HTML tag.

Is there any option in Robot Framework to obtain the CSS style attributes of an HTML element?

Here is my HTML:

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

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

Can you please suggest an effective way to handle this situation?

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 either use a regular expression to find the background color attribute or do some 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 might work. Of course, you'll probably want to add some bullet-proofing.

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

Note: you might not get the same literal value as is in the raw HTML. For example, on my machine ${color} comes back as rgb(255, 204, 0) even though the color in the HTML is #ffcc00.

Answer 2

You will find the answer here.
For reference, in this case I would use the keyword Get Element Attribute and compare it against the expected result.

Answer 3

You first need to get the attribute of the element by using 'Get Element Attribute' of selenium2Library:

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

Once you get the attribute like "width:20px;height:20px;background-color:#ffcc00;"

then, you can get background-color very easily from this string by using 'Split String' of String library:

 ${style} | ${bgcolor} | Split String | ${style} | background-color:

You will get the back ground color in ${bgcolor}:

Log | ${bgcolor}