Trouble sending JavaScript into <input type="date"> calendar

Question

Goal: Attempting to automate a calendar on Chrome using Selenium(Python + behave).

The issue: The date is only being set when actually clicked through the calendar. Passing a value via JavaScript is not working.

Note: According to docs the inputs should allow users to send input in with keys by default but that doesn't even work. It does not accept keyboard input at all.

---

Problem Walkthrough

• This is the original input fields. The div class they are contained in is inside a #shadow-root (open):

• Ignoring the Python. I will try and change the values with some simple JavaScript in the Chrome Dev Tools console:

    x = document.querySelector("#class > something").shadowRoot.querySelector("div > div > input[type=date]:nth-child(5)") #Select input for From Date
    x = "2022-05-12"
    y = document.querySelector("#class > something").shadowRoot.querySelector("div > div > input[type=date]:nth-child(5)") #Select input for To Date
    y = "2022-06-12"

• After sending in the new values and clicking search. It does not recognize the values as being entered:

• However, when manually selected through the calendar:

• The dates are accepted and as inputs:

---

The HTML for the calendar is:

<input type="date" min="2022-01-01" max="2022-07-19">

Clearly. The JavaScript alone does not seem to be enough. If you use the same method above on this calendar it will work. However, on the calendar I am attempting this JS method will not work for some reason. Also, I cannot get Selenium to click and open the calendar on its own for some odd reason.

Answer 1

Solution: Manually trigger the event ( Source )

let element = document.getElementById(id);
element.dispatchEvent(new Event("change")); // or whatever the event type might be

dispatchEvent() Documentatio

Event() Documentation