Cypress - cy.click () не нажимает на значение в выпадающем списке select2

Question

У меня есть раскрывающийся список, в котором есть класс select2. При нажатии на стрелку в выпадающем списке я получаю код, активированный в DOM, который имеет значения Reason1 и Reason2 в раскрывающемся списке. Я хочу перебрать доступные значения и выбрать желаемую опцию.

Используя каждую функцию, я могу разместить ее в массиве и получить доступные значения, но не могу выполнить cy.click () длято же самое, чтобы получить выбранное значение. Я не получаю никакой ошибки, и код работает нормально, но щелчок не происходит (ни по тегу div, li, ни по тегу span)

`<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>`

Ниже приведен мой код

    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()
    }
 })

Если я добавлю $el.find('div').css('background-color','yellow') в условие if, цвет фона элементов изменится на желтый, но щелчка не происходит.

Может кто-нибудь, пожалуйста, помогите в этом. Спасибо!

Answer 1

Вы можете использовать эти команды, если хотите выбрать вторую

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