Clicking the v-date-picker in Cypress with Vue

A few days ago I was writing an end-to-end that required me to be able to click a v-date-picker that was visible on the screen. This took me a few hours to figure out, and it’s still not completely perfect, but it’s actually pretty simple to at least make it work.

The first thing we need to do is assign data-testid to the necessary components. Our setup was so that we first have a v-text-field that when clicked opens up the necessary v-date-picker, so we give the v-text-field the necessary attribute data-testid=”startDate-value”, and the v-date-picker that opens up the attribute data-testid=”v-date-picker-start-date”

<v-text-field
  data-testid="startDate-value"
  v-model="start_date"
  label="Start date"
  readonly
></v-text-field>
<v-date-picker
  data-testid="v-date-picker-start-date"
  v-model="startDate"
  no-title
></v-date-picker>

Now to be able to assign the values, we can simply give it this little test that sets the date to the tenth of this month every time!

it('Opens and clicks the v-date-picker successfully', () => {
    cy.get('[data-testid="startDate-value"]').click()
    cy.get('[data-testid="v-date-picker-start-date"]').contains('10').click()
})