如何繼續填寫具有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。