typescript - Uji E2E Cypress dari KendoReact DatePicker tidak stabil

Saya memiliki tes Cypress E2E, yang memasukkan tanggal tertentu ke dalam field 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);  
  }
});

Metode ini melakukan simulasi input manusia yang 'lambat' ke dalam bidang sehingga, secara teori, tidak ada input yang hilang.

Namun, saat pengujian, setelah 5-6 iterasi berhasil, pengujian tiba-tiba gagal karena input tampaknya hilang.

Kesalahan terlihat seperti ini: -assert (gagal): diharapkan 27.07.0023 sama dengan **27.07.2023**

Saya sudah mencoba melakukan cy.get("#myKendoPicker").clear() dan cy.get().focus() sebelum berinteraksi dengan DatePicker, tetapi itu tidak memberikan perbaikan. Menambahkan lebih banyak waktu pada debouncer, atau menaruh lebih banyak debouncer di mana-mana juga tidak berhasil.

Mencoba memilih tanggal melalui tombol terlalu rumit karena cara mereka perlu dipilih.

Saya membutuhkan bantuan untuk membuat input di DatePicker lebih stabil sehingga pengujian berjalan lancar tanpa kehilangan input.

Jawaban #1

Cara saya melakukannya adalah dengan menggunakan opsi delay .type() di Cypress - Meniru perilaku mengetik pengguna

Sebagai contoh, pada halaman contoh Kendo Datepicker 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')

atau tes lain yang memeriksa dengan tanggal tidak valid (ditampilkan dengan batas berwarna merah)

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