Comment continuer à remplir un formulaire avec le sélecteur de date Vue Cypress

Question

J'ai essayé de remplir le formulaire en utilisant Cypress. Le formulaire est construit avec Vue et ressemble à ceci

Le problème est que la date planifiée est un sélecteur de date que je remplis à l'aide de la commande cypress type(). Par exemple

cy.get('#dispatch-date').type('22-10-2022');
≪/pré>
Cependant, voici à quoi ressemble le formulaire après avoir saisi la commande

Le menu déroulant du sélecteur de date couvre le reste du formulaire, empêchant Cypress de continuer à remplir le formulaire. J'ai essayé de cliquer sur {enter} après avoir entré la date, mais le formulaire a été soumis. J'ai également essayé l'option {force:true} mais le test a échoué car le sélecteur de date est en fait une balise 
 Des idées sur la façon de résoudre ce problème? 

Answer 1

Cela dépendra du sélecteur de date exact que vous utilisez dans votre application, ou plus précisément de la manière dont l'utilisateur interagit avec lui.

Par exemple, s'il s'agit de vue2-datepicker, vous pouvez simplement fermer le contrôle pour déclencher sa mise à jour.

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

Notez que cliquer sur l'élément fermera le sélecteur, mais la valeur ne sera pas mise à jour vers le modèle V.