Cypress Test fails when doing each loop for a list

Question

I am having issues with using each loop for lists in cypress.

Website code:

<ul class="list" id="my-list">
  <li>
    <a class="btn-modal"> Text 1</a>
  </li>
  <li>
    <a class="btn-modal">Text 2 </a>
  </li>
  <li>
    <a class="btn-modal">Text 3 </a>
  </li>
</ul>

My test goes like this:

cy.get('[class="list"]')
  .find("li")
  .each((format, i = 0) => {
    const formats = ["Text1", "Text2", "Text3"];
    cy.wrap(format).should("contain", formats[i]);
    i++;
  });

However, it only works for the first item on the list. I did have a workaround though:

cy.get('[class="list"]')
  .find("li")
  .each((format, i = 0) => {
    const formats = ["Text1", "Text1", "Text2", "Text3"];
    cy.wrap(format).should("contain", formats[i]);
    i++;
  });

Answer 1

You don't need to initialize or increment the index. It defaults to 0 on the first iteration and will auto increment on each iteration.

See doc here

// move outside of loop
const formats = ['Text1','Text2','Text3']
cy.get('[class="list"]').find('li').each((format, i) => {
    cy.wrap(format).should('contain', formats[i])
    // i++ --> not needed and probably why it doesn't work as you expect
})

Answer 2

You should not change the value of i. It will increase automatically for each iteration. Thats probably the issue.

Answer 3

You can also invert the loop (but only if order is not important)

const formats = ['Text1','Text2','Text3']
cy.wrap(formats).each(format => {
  cy.contains('[class="list"] li a', format)
})