Objective: I am trying to automate a calendar on Chrome using Selenium (Python + behave).
The problem: Despite attempting to pass a value via JavaScript, the date is only set when physically clicked through the calendar. Keyboard input and JS method do not seem to work.
Important Note: As per the documentation, users should be able to input dates via keys by default, but this does not function as expected. Inputs do not respond to keyboard commands at all.
Issue Investigation
- Here are the original input fields within a #shadow-root (open):
https://i.sstatic.net/i6dDs.png
- Disregarding Python for now, I attempted changing values using simple JavaScript in 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"
- Despite updating values and clicking search, the system does not recognize the new inputs:
https://i.sstatic.net/sT0il.png
- However, manually selecting dates through the calendar works as intended:
https://i.sstatic.net/r6jRQ.png
- The manually selected dates are accepted as valid inputs:
https://i.sstatic.net/wQK29.png
The HTML structure for the calendar is as follows:
<input type="date" min="2022-01-01" max="2022-07-19">
Clearly, utilizing JavaScript alone does not suffice. While the same method may work on this calendar, it does not work on the current one. Additionally, there seems to be an issue with getting Selenium to click and open the calendar autonomously.