How to select a (Vue) v-select option with Cypress?

Question

Seems like it should work, but it does not. Anyone know the trick to select on a v-select?

my.vue

      <v-select 
        data-cy="exp_month"
        name="exp_month" 
        v-model="card.expiration.month" 
        :items="months" 
        label="exp month">
      </v-select>

myTest.js

  it('should select the first month', () => {
    cy.get("[data-cy=exp_month]").select("01")
  })

the result

CypressError: cy.select() can only be called on a <select>. Your subject is a: <input aria-label="exp month" data-cy="exp_month" name="exp_month" readonly="readonly" type="text" placeholder=" " autocomplete="on" aria-readonly="false">

Sam Luther Sam Luther · Accepted Answer · 2020-06-16T21:19:28

I guess a v-select is not a select.

I don't know if this is the correct way, but this is what I ended up doing.

cy.get('[data-cy=exp_month]').click({force: true})
cy.contains('div', '01').parent().parent('a').click()

How to select a (Vue) v-select option with Cypress?

1 Answers