Categories
javascript python selenium selenium-webdriver shadow-dom

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 with type="date":

<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 NoSuchElementException:

>>> 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 ::shadow and /deep/ 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:

driver.find_element_by_name('bday').send_keys('01/11/2014')

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