So füllen Sie ein Formular mit dem Vue-Datumswähler Cypress weiter aus

Question

Ich habe versucht, das Formular mit Cypress auszufüllen. Das Formular wurde mit Vue erstellt und sieht so aus

Das Problem ist, dass das geplante Datum eine Datumsauswahl ist, die ich mit dem Befehl cypress type() fülle. Zum Beispiel

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

So sieht das Formular jedoch nach Eingabe des Befehls aus

Das Dropdown-Menü zur Datumsauswahl deckt den Rest des Formulars ab, sodass Cypress das Formular nicht weiter ausfüllen kann. Ich habe nach der Eingabe des Datums versucht, auf {Enter} zu klicken, aber das Formular wurde abgeschickt. Ich habe auch die Option {force:true} ausprobiert, aber sie hat den Test nicht bestanden, da die Datumsauswahl tatsächlich ein

-Tag ist. Irgendwelche Ideen, wie man dieses Problem lösen kann?

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。