How to select an element from a v-select dropdown menu in Cypress

Question

I want to get all the elements in a v-select dropdown menu and put them in to a list. To do this I should locate the dropdown menu field firstly. My questions are below:

1.When I want to locate the dropdown menu it can't be found in Cypress but when I locate it in the web page in the filter elements field then it can be located. So how can I locate the dropdown menu? I can share the screenshot below:

I can find it in the website filter elements filed as the picture

but it failed to dind it in Cypress And I used force click in cypress as the dropdown menu field is non-visible.

2. I can't locate the li elements under the ul which contains the elements that I want to collect in a list. I can share the screenshots about the elements:

When I don't click on the options in the dropdown list then the li elements under the ul are not visible

when I click the dropdown menu field and the options listed down, then I can see the li elements under the ul

[According to the picture I tried to find out the dropdown menu section and force click it and then try to find out the elements that I want] (https://i.stack.imgur.com/7hzdM.jpg)

cy.get('#vs14__listbox').click({force:true}).trigger('mousedown');
        cy.get('#vs14__listbox>li').contains('Ankara').click();

I tried this code but it doesn't work at all. How can I get the li elements under the ul above?

Answer 1

There's not enough detail in the question to say why you can't find the <ul> listbox.

But working with a general example it's easy enough to get the options. This example test may help you overcome some issues.

cy.visit('https://vue-select.org/')

cy.get('.v-select')     // this is the dropdown
  .find('.vs__actions') // this is the button on right
  .click()

cy.get('.v-select')
  .find('li')
  .as('options')      // get all options elements in a variable

cy.get('@options')
  .should('have.length', 244)  // test option list length

cy.get('@options')
  .then(options => [...options].map(option => option.innerText))
  .then(texts => {
    // test option list texts
    expect(texts.slice(0,3)).to.deep.eq(['Afghanistan','Åland Islands','Albania'])
  })