Comment continuer à remplir un formulaire avec le sélecteur de date Vue Cypress
P粉141911244
2023-08-29 18:47:55
<p>J'ai essayé de remplir le formulaire en utilisant Cypress. Le formulaire est construit avec Vue et ressemble à ceci</p>
<p>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</p>
<pre class="brush:js;toolbar:false;">cy.get('#dispatch-date').type('22-10-2022');
≪/pré>
<p>Cependant, voici à quoi ressemble le formulaire après avoir saisi la commande</p>
<p>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 <div> Des idées sur la façon de résoudre ce problème? </p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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.