typescript - בדיקת E2E של Cypress עבור KendoReact DatePicker בלתי יציבה

יש לי בדיקת Cypress E2E, שמזינה תאריך מסוים לשדה KendoReact DatePicker.

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);  
  }
});

מה ששיטה זו עושה, הוא לדמות קלט אנושי "איטי" לשדה כך שבתיאוריה, לא ייאבד קלט.

עם זאת, בזמן הבדיקה, אחרי 5-6 חזרות מוצלחות, המבחן נכשל לפתע כי נראה שהקלט איבד.

השגיאה נראית כך: -assert (נכשל): צפוי 27.07.0023 להיות שווה ל-**27.07.2023**

כבר ניסיתי לבצע cy.get("#myKendoPicker").clear() ו-cy.get().focus() לפני אינטראקציה עם ה-DatePicker, אך זה לא הביא לשום שיפור. הוספת יותר זמן ל-debouncer, או שמירה על יותר debouncers בכל מקום, גם לא עזרה.

ניסיון לבחור את התאריך דרך כפתורים הוא מסובך מדי בגלל האופן שבו צריך לבחור אותם.

אני צריך עזרה בהפיכת הקלט ב-DatePicker ליותר יציב כך שהבדיקה תרוץ ללא תקלות ללא איבוד קלט.

תשובה #1

הדרך שבה אני עושה זאת היא להשתמש באופציית ההשהיה .type() של Cypress - לחקות את התנהגות ההקלדה של המשתמש

לדוגמה, בדף הדוגמה של Kendo Datepicker סקירת KendoReact DatePicker

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')

או בדיקה אחרת שבודקת עם התאריך הלא חוקי (מוצג כגבול אדום)

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')