Each command in cypress is not iterating all elements in a drop down

Question

I am trying to iterate and click each element of this dropdown but some how my code is skipping the second element and working fine for all other elements.

cy.xpath('//*[@id="apimatic-widget"]/div/div/div[2]/div[1]/div/div[2]/ul').click()

                  cy.get('.rc-menu.rc-menu-sub.rc-menu-vertical').find('li').each(($ele)=>{
                   cy.xpath('//*[@id="apimatic-widget"]/div/div/div[2]/div[1]/div/div[2]/ul').click()
                    cy.wrap($ele).click()
                    cy.wait(2000)
                  })

in first step i am clicking on dropdown widget then in next step i am getting all the element in each, then in each every time i click on dorpdown widget to click on specific element. for second element it is wraping the correct element but clicking on first element.other than that its working fine for all the element.

Answer 1

It may be you just need to check that the item you just clicked is now the selected item.

It's possible the .each() loop is going too fast for the page changes. Adding a .should() assertion will pause the loop until each item selection is completed.

cy.get('#apimatic-widget li')
  .each($item => {
    cy.get('#apimatic-widget ul').click() 
    cy.wrap($item).click()

    // check the selected item has changed
    cy.get('#apimatic-widget li.rc-menu-item-selected')
      .should($selected => {
        expect($selected).to.eq($item)   // should be reference-equal
      })
  })

Answer 2

You can do something like this. This will go over the list elements and select it one by one.

cy.get('#apimatic-widget').click() //to open dorpdown
cy.get('li.rc-menu-item').its('length').as('len') //save the length in alias
cy.get('#apimatic-widget').click() //to close dorpdown
cy.get('@len').then((len) => {
  for (var i = 0; i < len; i++) {
    cy.get('#apimatic-widget').click()
    cy.get('li.rc-menu-item').eq(i).click()
  }
})