How to click element in shadow-root

Excuse me, i have some problem with this element. in case i want to click a date logo (default HTML Trigger) for show up the calendar. But the id is not found (I guess cause shadow-root)

How can i click this to show the calendar? i use Click Element but it said Element Not Found

Hi Muiso,

If you search this forum for “shadow dom” there are several threads discussing how to handle this, there is no quick answer which is why I didn’t link to a specific thread.

Hope that helps,

Dave.

I would normally not recommend to use a different Library, but in case of WebComponents (shadow dom) i would recommend to try out Browser library
At least if you have shadowDom elements in general.
Why: because Browser library does automatic shadow dom opening/piercing.
This was initially the one reason why i startet working in the Browser team.

If you just have one or two elements, stay with SeleniumLibrary and just use the dom: selector.

would be this:

Click Element    dom:document.querySelector("input[type='datetime-local'][name='appointment']").shadowRoot.querySelector("#picker")

You have to select the shadow-host (the element that has the #shadow-root in it directly), then call shadowRoot on it to open the shadow dom, then potentially select the next shadow-host or the element you need.

You can get this selector by selecting Copy > Copy JS path in context menu of this element in dev tools in chrome.

Be aware that using xPath inside a shadow dom is not possible.

2 Likes