Cypress - cy.click() does not click on the value in the select2 drop down

Question

I have a dropdown which has select2 class. On clicking the arrow in drop down, I get below code activated in DOM which has the values Reason1 and Reason2 in the dropdown. I want to iterate on the available values and select the desired option.

Using each function, I am able to itearte on the array and get the available values, but I am unable to perform cy.click() on the same to get the value selected. I am not getting any error and code is running fine but the click in not happening (neither on div , li nor span tag)

`<ul class="select2-results">
  <li class="select2-results-dept-0 select2-result select2-result-selectable">
     <div class="select2-result-label">
       <span class="select2-match"></span>
        Reason1
     </div>
 </li>
   <li class="select2-results-dept-0 select2-result select2-result-selectable">
     <div class="select2-result-label">
       <span class="select2-match"></span>
       Reason2
     </div>
  </li>
</ul>`

Given below is my code

    cy.get('#select2-drop > .select2-results').find('li').each(($el,index,$list) => {  
    let option = $el.find('div').text()

    if(option=='Reason2')
    {                
      $el.find('div').click()
    }
 })

If I add $el.find('div').css('background-color','yellow') in the if condition, elements background color is getting changed to yellow but click is not happening.

Can anyone please help on this. Thanks!

Abd alrhman adel Abd alrhman adel · Accepted Answer · 2019-10-06T23:12:26

you can use these command if you want to select the second one

cy.get('#select2-drop > .select2-results')
    .type("{downarrow}")
    .type("{downarrow}")
    .type("{enter}")

Cypress - cy.click() does not click on the value in the select2 drop down

1 Answers