Targeting pseudo element by refering to id of a parent

Robot Framework
1

Hello,

In my case I want to do checks in a class but as there are so many, i want to target the element by the parent’s id.

What works but select only the first one found:

${Main_Border_Color_RGB}       Execute Javascript   return window.getComputedStyle(document.querySelector('label.custom-control-label'),':before').getPropertyValue('border-color');

But I want something that let me select the exact element, by parent’s id in this case
Capture d'écran 2024-07-08 153535

I tried something like:

> Execute Javascript   return window.getComputedStyle(document.getElementById("__BVID__52").querySelector('label.custom-control-label'),
                                   ...   ':before').getPropertyValue('background-color');

But didn’t work.

BR,

2

HI BR,

Looks like you’re using the css selector, here’s a handy reference guide

I think what you’re after is one of these:

element element div p Selects all

elements inside

elements
element>element div > p Selects all

elements where the parent is a

element

Combined with:

#id #firstname Selects the element with id=firstname

Hope that helps,

Dave.

3

Hi Dave,

Thanks, I tried this

> Execute Javascript   return window.getComputedStyle(document.querySelector('#__BVID__52 > .custom-control-label'),':before').getPropertyValue('background-color');

But got the error: Failed to execute ‘getComputedStyle’ on ‘Window’: parameter 1 is not of type ‘Element’.

4

Hi BR,

I see you updated the original message with this screenshot:

Something to note, the <input> and the <label> are both at the same level under the <div class"custom-control customc-checkbox">

So the selector '#__BVID__52 > .custom-control-label' won’t find anything, there isn’t any sub element inside that <input>

if you’re trying to select the <label>, your best bet would be to use the for attribute, something like this: label[for="__BVID__52"]

Dave.

2 Likes
5

Thank you very much Dave! <3

1 Like
6

Hi,

Note also that you can use Axes that are useful to target elements in the DOM.
See here:

In the first JS provided for attribute, I usually only use one xpath (for example the input one), then use it as a base and navigate with axes to get other infos.
For example xpath/… to get parent element, that would for example be a colored bordered or else.
This minimizes the variables, paths and maintenance.

Regards
Charlie