how to find the css style attribute of a particular html element using Robot Framework?

5
votes

I am writing an automation test script using Robot Framework & Selenium2Library for testing our web application( in .txt format) . One of my test cases involves to check the CSS style attribute of an HTML tag.

Is there any specific keyword in Robot Framework to obtain 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 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?

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

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

But how to make use of this particular function to store the value of background-color inot a variable ${bg_color} ?

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

3
selenium-webdriverautomated-testsui-automationrobotframework

3 Answers

5
votes

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) | re

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.

2
votes

For whatever reason I had a bunch of trouble getting this to work. I think it's because my CSS was defined in an external file (therefore pulling the style attribute came up empty).

Also note that RF now has changed the definition of Get Element Attribute to take two parameters, not one.

I'd like to pass along a great solution I found after a bunch of searching -- I found this amazing keyword here How to get the css style of text-overflow in robot framework

*** Keywords ***
Get CSS Property Value
    [Documentation]
    ...    Get the CSS property value of an Element.
    ...    
    ...    This keyword retrieves the CSS property value of an element. The element
    ...    is retrieved using the locator.
    ...    
    ...    Arguments:
    ...    - locator           (string)    any Selenium Library supported locator xpath/css/id etc.
    ...    - property_name     (string)    the name of the css property for which the value is returned.
    ...    
    ...    Returns             (string)    returns the string value of the given css attribute or fails.
    ...        
    [Arguments]    ${locator}    ${attribute name}
    ${css}=         Get WebElement    ${locator}
    ${prop_val}=    Call Method       ${css}    value_of_css_property    ${attribute name}
    [Return]     ${prop_val}

after which I could simply run

    ${style}=    Get CSS Property Value    class:logo    background-image

and do a plain text comparison. Sub in any CSS value for background-image and have fun with this!

0
votes

Get css value using javascript in robot framework. link here

# Get element using Xpath in JavaScript.
${element}=    Set Variable    document.evaluate("${xpath_locator}", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue

# Get css attribute value using getComputedStyle()
${attribute_value}=    Execute Javascript    return window.getComputedStyle(${element},null).getPropertyValue('${css_attribute}');

Log   ${attribute_value}