Bagaimana untuk terus mengisi borang dengan pemilih tarikh Vue Cypress

Question

Saya cuba mengisi borang menggunakan cypress. Borang dibina dengan Vue dan kelihatan seperti ini

Masalahnya ialah, tarikh yang dijadualkan ialah pemilih tarikh yang saya isikan menggunakan perintah cypress type(). Contohnya

cy.get('#dispatch-date').type('22-10-2022');

Walau bagaimanapun, ini adalah rupa bentuk selepas memasukkan arahan

Menu lungsur turun pemilih tarikh meliputi seluruh borang, tidak membenarkan cypress terus mengisi borang. Saya cuba mengklik {enter} selepas memasukkan tarikh tetapi ia menyerahkan borang. Saya juga mencuba pilihan {force:true} tetapi ia gagal dalam ujian kerana pemilih tarikh sebenarnya adalah 
 Sebarang idea bagaimana untuk menyelesaikan masalah ini? 
            

Answer 1

Ini bergantung pada pemilih tarikh tepat yang anda gunakan dalam apl anda, atau lebih tepat lagi, cara pengguna berinteraksi dengannya.

Sebagai contoh, jika ia vue2-datepicker, anda mungkin hanya menutup kawalan untuk mencetuskan kemas kininya.

cy.get('#dispatch-date')
  .type('{selectAll}22-10-2022')                   // {selectAll} if not empty
  .trigger('keydown', {keyCode: 9, which: 9})

cy.get('#dispatch-date')
  .should('have.value', '22-10-2022')

Perhatikan bahawa mengklik elemen akan menutup pemilih, tetapi nilai tidak akan dikemas kini kepada model v.