Hi, I have a Python code to navigate through the ShadowDom but I don’t know how to code it in Robotframework. I got the first Shadow root element, but facing error in executing Javascript.

Python code :

def expand_shadow_element():
    # return a list of elements
    shadowRoot = driver.find_element(By.CSS_SELECTOR, "camos-html5client")
    shadowRoot = driver.execute_script('return arguments[0].shadowRoot', shadowRoot)
    executableShadow = shadowRoot.find_element(By.CSS_SELECTOR, "div#CHCArena")
    return executableShadow
Robotframework code :
Expand Shadow Element
    ${shadowRoot}=    Get WebElement     css=camos-html5client
    ${shadowRoot}=    Execute Javascript    return arguments[0].shadowRoot    ${shadowRoot}
    ${executableShadow}=    Get WebElement     css=div#CHCArena    ${shadowRoot}
    [Return]    ${executableShadow}
image1481×229 15.8 KB
              
One question:

Do you really need to use SeleniumLibrary?
Because Selenium 4 itself is bad with shadowDom and just the basic support for it and SeleniumLibrary has no features to support ShadowDom/WebComponents except of dom selector which is basically js.
Answer for ShadowRoot / ShadowDom / WebComponent automation is the playwright based Browser library.
              
Hi @René, thanks for the code to select the shadow root element. It is working fine.
I want to access further the shadow dom elements using xpath
executableShadow = expand_shadow_element()
page_loaded = WebDriverWait(driver, 120).until(EC.element_to_be_clickable(executableShadow.find_element(By.XPATH, ".//*[@data-ctcwgtname = SelPlatform']/button")))
executableShadow.find_element(By.XPATH, ".//*[@data-ctcwgtname = 'SelPlatform']/button").click()
              
Hi ramya, I have tried like this:

Use Shadow Path generator chrome extension and get the string value and by using js executor, click on the shadow dom and enter into it. see the reference code below:
JavascriptExecutor Skilljs = (JavascriptExecutor) driver;

String SkillsqueryString = “return document.querySelector(‘records-related-list-lwc-detail-panel-wrapper’).shadowRoot.querySelector(‘records-lwc-detail-panel’).” +

“shadowRoot.querySelector(‘records-base-record-form’).shadowRoot.querySelector(‘div.record-layout-container’)”;

WebElement SkillsshadowElement = (WebElement) ((JavascriptExecutor) driver).executeScript(SkillsqueryString);

SkillsshadowElement.click();
then start locating the element. it will work
Thank you,