6

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>
Manuel Abascal
  • 5,616
  • 5
  • 35
  • 68
Mr.Oxmanee
  • 73
  • 1
  • 1
  • 4
  • 2
    Perhaps this [Using cypress with vuetify](https://stackoverflow.com/questions/53610949/using-cypress-with-vuetify) helps? It pertains to Vuetify autocomplete, but involves selecting. Try something similar, if it doesn't work post the code you tried above and someone will work through it. –  Oct 09 '19 at 21:47
  • 1
    Have you tried this `cy.get("[data-test=test]").select("valueNameGoesHere");`? – Manuel Abascal Jan 12 '20 at 07:25

3 Answers3

18

Assuming the item you want to select has the text "My Option", you can do:

cy.get("[data-test=test]").parent().click()
cy.get(".v-menu__content").contains("My Option").click()

The first line opens the dropdown, and the second selects the item.

Benoit Blanchon
  • 13,364
  • 4
  • 73
  • 81
  • I have a problem with this, when I have a v-select right after the first v-select – farahm Jan 31 '21 at 17:28
  • 1
    @farahm you can probably target the right `v-select` with a more specific selector. – Benoit Blanchon Feb 01 '21 at 13:27
  • One note - this will fail in one specific scenario: if you invoke it from inside a `within()` block. To get past this, you can use `Cypress.$()` (see https://github.com/cypress-io/cypress/issues/6666) – Vivek Kodira Feb 10 '21 at 05:42
  • Also, this will fail if you have too many items on the select, since Vuetify only renders the visible ones. – Haroldo_OK Jun 28 '21 at 17:18
4

Try: 

cy.get('[data-test=test]').type('valueNameGoesHere{enter}', {force: true})
realr
  • 3,652
  • 6
  • 23
  • 34
Jesse Caruthers Jr
  • 49
  • 3
1

We had the same issue with the respective the component. The fix we found is the following:

cy.get('#selectID').click().trigger('mousedown'); // this makes sure the select will stay open

2 options here, depends on if you have a wrapper for the options: cy.get('#selectOptionsWrapper').contains('yourOption').click();

If you don't have a wrapper then just use contains:

cy.contains('yourOption').click();

Hope this will help others. Cheers!

Robert Pop
  • 56
  • 2