Not able to access Reddit login button which is placed inside several shadow-roots

by

On Reddit.com when I click on Log In Button a Dialog Appears to fill the Login Details, but the Log In In Button on the Dialog is Not Accessible through any Locators. When I copy various Locators using Chrome Browser for that WebElement and Verify them using the ctrl+f search, the browser not able to find it own generated Locator Path or Address. Other WebElements Work Fine. I have shown the Button on Attached Image. Any Help would be very Appreciatedenter image description here

  • DO NOT post images of code, data, error messages, etc. – copy or type the text into the question. How to Ask

    – 

Your element placed inside several shadow-roots, to access them you should use js executor depends on your language.

You should go through each shadow host, get it’s shadowRoot property and query for inner element.

JS script to get button is

document.querySelector('shreddit-overlay-display').shadowRoot
.querySelector('shreddit-signup-drawer').shadowRoot
.querySelector('shreddit-slotter').shadowRoot
.querySelector('button.login')

example how to do it on Python

js_script = """
   document.querySelector('shreddit-overlay-display').shadowRoot
   .querySelector('shreddit-signup-drawer').shadowRoot
   .querySelector('shreddit-slotter').shadowRoot
   .querySelector('button.login')
"""
login_button = driver.execute_script(js_script)

Reference to similar question

Leave a Comment