How to continue filling out a form with Vue date picker Cypress

Question

I tried filling out the form using cypress. The form is built with Vue and looks like this

The problem is, the scheduled date is a date picker that I populate using the cypress type() command. For example

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

However, this is what the form looks like after entering the command

The date picker dropdown menu covers the rest of the form, not allowing cypress to continue filling out the form. I tried clicking {enter} after entering the date but it submitted the form. I also tried the {force:true} option but it failed the test because the date picker is actually a

instead of an tag. Any ideas how to solve this problem?

Answer 1

This will depend on the exact date picker you use in your application, or more precisely, how the user interacts with it.

For example, if it was a vue2-datepicker, you might just close the control to trigger its update.

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

Note that clicking the element will close the selector, but the value will not be updated to the v-model.