I have a Cypress E2E test, that inputs a specified date into the KendoReact DatePicker field.
cy.insertValueInDateField("#myKendoDatePicker", getDateString(date));
Cypress.Commands.add("insertValueInDateField", (selector, fieldValue) => {
cy.get(selector).click();
cy.waitForDebouncer(250); // This just waits for 250 ms
for (let i = 0; i < fieldValue.length; i++) {
const currentChar = fieldValue.charAt(i);
if (currentChar === ".") {
cy.get(selector).type("{rightArrow}");
cy.waitForDebouncer(250);
} else {
cy.get(selector).type(currentChar);
cy.waitForDebouncer(250);
}
});
What this method does, is simulate "slow" human input into the field so that, in theory, no input is lost.
However, when testing, after 5-6 successful iterations, the test suddenly fails because input seems to be lost.
The error looks like this:
-assert (failed): expected 27.07.0023 to equal **27.07.2023**
I have already tried doing cy.get("#myKendoPicker").clear()
and cy.get().focus()
before interacting with the DatePicker, but that made no improvements. Adding more time to the debouncer, or putting more debouncers everywhere worked neither.
Trying to select the date via buttons is too complicated because of the way they need to be selected.
I need help with making the input into the DatePicker more stable so that the test runs flawless without input being lost.
The way I do it is to use Cypress .type()
delay option - Mimic user typing behavior
For instance, on the Kendo Datepicker sample page KendoReact DatePicker Overview
const date = dayjs('2023-07-25').format('MM/DD/YYYY')
cy.get('.k-dateinput', {timeout: 10_000}).eq(0)
.find('input')
.focus()
.type('{leftarrow}{leftarrow}{leftarrow}', {delay:500})
.type(date, {delay:500})
.type('{enter')
cy.get('.k-dateinput', {timeout: 10_000}).eq(0)
.find('input')
.should('have.value', '7/25/2023')
cy.get('.k-dateinput', {timeout: 10_000}).eq(0)
.should('not.have.class', 'k-invalid')
or another test which checks with the invalid date (shows as red border)
cy.get('.k-dateinput', {timeout: 10_000}).eq(0)
.find('input')
.focus()
.type('{leftarrow}{leftarrow}{leftarrow}', {delay:500})
.type('7/4/23', {delay:500})
.type('{enter')
cy.get('.k-dateinput', {timeout: 10_000}).eq(0)
.should('have.class', 'k-invalid')