QBoard » Supporting Tech Stack » RPA » how to find the css style attribute of a particular html element using Robot Framework?

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

  • 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 ! )

      November 26, 2021 12:33 PM IST
    0
  • 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!

     
      December 29, 2021 12:57 PM IST
    0
  • 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}
      December 31, 2021 12:19 PM IST
    0