Does anybody know how to identify shadow dom web elements using selenium webdriver?

by

You can inject this piece of javascript that does this and then run the find_element methods on that element:

shadow_section = mydriver.execute_script('''return document.querySelector("neon-animatable").shadowRoot''')
shadow_section.find_element_by_css(".flex")

since you use often that you may create a function, , then the above becomes:

def select_shadow_element_by_css_selector(selector):
  running_script="return document.querySelector("%s").shadowRoot" % selector
  element = driver.execute_script(running_script)
  return element

shadow_section = select_shadow_element_by_css_selector("neon-animatable")
shadow_section.find_element_by_css(".flex")

on the resulting element you can put any of the methods:

find_element_by_id
find_element_by_name
find_element_by_xpath
find_element_by_link_text
find_element_by_partial_link_text
find_element_by_tag_name
find_element_by_class_name
find_element_by_css_selector

To find multiple elements (these methods will return a list):

find_elements_by_name
find_elements_by_xpath
find_elements_by_link_text
find_elements_by_partial_link_text
find_elements_by_tag_name
find_elements_by_class_name
find_elements_by_css_selector

later edit:

many times the root elements are nested and the second nested element is no longer available in document, but is available in the current 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

#the above becomes 
shadow_section = expand_shadow_element(find_element_by_tag_name("neon-animatable"))
shadow_section.find_element_by_css(".flex")

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:

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

selenium.__file__
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()

More Related Contents:

  1. How can I select a html element no matter what frame it is in in selenium?
  2. How to simulate HTML5 Drag and Drop in Selenium Webdriver?
  3. How to get text of an element in Selenium WebDriver, without including child element text?
  4. How to handle elements inside Shadow DOM from Selenium
  5. How to extract info within a #shadow-root (open) using Selenium Python?
  6. How can I make sure if some HTML elements are loaded for Selenium + Python?
  7. How to get past a cookie agreement page using Python and Selenium?
  8. How can I get text of an element in Selenium WebDriver, without including child element text?
  9. How to locate the First name field within shadow-root (open) within the website https://www.virustotal.com using Selenium and Python
  10. Selenium – wait until element is present, visible and interactable
  11. How to select a drop-down menu value with Selenium using Python?
  12. How to make Firefox headless programmatically in Selenium with Python?
  13. Error Message: ‘chromedriver’ executable needs to be PATH
  14. Selenium and iframe in html
  15. Download image with selenium python
  16. StaleElementReferenceException on Python Selenium
  17. ‘list’ object has no attribute ‘get_attribute’ while iterating through WebElements
  18. Access to table objects on Webpage Using Python Selenium
  19. Selenium using Python: enter/provide http proxy password for firefox
  20. Set chrome browser binary through chromedriver in Python
  21. Fetch all href link using selenium in python
  22. How to properly stop phantomjs execution
  23. Why switching to alert through selenium is not stable?
  24. How to read text that is under #shadow-root (user-agent)
  25. How to fix python-selenium error “connection refused” when initializing a selenium webdriver?
  26. Webpage Is Detecting Selenium Webdriver with Chromedriver as a bot
  27. How to select multiple options from multi select list using Selenium-Python?
  28. Python Selenium driver.execute_script WebDriverException: Message: unknown error: call function result missing ‘value’
  29. Browser performance tests through selenium
  30. How to click on Load More button within Google Trends and print all the titles through Selenium and Python

Leave a Comment