How to continue filling a form that has a vue datepicker cypress?-CodePudding

I try to fill a form using cypress. That form is built with Vue and it looks like this

The problem is, dispatch date is a date picker that I fill using cypress type() command. For example

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

However, this is how the form looks like after the type command

the drop down menu of the date picker covers the rest of the form not allowing cypress to continue the form filling. I tried clicking {enter} after typing the date but it submits the form. I also tried the {force:true} option, but it makes the test fails because the datepicker is actually a <div> and not an <input> tag. Any ideas how to solve this problem?

CodePudding user response：

It's going to depend on the exact datepicker you have in the app, or more precisely the way the user interacts with it.

For example if it's the vue2-datepicker you can probably just tab off the control to trigger it's 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 a click on the <body> element will close the picker, but the value is not updated to v-model.