Search code examples
cssselenium-webdriverxpathcss-selectors

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

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

Solution

  • 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