Check the value of css classes attributes

Robot Framework
1

Hello!

Sorry if the title is not clear, but the idea is how to check css classes attributes values.

In the screenshot i want to check for example inside the class “custom-control-input:checked~.custom-control-label:before” of ::before that background-color value is #3cb39f

BR,

Capture d'écran 2024-06-26 181638

2

Hi,

I paste here a sample of the code I use with Selenium Library (maybe Browser has other solutions)

The idea here is to provide the target element xpath as a parameter and the needed property (ex: background-color, box-Shadow…)

Color Attribute
    [Arguments]    ${parameter}    ${property}
    ${isshadowbox}    Run Keyword And Return Status
...    Execute Javascript
...    return window.getComputedStyle(document.evaluate("${parameter}", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue).getPropertyValue('${property}');

Here I first Execute to verify status and property existence, then if status is PASS, you can Execute the same to get the property value.
This will return a rgb value that you can manage.

I usually RETURN Status, custom color word (Green, Red…for readability and property)

Regards.
Charlie

1 Like
3

Hi,
Thanks for your reply.

I tried to adapt this solution but the fact i have this “::before” that contains the desired class I can’t find a way to solve it.

Any help will be appreciated.

BR,

4

@CharlieScene
I think I found the solution yours combined with what we can find here:

This will give:

Execute Javascript return window.getComputedStyle(document.querySelector(‘label.custom-control-label’),‘:before’).getPropertyValue(‘background-color’);

Thanks @CharlieScene and @EdManlove

1 Like