Cannot input date to field with shadow-root (user-agent) with Selenium Python

Question

I am trying to write a stable code to input a date into calendar input field. Native Selenium inputs work only locally, but when I run this code in CICD I see that numbers are sometime inputted into wrong places.

For example, the timestamp is 2022-07-22 00:56:42. Expected input by user is 220720220056. By experimenting I found out that year works if there are two zeros in front of the year. Therefore, what I actually send is 22070020220056

    input_field = driver.find_element(By.XPATH, "//div[@role='dialog']//input[@type='datetime-local']")
    input_field.click()
    input_field.clear()
    input_field.send_keys(22070020220056)

<input _ngcontent-pau-c188="" clrinput="" type="datetime-local" name="expiry" aria-describedby="clr-form-control-9-helper" id="clr-form-control-9" class="clr-input ng-pristine ng-valid ng-touched">
#shadow-root (user-agent) == $0
<div pseudo="-webkit-datetime-edit" id="date-time-edit" datetimeformat="dd/MM/y, HH:mm">
    <div pseudo="-webkit-datetime-edit-fields-wrapper">
        <span role="spinbutton" aria-placeholder="dd" aria-valuemin="1" aria-valuemax="31" aria-label="Day" pseudo="-webkit-datetime-edit-day-field" aria-valuenow="25" aria-valuetext="25">25</span>
        <div pseudo="-webkit-datetime-edit-text">/</div>
        <span role="spinbutton" aria-placeholder="mm" aria-valuemin="1" aria-valuemax="12" aria-label="Month" pseudo="-webkit-datetime-edit-month-field" aria-valuenow="7" aria-valuetext="07">07</span>
        <div pseudo="-webkit-datetime-edit-text">/</div>
        <span role="spinbutton" aria-placeholder="yyyy" aria-valuemin="1" aria-valuemax="275760" aria-label="Year" pseudo="-webkit-datetime-edit-year-field" aria-valuenow="2022" aria-valuetext="2022">2022</span>
        <div pseudo="-webkit-datetime-edit-text">, </div>
        <span role="spinbutton" aria-placeholder="--" aria-valuemin="0" aria-valuemax="23" aria-label="Hours" pseudo="-webkit-datetime-edit-hour-field" aria-valuenow="0" aria-valuetext="00">00</span>
        <div pseudo="-webkit-datetime-edit-text">:</div>
        <span role="spinbutton" aria-placeholder="--" aria-valuemin="0" aria-valuemax="59" aria-label="Minutes" pseudo="-webkit-datetime-edit-minute-field" aria-valuenow="1" aria-valuetext="01">01</span>
    </div>
</div>
</input>

Field looks like this:

I tried few other options to make the test more stable.

Option 1.

Tried to set the value directly.

driver.execute_script(f"arguments[0].setAttribute('value', '{my_timestamp}')", input_field)

Option 2

Tried to access shadow root:

date_field = driver.execute_script("return document.querySelector('input[type=datetime-local]').shadowRoot.getElementById('#date-time-edit')")
date_field.send_keys(my_timestamp)

Option 3

Tried to get parent element with execute_script instead of Selenium and send value:

date_field = driver.execute_script("return document.querySelector('input[type=datetime-local]')")
date_field.send_keys(my_timestamp)

Option 4

Tried to send text with a small delay before each letter:

    for letter in timestamp:
        time.sleep(0.1)
        print(f"Sending letter {letter}")
        date_field.send_keys(letter)

None of these methods worked on CICD, Only initial one and Option 3 always work locally.

I think the only stable solution would be the use of Javascipt code, but still not sure.

Any suggestion would be greatly appreciated.

I would like to, but it's unfortunately a closed application. I'll try any advice. I'll think what other details I can share. — vitaliis, Jul 22 '22 at 03:00
So looking through the options that work 1,3 work since it doesn't seem to be in the shadow root. How does it work with sending a format like "dd/MM/y" or maybe "dd/MM/y, HH:mm" to that input tag. — Arundeep Chohan, Jul 22 '22 at 03:03
I think that I'm very close to solution because of your questions. I need to send this timestamp in Selenium with exact format. This is what I got in debugger: `The specified value "22070020221333" does not conform to the required format. The format is "yyyy-MM-ddThh:mm" followed by optional ":ss" or ":ss.SSS".` — vitaliis, Jul 22 '22 at 14:15

score 1 · Answer 1 · answered Jul 22 '22 at 04:42

Ah yes, the shadow root. For me, what works is something like the following:

shadowRootElement = driver.execute_script('''return document.querySelector("selector for shadowRoot's parent").shadowRoot''')

shadowRootChild = driver.execute_script('''return arguments[0].querySelector("selector for shadowRoot's parent").shadowRoot''', shadowRootElement)

shadowRootChild.find_element(By.CSS_SELECTOR, 'input[type=datetime-local]').send_keys("This is a test");

Thanks, I've already tried both answers. Did not work yet, but gave me some new ideas — vitaliis, Jul 22 '22 at 13:40

score 1 · Answer 2 · answered Jul 22 '22 at 10:24

The <input> looks perfectly out of #shadow-root (user-agent) ambit.

<input _ngcontent-pau-c188="" clrinput="" type="datetime-local" name="expiry" aria-describedby="clr-form-control-9-helper" id="clr-form-control-9" class="clr-input ng-pristine ng-valid ng-touched">
#shadow-root (user-agent) == $0
    <div pseudo="-webkit-datetime-edit" id="date-time-edit" datetimeformat="dd/MM/y, HH:mm">
        <div pseudo="-webkit-datetime-edit-fields-wrapper">
        .
        .
        .
        </div>
    </div>
</input>

However, the desired element is a Angular element, so ideally to send a character sequence to the element you need to induce WebDriverWait for the element_to_be_clickable() and you can use the following locator strategy:

Using XPATH:

input_field = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@class='clr-input ng-pristine ng-valid ng-touched' and @name='expiry'][@type='datetime-local']")))
driver.execute_script(f"arguments[0].setAttribute('value', '{my_timestamp}')", input_field)

Note: You have to add the following imports :

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

Thanks. It did not work yet. But I'll try by myself with different locators and inputs — vitaliis, Jul 22 '22 at 13:41

Cannot input date to field with shadow-root (user-agent) with Selenium Python

2 Answers2