如何继续填写具有Vue日期选择器Cypress的表单

Question

我尝试使用 cypress 填写表格。该表单是用 Vue 构建的，看起来像这样

问题是，调度日期是我使用 cypress type() 命令填充的日期选择器。例如

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

但是，这就是输入命令后表单的样子

日期选择器的下拉菜单覆盖了表单的其余部分，不允许 cypress 继续填写表单。我尝试在输入日期后单击 {enter}，但它提交了表单。我还尝试了 {force:true} 选项，但它使测试失败，因为日期选择器实际上是

而不是 标记。有什么想法可以解决这个问题吗？

Answer 1

这将取决于您在应用程序中使用的确切日期选择器，或更准确地说，取决于用户与其交互的方式。

例如，如果它是 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。