How to continue filling out a form with Vue date picker Cypress
P粉141911244
2023-08-29 18:47:55
<p>I tried filling out the form using cypress. The form is built with Vue and looks like this</p>
<p>The problem is, the scheduled date is a date picker that I populate using the cypress type() command. For example</p>
<pre class="brush:js;toolbar:false;">cy.get('#dispatch-date').type('22-10-2022');
</pre>
<p>However, this is what the form looks like after entering the command</p>
<p>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 <div> instead of an <input> tag. Any ideas how to solve this problem? </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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.