Using Cypress and Vue.js, how can I find and select an element in a v-select dropdown?

Question

This is my code:

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

Punctuality

Perhaps this 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. – Rhodolite

Have you tried this cy.get("[data-test=test]").select("valueNameGoesHere");? – Melanoid

Answer 1

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.

Tillis

I have a problem with this, when I have a v-select right after the first v-select – Teach

@Teach you can probably target the right v-select with a more specific selector. – Tillis

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 github.com/cypress-io/cypress/issues/6666) – Bolt

Also, this will fail if you have too many items on the select, since Vuetify only renders the visible ones. – Inconsequent

The list element is found with .v-list-item__content in my case as @entorb suggests – Kashmiri

Answer 2

Try:

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

Enchondroma

Answer 3

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!

Skilful

Answer 4

I needed a slight modification of @benoit-blanchon's solution: .v-list-item__content instead of .v-menu__content:

cy.get('#my-select-identifier').parent().click()
cy.get(".v-list-item__content").contains("My Option").click()

Note: The last line of the solution by @robert-pop is a bit dangerous, since it performs a full page search, that can lead to problems if "My Option" appears somewhere else on the page.

Punctuation

Answer 5

This might be useful if you are using Vuetify.

v-select with normal dropdown:

cy.get('[data-test="test"]').click(); 
cy.get('.v-list-item').contains('option').click(); 

v-select with checkboxes in the dropdown:

cy.get('[data-test="test"]').click(); 
cy.get('[type="checkbox"]').first().check(); // check the first option

Use cy.get('[type="checkbox"]').check() if you want to check all the options.

Julie