How to interact with ::before pseudo-elements in Robot Framework?

Libraries
1

I’m facing an issue trying to interact with a UI element that is rendered using the CSS ::before pseudo-element. The element is visually present on the screen (such as a button or icon), but it does not exist as a standard DOM node — it has no id, name, xpath, or accessible innerText.

My question is:
Is there any way in Robot Framework (or its libraries like SeleniumLibrary or Browser) to capture or interact with pseudo-elements like ::before or ::after?

I’ve considered some alternatives, such as:

  • Clicking by coordinates (not reliable across browsers or screen sizes).
  • Using image recognition via ImageHorizonLibrary.
  • Injecting JavaScript to modify the CSS or add a real element.

What is the most reliable or recommended approach for dealing with such elements in automated testing, especially when test stability is important?

1 Like
2

Here’s an article about pseudo-elements and Playwright, that maybe can help, to use with Browser Library?

3

Hi,

@falcon030 gave an interesting link already.
On my side - using Seleniumlibrary - I have a lot of these (customs checkbox or radios) and I see two “interaction” types:

  • Selection => for this I use a Click Element, based on relative element (ancestor, sibling…). Usually the pseudo-element is an input, form-name or else
  • Verification => this is the tricky part, as here only ::before and ::after change in the DOM. There I mainly rely on css attributes, if these attributes are different upon selection.

As an example, I need to check which radio is selected, or verify selection after click (radio has specific “plain” color when selected so use this as a keyword:

Get Radio Choice
    [Arguments]    ${parameter}
    ${radios}    Execute JavaScript    return document.querySelectorAll("input[name='${parametre}']:not([type='hidden'])")
    ${radiosnb}    Get Length    ${radios}
    FOR    ${i}    IN RANGE    ${radiosnb}
        VAR    ${radio_path}    (//input[@name='${parameter}' and not(@type='hidden')])[${i+1}]/following-sibling::span[1]
        ${color}    Execute JavaScript    return window.getComputedStyle(document.evaluate("${radio_path}", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue).getPropertyValue('color')
        IF    "${color}" == "rgb(r, g, b)"
            ${selection}    Pick Text    ${radio_path}/following-sibling::span[@class='radio_value']
            RETURN    ${selection}
        END
    END

Regards
Charlie

3 Likes