Cypress: Can't break each loop early by returning false

[dugajean]

Current behavior:

When running an .each loop and attempting to break the loop by doing return false;, Cypress doesn't stop the loop, but instead explodes with:

CypressError: cy.then() failed because you are mixing up async and sync code.

In your callback function you invoked 1 or more cy commands but then returned a synchronous value.

Cypress commands are asynchronous and it doesn't make sense to queue cy commands and yet return a synchronous value.

You likely forgot to properly chain the cy commands using another cy.then().

The value you synchronously returned was: 'false'

Desired behavior:

Cypress should break the loop when returning false from an .each loop.

Steps to reproduce: (app code and test code)

1. Do a get + find, then loop through each of them with .each
2. return false at some arbitrary location, preferably inside an if statement to properly copy my situation
3. Get the error above

Versions

• Cypress: 3.5.0
• Node: 12.13.0
• Chrome

[jennifer-shehane]

.each() does exit when passed false as documented. The below example exits the each loop on the 1 index.

  it('.each() - iterate over an array of elements', () => {
    cy.visit('https://example.cypress.io/commands/connectors')
    cy.get('.connectors-each-ul>li')
      .each(($el, index, $list) => {
        console.log(index)
        if (index === 1) {
          return false
        }
      })
  })

The error you are receiving is because you are mixing async and sync code, as explained in the error message with the cy.wait() inside of an if statement. We discourage conditional testing in this way due to the way which you can read more about here. https://on.cypress.io/conditional-testing

[chkashif167]

   cy.get('div.author-name')
    .each(($el, index, $list) => {
      var $name = $el.text();
      // cy.log($name);
       if ($name !== ' KashifN4') {
        cy.get($el).closest('partie-feed-item').find('button.btn.btn-menu > img').click() 
        return false;
      }

it shows this error

CypressError: cy.then() failed because you are mixing up async and sync code.

In your callback function you invoked 1 or more cy commands but then returned a synchronous value.

Cypress commands are asynchronous and it doesn't make sense to queue cy commands and yet return a synchronous value.

You likely forgot to properly chain the cy commands using another cy.then().

The value you synchronously returned was: 'false'

[jennifer-shehane]

@chkashif167 The issue with your code is mixing the below 2 lines of code together. The return false (syncronous) will run before the cypress lines (asynchronous) run, since Cypress is async. The warning is correct in that the code you wrote will not run as expected.

cy.get($el).closest('partie-feed-item').find('button.btn.btn-menu > img').click() 
return false;

Please read the full introduction guide: https://on.cypress.io/introduction-to-cypress#Commands-Are-Asynchronous

[chkashif167]

@jennifer-shehane you mean i dont need to use each and only below code will fulfill my requirements?
cy.get($el).closest('partie-feed-item').find('button.btn.btn-menu > img').click() return false;

[anthonychernenko]

@jennifer-shehane what should we do if need to run some async code inside .each and immediately break (like here https://github.com/cypress-io/cypress/issues/5485#issuecomment-562545976)?

[jennifer-shehane]

@chkashif167 @anthonychernenko Issues in our GitHub repo are reserved for potential bugs or feature requests.

We recommend questions relating to how to use Cypress be asked in our community chat. Also try searching our existing GitHub issues, reading through our documentation, or searching Stack Overflow for relevant answers.

[begli80]

@jennifer-shehane What is the point of below if I am not able to perform any operations in my if block and only then break out of loop based on the condition.:

it('.each() - iterate over an array of elements', () => {
    cy.visit('https://example.cypress.io/commands/connectors')
    cy.get('.connectors-each-ul>li')
      .each(($el, index, $list) => {
        console.log(index)
        if (index === 1) {
          return false
        }
      })
  })

I have got the similar situation like chkashif167 below , where Im trying to break out of the each loop only after some operation based on the condition.But getting message :'cy.then() failed because you are mixing up async and sync code.

cy.get('.checkbox').each(($el, index, $list)=>{
        let checkBox=$el.prop('checked')
        if(checkBox&&index===0)
        {
            email.getPharmacyHealthOptionsPhone().eq(index).uncheck()
            email.getPharmacyHealthOptionsPhone().eq(1).check()  
            return false  
        }
})

So what is the workaround ?