Vue 날짜 선택기 Cypress를 사용하여 양식을 계속 작성하는 방법

Question

사이프러스를 사용하여 양식을 작성해 보았습니다. 양식은 Vue로 작성되었으며 다음과 같습니다

문제는 예약된 날짜가 cypress type() 명령을 사용하여 채우는 날짜 선택기라는 것입니다. 예를 들어

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

그러나 명령을 입력한 후의 양식은 다음과 같습니다

날짜 선택기 드롭다운 메뉴는 양식의 나머지 부분을 다루므로 Cypress가 양식을 계속 작성하는 것을 허용하지 않습니다. 날짜를 입력한 후 {enter}를 클릭했는데 양식이 제출되었습니다. 또한 {force:true} 옵션을 시도했지만 날짜 선택기가 실제로 태그 대신

이기 때문에 테스트에 실패했습니다. 이 문제를 해결하는 방법에 대한 아이디어가 있습니까?

Answer 1

이는 앱에서 사용하는 정확한 날짜 선택기, 더 정확하게는 사용자가 앱과 상호작용하는 방식에 따라 달라집니다.

예를 들어 vue2-datepicker인 경우 컨트롤을 닫으면 업데이트가 실행될 수 있습니다.

으아악

요소를 클릭하면 선택기가 닫히지만 값은 v-model로 업데이트되지 않습니다.