如何继续填写具有Vue日期选择器Cypress的表单
P粉141911244
2023-08-29 18:47:55
<p>我尝试使用 cypress 填写表格。该表单是用 Vue 构建的，看起来像这样</p>
<p>问题是，调度日期是我使用 cypress type() 命令填充的日期选择器。例如</p>
<pre class="brush:js;toolbar:false;">cy.get('#dispatch-date').type('22-10-2022');
</pre>
<p>但是，这就是输入命令后表单的样子</p>
<p>日期选择器的下拉菜单覆盖了表单的其余部分，不允许 cypress 继续填写表单。我尝试在输入日期后单击 {enter}，但它提交了表单。我还尝试了 {force:true} 选项，但它使测试失败，因为日期选择器实际上是 <div> 而不是 <input> 标记。有什么想法可以解决这个问题吗？</p>
这将取决于您在应用程序中使用的确切日期选择器，或更准确地说，取决于用户与其交互的方式。
例如，如果它是 vue2-datepicker，您可能只需关闭该控件即可触发其更新。
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')请注意，单击
元素将关闭选择器，但该值不会更新为 v-model。