alecxe alecxe - 10 months ago 45
Python Question

Accessing elements in the shadow DOM

Is it possible to find elements inside the Shadow DOM with python-selenium?

Example use case:

I have this


<input type="date">

And I'd like to click the date picker button on the right and choose a date from the calendar.

If you would inspect the element in Chrome Developer Tools and expand the shadow-root node of the date input, you would see the button is appearing as:

<div pseudo="-webkit-calendar-picker-indicator" id="picker"></div>

Screenshot demonstrating how it looks in Chrome:

enter image description here

Finding the "picker" button by id results into

>>> date_input = driver.find_element_by_name('bday')
>>> date_input.find_element_by_id('picker')
selenium.common.exceptions.NoSuchElementException: Message: no such element

I've also tried to use
locators as suggested here:

>>> driver.find_element_by_css_selector('input[name=bday]::shadow #picker')
selenium.common.exceptions.NoSuchElementException: Message: no such element
>>> driver.find_element_by_css_selector('input[name=bday] /deep/ #picker')
selenium.common.exceptions.NoSuchElementException: Message: no such element

Note that I can change the date in the input by sending keys to it:


But, I want to set the date specifically by choosing it from a calendar.


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")

Update 9 Jun 2015

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

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