如何使用 Robot Framework 找到特定 html 元素的 css 样式属性？

Question

我正在使用 Robot Framework 和 Selenium2Library 编写自动化测试脚本来测试我们的 Web 应用程序（.txt 格式）。我的一个测试用例涉及检查 HTML 标签的 CSS 样式属性。

Robot Framework 中是否有特定的关键字来获取html 元素的CSS 样式属性？

这是我的测试场景：

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

现在，我必须将这个特定 html 标签的背景颜色存储到变量 ${bg_color} 中。 Robot Framework 中是否有任何特定关键字来执行此过程？

能否请您提出一个有效的方法来处理这种情况？

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

Answer 1

可以使用Selenium2Library Get Element Attribute关键字获取样式属性：

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

然后您可以使用正则表达式来查找背景颜色属性或进行一些额外的解析。后者在 python 中比在机器人关键字中更容易做到。

例如，如果您了解正则表达式，则类似以下内容可能会奏效。当然，您可能想要添加一些防弹功能。

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

注意：您可能无法获得与原始 HTML 中相同的文字值。例如，在我的机器上 ${color} 返回为 rgb(255, 204, 0)，即使 HTML 中的颜色是 #ffcc00。

Answer 2

在机器人框架中使用 javascript 获取 css 值。 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}

Answer 3

无论出于何种原因，我在让它工作时遇到了很多麻烦。我认为这是因为我的 CSS 是在外部文件中定义的（因此拉动 style 属性为空）。

另请注意，RF 现在已将获取元素属性的定义更改为采用两个参数，而不是一个。

我想传递经过大量搜索后找到的一个很好的解决方案 -- 我在这里找到了这个惊人的关键字

*** 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}

之后我可以简单地运行

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

并进行纯文本比较。为 background-image 添加任何 CSS 值，玩得开心！

如何使用 Robot Framework 找到特定 html 元素的 css 样式属性？

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

automated-tests

ui-automation

robotframework

selenium-webdriver