Unable to select values in dynamic dropdown in cypress

I am trying to select a value from the dynamic dropdown named "Country Code" on the following website This one (redacted)

Here by default one value is shown +1 and rest are hidden.

First I tried, cy.get('#country_code').select('+34') but it did not work .

Then I tried, cy.get('#country_code').eq(9).click() even this did not work.

Next I tried cy.get('#country_code').contains('+34').click() this failed as well.

Please also give me suggestions about how to select the menu without typing the data into the field.

This will not help me understand the root concept behind its implementation, because I had a similar problem with static dropdowns as well

I could not find a blog that deals with this kind of problem .

Change cy.get('#country_code').contains('+34') to cy.contains('+34') and it works!

The options are added to the page only after the dropdown is opened, in a "portal" (actually a Vuetify v-overlay-container) at the bottom of the page.

Using cy.contains('+34') will find it anywhere on the page, provided the text is unique (it is on this page!)

You need to .click({force: true}) because the item is below the bottom of the list and Cypress cannot scroll it into view (.scrollIntoView() isn't working).

cy.visit('https://pvg-test.instaging.net/register')

cy.get('#country_code').click()

cy.contains('+34')
  .click({force: true})

cy.get('#country_code')
  .should('have.value', '+34')

Why did cy.select() not work?

cy.select() selects an <option> tag that is underneath a <select> tag. In this instance, the website you are using does not have either of those.

Why did cy.get().eq().click() not work?

cy.get() will yield one or more elements that match the selector passed in. .eq() allows you to select the n+1th item yielded by cy.get() or another Cypress query. As there is only one item that has the id of country_code, trying to select the 10th item will fail.

Why did cy.get().contains().click() not work?

cy.contains() searches underneath the yielded element from the preceding Cypress query. If the element you are trying to find is not underneath that parent, then .contains() will not work.

So, what will actually work without typing?

The list items that appear once clicking on the #country_code element have a class of v-list-item. (I was able to see this by having Cypress click #country_code, and using the runner to see the snapshot of the website in this state.) So, we will just have to click the #country_code field, then find the .v-list-item element that has the text we want, and click that element.

cy.get('#country_code').click() // open dropdown window
cy.get('.v-list-item') // get list of options that have appeared
  .contains('+34') // find element with `+34` text
  .click()