cy.select() can only be called on a <select>. Your subject is a: <div class="col-md-6">...</div>

user_16452674 0
Viewed 1988

I am trying to select a value from multiselect dropdown via Cypress and using this

 cy.get(':nth-child(7) > .row > :nth-child(1)')
 .select('The Watermark at Cherry Hills', { force: true })
 .invoke('val')
 .should('0', 'The Watermark at Cherry Hills')

and failing it. Anyone can guide me how to handle this ?

<div data-vv-name="Community 1" class="">
   <div class="ui fluid search selection dropdown form-control">
      <i class="dropdown icon"></i><input autocomplete="off" tabindex="0" name="" class="search">
      <div data-vss-custom-attr="" class="text default">Select community/s
      </div>
      <div tabindex="-1" class="menu hidden" style="display: none;">
         <div data-vss-custom-attr="" class="item">
            The Watermark at Cherry Hills
         </div>
         <div data-vss-custom-attr="" class="item">
            The Fountains at Albemarle
         </div>
         <div data-vss-custom-attr="" class="item">
            The Sapphire Valley
         </div>
      </div>
   </div>
</div>
cypress automated-tests testing automation
1 Answers

First, you have to do a click() operation on the dropdown to expand it. Now using each() you can loop through all the elements of the dropdown, and using an if condition click the one you want to select.

cy.get('.search.selection.dropdown').click() 
cy.get('div.item').each(($ele) => {
    if ($ele.text() == "The Watermark at Cherry Hills") {
        cy.wrap($ele).click()
    }
})
user_45712710
Related