How to find element and select by cypress.io with vue.js v-select?

问题

Sorry,I need help about find element v-select and select option by cypress.io.

<v-select
      label="label"
      v-model="ccRcode"
      ref="ccRcode"
      :items="getData"
      item-text="descWithCode"
      item-value="code"
      value="{ ccRcode }"
      data-test='test'
></v-select>

回答1:

Since you are using Vuetify's select, their documentation should be the first stop. Check the references below.

Basically, they add data-cy data attributes to make it easy to target elements. So in your example:

<v-select
      label="label"
      v-model="ccRcode"
      ref="ccRcode"
      :items="getData"
      item-text="descWithCode"
      item-value="code"
      value="{ ccRcode }"
      data-cy='select-input'
></v-select>

And then in your test:

cy.get('[data-cy=select-input]').select('optionValue')

References:

• https://vuetifyjs.com/en/getting-started/unit-testing#e-2-e-tests
• https://docs.cypress.io/api/commands/select.html#Syntax

回答2:

Try:

cy.get('[data-test=test]').type('valueNameGoesHere{enter}', {force: true})

来源：https://stackoverflow.com/questions/58298675/how-to-find-element-and-select-by-cypress-io-with-vue-js-v-select