Accessing Shadow DOM tree with Selenium

by

The accepted answer is no longer valid and some of the other answers have some drawbacks or are not practical (the /deep/ selector doesn’t work and is deprecated, document.querySelector('').shadowRoot works only with the first shadow element when shadow elements are nested), sometimes the shadow root elements are nested and the second shadow root is not visible in document root, but is available in its parent accessed shadow root. I think is better to use the selenium selectors and inject the script just to take the shadow root:

def expand_shadow_element(element):
    shadow_root = driver.execute_script('return arguments[0].shadowRoot', element)
    return shadow_root

outer = expand_shadow_element(driver.find_element_by_css_selector("#test_button"))
inner = outer.find_element_by_id("inner_button")
inner.click()

To put this into perspective I just added a testable example with Chrome’s download page, clicking the search button needs open 3 nested shadow root elements:
enter image description here

import selenium
from selenium import webdriver
driver = webdriver.Chrome()


def expand_shadow_element(element):
    shadow_root = driver.execute_script('return arguments[0].shadowRoot', element)
    return shadow_root

driver.get("chrome://downloads")
root1 = driver.find_element_by_tag_name('downloads-manager')
shadow_root1 = expand_shadow_element(root1)

root2 = shadow_root1.find_element_by_css_selector('downloads-toolbar')
shadow_root2 = expand_shadow_element(root2)

root3 = shadow_root2.find_element_by_css_selector('cr-search-field')
shadow_root3 = expand_shadow_element(root3)

search_button = shadow_root3.find_element_by_css_selector("#search-button")
search_button.click()

Doing the same approach suggested in the other answers has the drawback that it hard-codes the queries, is less readable and you cannot use the intermediary selections for other actions:

search_button = driver.execute_script('return document.querySelector("downloads-manager").shadowRoot.querySelector("downloads-toolbar").shadowRoot.querySelector("cr-search-field").shadowRoot.querySelector("#search-button")')
search_button.click()

More Related Contents:

  1. Can a website detect when you are using Selenium with chromedriver?
  2. Accessing elements in the shadow DOM
  3. WebDriver click() vs JavaScript click()
  4. How to automate shadow DOM elements using selenium?
  5. Running javascript in Selenium using Python
  6. Getting the return value of Javascript code in Selenium
  7. Unable to sign into google with selenium automation because of “This browser or app may not be secure.”
  8. ElementClickInterceptedException: Message: element click intercepted Element is not clickable error clicking a radio button using Selenium and Python
  9. Scrolling to top of the page in Python using Selenium
  10. Python: Unable to download with selenium in webpage
  11. Understanding execute async script in Selenium
  12. How do I wait for a JavaScript __doPostBack call through Selenium and WebDriver
  13. How to disable a “Reload site? Changes you made may not be saved” popup for (python) selenium tests in chrome?
  14. An error has occured in ‘site url’: Uncaught TypeError: Cannot read property ‘getColomnSet’ of undefined with Selenium and Python
  15. How to send a date directly as text to a calendar control with readonly attribute using Selenium through Python?
  16. How to get html with javascript rendered sourcecode by using selenium
  17. How to download an image with Python 3/Selenium if the URL begins with “blob:”?
  18. Disable images in Selenium Python
  19. Selenium: How to Inject/execute a Javascript in to a Page before loading/executing any other scripts of the page?
  20. Web-scraping JavaScript page with Python
  21. selenium.common.exceptions.WebDriverException: Message: ‘chromedriver’ executable needs to be in PATH error with Headless Chrome
  22. How to use Chrome Profile in Selenium Webdriver Python 3
  23. What is the difference between the different scroll options?
  24. urllib3.exceptions.ProtocolError: (‘Connection aborted.’, error(10054, ‘An existing connection was forcibly closed by the remote host’))
  25. Undetected Chromedriver not loading correctly
  26. What does arguments[0] and arguments[1] mean when using executeScript method from JavascriptExecutor interface through Selenium WebDriver?
  27. How to solve ‘Getting Default Adapter failed’ error when launching Chrome and try to access a webpage using the ChromeDriver using Selenium
  28. Click on a javascript link within python?
  29. Hide several lines using Checkboxes and CustomJS in Python Bokeh
  30. Python Flask Cors Issue

Leave a Comment