How to Iterate Over Elements and Work with Indexes in Cypress

To iterate over elements in Cypress and get their indexes, you want to use the each command, which accepts a callback function with three different arguments, including the index as well:

cy.get('menu li').each((element, index, list) => {
    // Returns the current li element
    expect(Cypress.$(element)).to.be.visible;

    // Returns the index of the loop
    expect(index).to.be.greaterThan(-1);

    // Returns the elements from the cy.get command
    expect(list).to.have.length(3);
});

In order, these are:

• element: The current (in this case li) element in the list
• index: The index of the loop
• list: The element itself that has been selected with cy.get, in this case, an array of li

Note that in order to use Cypress commands on the element, you need to wrap it with cy.wrap. Or if you need to use jQuery functions on it, then you can use Cypress.$:

cy.wrap(element).click();  // wrap element with Cypress
Cypress.$(element).text(); // wrap element with jQuery

Want to learn Cypress from end to end? Check out my Cypress course on Educative where I cover everything:

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• Documentation for the each command