Accessing elements inside ShadowDom

Robot Framework
1

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}

image
image1481×229 15.8 KB

1 Like
2

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.

1 Like
3

what you can do with the dom selector:

Click Element    dom:document.querySelector("camos-html5client").shadowRoot.querySelector("div#CHCArena")
1 Like
4

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()
5

@René Any help on this?

6

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,
Sid