Given:
<input class="inputField_input__2B0dA" maxlength="7" id="establishedYear" data-testid="date-input" type="month" value="">
This input field on the page resembles a date format: ----- ---- [Calendar symbol]
The first set of dashes represents the month, and the second set represents the year => April 2020
However, the only way to select the actual date is by interacting with the calendar icon.
I attempted to set the value of the element programmatically using JavaScript:
// JavascriptExecutor jse = (JavascriptExecutor) getDriver();
// jse.executeScript("document.getElementById('establishedYear').setAttribute('value', '2022-04')");
This works initially, but as soon as I interact with another element, the value set with JS disappears.
Furthermore, manually typing the date leads to issues where entering the year results in only the last character being registered. For example, if trying to type 2022, it would show up as 0002.
Additionally, attempting to automate the selection process by clicking on the calendar icon and then selecting the month using Selenium proves challenging because the date elements are not found in the DOM.
Even after clicking on the calendar icon, no changes to the DOM occur (no new elements added).
Any suggestions on how to address this issue effectively?