Finding shadow DOM text with Selenium and CSS

Question

I am trying to locate an input text from input field that is saved in shadow DOM with:

driver.find_element_by_css_selector("#my_id div:nth-of-type(2)").text

but it does not help. HTML part

<input _ngcontent-c21="" class="clr-input ng-untouched ng-pristine ng-valid" id="my_id" name="my_id" placeholder="My placeholder namespace" size="40" type="text">
 #shadow-root {user-agent}
  <div pseudo="-webkit-input-placeholder" id="placeholder" style="display: none !important;">My placeholder namespace</div>
  <div>Text I need to find</div>

Also tried this with not luck:

shadow_section = driver.execute_script('''return 
document.querySelector("#my_id").shadowRoot''')
            print(shadow_section.find_element_by_css_selector("div:nth-of-type(2)").text)

What is the best approach for finding elements in shadow DOM in this case? In my case locator should be linked to element.

Update: as suggested I tried:

  shadow_root = driver.execute_script('return arguments[0].shadowRoot', driver.find_element_by_css_selector("#my_id"))
  shadow_root_element = shadow_root(driver.find_element_by_css_selector('div:nth-child(2)'))

But received:

TypeError: 'NoneType' object is not callable

on shadow_root_element row.

You can not query user-agent shadowRoots. Those are Browser specific implementations. So the HTML in Safari could be different from the HTML in Chrome or FireFox. If try to edit it (double-click) in F12 Elements.. you can't. — Danny '365CSI' Engelman
– Danny '365CSI' Engelman, Commented Mar 5, 2021 at 13:13

PDHide · Accepted Answer · 2021-03-04 23:56:37Z

1

element=driver.execute_script(
    "return document.querySelector('#my_id').shadowRoot.querySelector('div:nth-child(2)')")

you have to use execute script to find shadow root, the element will have the item you want. You can now use element.text to get the text

answered Mar 4, 2021 at 23:56

PDHide

20.1k2 gold badges43 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

vitaliis Over a year ago

Thanks. When I execute this, I get: selenium.common.exceptions.JavascriptException: Message: javascript error: Cannot read property 'querySelector' of null

vitaliis Over a year ago

I found this answer for Java, trying to use it in Python stackoverflow.com/questions/56380091/…

PDHide Over a year ago

Make sure there is only one element we the id as my id

vitaliis Over a year ago

This id is unique, I checked it in Chrome devtools before. Maybe I should try a different locators for element in shadow DOM.

PDHide Over a year ago

Find that element and then pass that to execute script and do arguments[0].shadowRoot

|

vitaliis · Accepted Answer · 2021-03-05 06:26:14Z

1

I was not able to find a solution with Javascripts .shadowRoot option and it is a mystery for me why it does not work. This option works just fine. It input text:

driver.find_element_by_css_selector("#my_id").get_attribute("value")

or

driver.find_element_by_id("my_id").get_attribute("value")

I am still very interested in the approach proposed by PDHide.

answered Mar 5, 2021 at 6:26

vitaliis

4,1975 gold badges26 silver badges48 bronze badges

4 Comments

PDHide Over a year ago

in the example you showed there is no attribute called value , then how will this work?

PDHide Over a year ago

Do you have a website link?

vitaliis Over a year ago

The site closed app. I found this answer useful stackoverflow.com/questions/10251525/… . So, in the case of input elements we should use "element.get_attribute('value')". Also, from what I learned it matters what type of #shadow-root it is. In my case it is {user-agent}. I think in other cases javascript approach would work with no problems.

vitaliis Over a year ago

There is no value attribute in my HTML.

Collectives™ on Stack Overflow

Finding shadow DOM text with Selenium and CSS

2 Answers 2

11 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related