'Cypress-Vuetify test issue: v-date-picker month buttons keep detaching
I am running Cypress test on the following component:
<v-row>
<v-col cols="12">
<v-date-picker
v-model="calendarDate"
:allowed-dates="availableReportingMonths"
:landscape="false"
:min="earliestReportingDate"
:max="latestReportingDate"
:title-date-format="titleDateFormat"
@change="onReportingDateChanged"
small
full-width
type="month"
data-cy="dashboard_date_picker"
/>
</v-col>
</v-row>
Here is the following Cypress test:
it( 'Date Selection Change', () => {
cy.get( ticketDatePicker ).contains( 'December 2021' );
cy.get( ticketDatePicker ).contains( '.v-btn', 'Oct' ).parent( 'td' ).click();
cy.get( ticketDatePicker ).contains( 'Reporting Date: October 2021' );
});
After this, I get an error message indicating the DOM element is detached: https://imgur.com/a/7vq3trc (image link is posted because of low reputation).
I can get the button, but I cannot click it. I would like to know if this is common or a Vuetify issue stemming from the well documented interaction issues.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
