Accessing elements in the shadow DOM

by

There’s no way to access the shadow root of native HTML 5 elements.

Not useful in this case, but with Chrome it’s possible to access a custom created shadow root:

var root = document.querySelector("#test_button").createShadowRoot();
root.innerHTML = "<button id='inner_button'>Button in button</button"
<button id="test_button"></button>

The root can then be accessed this way:

 var element = document.querySelector("#test_button").shadowRoot;

If you want to automate a click on the inner button with selenium python (chromedriver version 2.14+):

 >>> outer = driver.execute_script('return document.querySelector("#test_button").shadowRoot')
 >>> inner = outer.find_element_by_id("inner_button")
 >>> inner.click()

Update 9 Jun 2015

This is the link to the current Shadow DOM W3C Editor’s draft on github:

http://w3c.github.io/webcomponents/spec/shadow/

If you’re interested in browsing the blink source code, this is a good starting point.

More Related Contents:

  1. WebDriver click() vs JavaScript click()
  2. Getting the return value of Javascript code in Selenium
  3. Scrolling to top of the page in Python using Selenium
  4. Understanding execute async script in Selenium
  5. Accessing Shadow DOM tree with Selenium
  6. An error has occured in ‘site url’: Uncaught TypeError: Cannot read property ‘getColomnSet’ of undefined with Selenium and Python
  7. Disable images in Selenium Python
  8. Ways to deal with #document under iframe
  9. Can a website detect when you are using Selenium with chromedriver?
  10. org.openqa.selenium.ElementNotInteractableException: Element is not reachable by keyboard: while sending text to FirstName field in Facebook
  11. How to automate shadow DOM elements using selenium?
  12. Element not visible error (not able to click an element)
  13. How to handle elements inside Shadow DOM from Selenium
  14. ElementClickInterceptedException: Message: element click intercepted Element is not clickable error clicking a radio button using Selenium and Python
  15. Selenium Datepicker using JavascriptExecutor
  16. Python: Unable to download with selenium in webpage
  17. Custom browser actions in Protractor
  18. Take elements while a condition evaluates to true (extending ElementArrayFinder)
  19. What does arguments[0] and arguments[1] mean when using executeScript method from JavascriptExecutor interface through Selenium WebDriver?
  20. How to get past a cookie agreement page using Python and Selenium?
  21. How to disable a “Reload site? Changes you made may not be saved” popup for (python) selenium tests in chrome?
  22. Reading JavaScript variables using Selenium WebDriver
  23. scrollIntoView vs moveToElement
  24. How to send a date directly as text to a calendar control with readonly attribute using Selenium through Python?
  25. How to get html with javascript rendered sourcecode by using selenium
  26. How to download an image with Python 3/Selenium if the URL begins with “blob:”?
  27. Opening a new tab using Ctrl + click combination in Selenium Webdriver
  28. How to locate the First name field within shadow-root (open) within the website https://www.virustotal.com using Selenium and Python
  29. Using cross-platform keyboard shortcuts in end-to-end testing
  30. Selenium: How to Inject/execute a Javascript in to a Page before loading/executing any other scripts of the page?

Leave a Comment