Vue 日付ピッカー Cypress でフォームへの入力を続ける方法

Question

<p>ヒノキを使ってフォームに記入してみました。フォームは Vue で構築されており、次のようになります。</p> <p>問題は、スケジュールされた日付が、cypress type() コマンドを使用して設定される日付ピッカーであることです。たとえば、

<pre class="brush:js;toolbar:false;">cy.get('#dispatch-date').type('22-10-2022'); </pre> <p>ただし、コマンドを入力した後のフォームは次のようになります</p> <p>日付ピッカーのドロップダウン メニューがフォームの残りの部分を覆い、サイプレスがフォームへの入力を続行することはできません。日付を入力した後に {enter} をクリックしようとしましたが、フォームは送信されてしまいました。 {force:true} オプションも試しましたが、日付ピッカーが実際には <input> タグではなく <div> であるため、テストに失敗しました。この問題を解決する方法はありますか? </p>

Answer 1

これは、アプリケーションで使用する正確な日付ピッカー、より正確には、ユーザーが日付ピッカーをどのように操作するかによって異なります。

たとえば、vue2-datepicker の場合は、コントロールを閉じるだけで更新がトリガーされます。

リーリー

要素をクリックするとセレクターは閉じますが、値は v-model に更新されないことに注意してください。