1

Is it possible to break out of nested .each loops from an if-else statement?

I'd like to:

  1. Get the text from each element
  2. Check if it is included in an existing string
  3. As soon as a substring that isn't included in the original string is found, click on the element with said substring
  4. Exit the loop

The return false doesn't trigger -- right now the test fails because after the item is clicked on, the loop is still running and cannot find the next elements of each, since it's now on a new page. Would it be possible to fix this, or would it be best to use a different approach?

 it("Test", () => {
    cy.get('[data-testid="item"]').each(($el, index) => {
        cy.wrap($el).children().eq(1).each(($el) => {
            itemText = $el.text()
            cy.log(itemText)
            itemList = "list text here"
                if (itemList.includes(itemText)) {
                    cy.log("Skip this item")
                }
                else {
                    cy.log("Proceed with this item")
                    cy.get('[data-testid="item"]').eq(index).click()
                    itemFound = true;
                    return false;
                }
            })
        if (itemFound) return false;
       });
  });
user22266624
  • 25
  • 2

2 Answers2

2

You can do it with removal of cy.wrap(). This allows the code inside .each() to be synchronous, and you can return false to exit early.

Since the .eq(1) only returns one item, there is no need to .each() after it, there-by removing your second problem.

Since .click() is an action, it will have side-effects and possibly make the DOM re-render, so you must perform the click() outside of (after) the each().

const itemList = "list text here"
let foundIndex;

cy.get('[data-testid="item"]')
  .each(($el, index) => {
    const itemText = $el.children().eq(1).text()
    if (itemList.includes(itemText)) {
      cy.log("Skip this item")
    } else {
      cy.log("This item is the one, save the index")
      foundIndex = index
      return false               // now exit
    }
  })
  .then(() => {
    cy.get('[data-testid="item"]').eq(foundIndex).click()
  })
Lola Ichingbola
  • 3,035
  • 3
  • 16
2

Replace .each() with .filter() to select just the item you want to click.

Internally .filter() is looping over the item elements, and only returning those that are matching the return criteria.

cy.get('[data-testid="item"]')
  .filter((index,el) => {
    const itemText = Cypress.$(el).children().eq(1).text()
    return !itemList.includes(itemText)
  })
  .first()  // in case multiple meet the condition
  .click()

or use .not() which is the opposite of .filter()

cy.get('[data-testid="item"]')
  .not((index,el) => {
    const itemText = Cypress.$(el).children().eq(1).text()
    return itemList.includes(itemText)
  })
  .first() 
  .click()
Emerson
  • 159
  • 5