Interacting with elements inside ShadowElement

Hi guys! Im new coding with robotframework and basically im i want to interact with elements inside shadow dom to exercise (like click them or pass a text in text boxes), but im getting some erros with the locators… so here’s the problem right now:

  1. Utilizing this site for study: “shop polymer project org” cause he has a lot shadow dom
  2. Then when im wrote and test a locator like this: document.querySelector(“body > shop-app”).shadowRoot.querySelector(“#header > app-toolbar > div.logo > a”)
  3. I got a successfull result testing this locator at console window
  4. But whem im trying to interact with them at robot, im always getting this type of errors: Element ‘document.querySelector(’[page=home]‘).shadowRoot.querySelector(’[attr-for-selected=“name”]‘).querySelector(‘shop-tabs > shop-tab:nth-child(2)’).querySelector(’[href=“/list/ladies_outerwear”]‘)’ not visible after 5 seconds.

Ive already tried setting some waits and even sleeps to check if elements is visible that kind of thing but im really stuck.

here’s my code:

*** Settings ***

Library SeleniumLibrary

*** Variables ***
${URL} https://shop.polymer-project.org/
${BTN_LADIES_MENU} document.querySelector(‘[page=home]’).shadowRoot.querySelector(‘[attr-for-selected=“name”]’).querySelector(‘shop-tabs > shop-tab:nth-child(2)’).querySelector(‘[href=“/list/ladies_outerwear”]’)
${BTN_SHOP} document.querySelector(“body > shop-app”).shadowRoot.querySelector(“#header > app-toolbar > div.logo > a”)

*** Keywords ***
Open Navigator
Open Browser browser=chrome
Maximize Browser Window

Access shop.polymer-project.org home page
Go To url=${URL}
Sleep 5s

Click on the “Ladies Outwear” button
Wait Until Element Is Visible locator=${BTN_LADIES_MENU}
Click Element locator=${BTN_LADIES_MENU}

#First Try  
# Wait Until Element Is Visible    document.querySelector('[page=home]')    timeout=10s
# ${shadowRoot}=    Execute Javascript    return    return document.querySelector('[page=home]').shadowRoot
# ${childElement}=    Execute Javascript    return arguments[0].querySelector('[attr-for-selected="name"]').querySelector('shop-tabs > shop-tab:nth-child(2)').querySelector('[href="/list/ladies_outerwear"]')    ${shadowRoot}
# Click Element    ${childElement}

#Second Try
# Wait Until Element Is Visible    ${LADIES_MENU}    30s
# Mouse Over    ${LADIES_MENU}
# Sleep    15s
# Click Element    ${LADIES_MENU}

Ps.: My main goal here is learn how to consistently handle with this kind of elements inside shadow dom hoping to interact with them easily (clicks, passing strings, etc…)

I appreciate any tips or corrections to improve my approach, fell free.

Traditionally, SeleniumLibrary tries to mimic the user experience, so, when a element is not visible for the user, it is not visible to SeleniumLibrary. When the shadow DOM “programming” appeared, test developers resorted to special techniques to access the shadow DOM, mainly using JavaScript. Having said this, I advise you to research and learn Playwright based library, Browser, which is known to better handle shadow DOM.

1 Like

I would advise just as @HelioGuilherme66 to use Browser Library. As long as you don’t use xPath the selectors of Browser Library automatically pierce the Shadow Dom.