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:
- Utilizing this site for study: “shop polymer project org” cause he has a lot shadow dom
- Then when im wrote and test a locator like this: document.querySelector(“body > shop-app”).shadowRoot.querySelector(“#header > app-toolbar > div.logo > a”)
- I got a successfull result testing this locator at console window
- 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.