Im unable to switch values in a dropdown in cypress. The dropdown is not select type

Question

In my scenario i need to switch to the values available in the dropdown and verify the results based on the selection.I have 'In-Network' and 'Out-of-Network' values in the dropdown. By default one value will be shown and another one is hidden. This dropdown is not a select type. So when i try,

cy.get('#react-select-dropdown-value-value').select('Out-of-Network'); - Script fails and the error says, the element is not select type. Then tried, cy.get('#react-select-dropdown-value-value').eq(0).click(); - it clicks the dropdown, and doesnt click on the value intended. i have tried click({multiple: true}). but didnt work. force:true, is not clicking either.

cy.get('#react-select-dropdown-value-value').contains(Out-of-Network').click(); - did not work, says the element is not found

cy.get('#dropdown-value') .should('be.visible') .eq(0) .contains('Out-of-Network') .click(); CypressError: Timed out retrying: expected '' to be 'visible'

This element '' is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: 'hidden', 'scroll' or 'auto'

Mr. J. Mr. J. · Accepted Answer · 2019-10-02T07:24:48

The react-select-dropdown is a bit special indeed. What we do to select a value from a react-select-dropdown is the following:

cy.get('[id*="start-shift-floats"]').click()
cy.get('[id^="react-select-"]')
    .contains('Out-of-Network')
    .click()

What you should know about this: cy.get('[id*="start-shift-floats"]') is the actual get() to open up the dropdown. So it will be named different in your application. cy.get('[id^="react-select-"]') is the usual get() for the options in a react-select-dropdown. By checking it which contains 'Out-of-Network', we can let Cypress click that specific option.

Im unable to switch values in a dropdown in cypress. The dropdown is not select type

1 Answers