Using for loop and if else in cypress

Below is a technical solution, but first is want to explain what I believe is a better solution.

Adding to @dwelle comment, it seems like what you're trying to do is not a best-practice in terms of the the design of the test. Tests should be designed to be deterministic and should control all relevant inputs that may affect the expected result.

More specifically, is this text something that a real user should see and use, or only something that the developers put for debugging or testing purposes? If it's for a real user, then what determines if it should appear or not? (Is it purely random?, If so, see below) if it's for testing or debugging purposes, talk to the developers and come up with a better solution in which you can control whether this text appears or not directly. If it's something that the user should see and it's not random, then consider what conditions should be met in order for the text to appear, and design the test in a way that makes this condition true, either by controlling the actual necessary preconditions or by using mocks to simulate that condition. Again, I recommend that you consult with the developers to help you find the best approach.

In case it is "purely" random, then ask the developers to provide a way for you to specify the seed of the random generator, and then you'll be able to control it too.

As promised, in case you still want the technical solution for the specific problem, without redesigning the test, then there trick is to use recursion. Something like this:

function getEnvironment() {
   function getEnvironmentInternal(retires) {
        if (retires == 0)
            throw "text didn't appear after the specified retires";
        return ele.text().then(text => {
            if(text)
                return cy.wrap(text);

           cy.wait(10000);
           cy.reload();
           return getEnvironmentInternal(retires-1);
        });
    )};

    return getEnvironmentInternal(10);
}

// usage:
getEnvironment().then(text => {
    // do something with text...
}

I wrote my own helper command for checking repeatedly until condition is fulfilled.

/**
 * Waits until call to cb() resolves to something truthy.
 *
 * @param message {string} Error message on timeout
 * @param cb {() => Cypress Command "promise"}
 *   Callback for checking if condition is met should return cypress command cy.xxxxxx.then()
 *   which resolves to undefined if polling should continue. Throwing an error aborts before
 *   waiting for timeout to complete.
 */
Cypress.Commands.add('waitFor', (message, cb, errorReporterCb = null, timeoutMs = 5000) => {
  const startTime = new Date().getTime();
  const giveupTime = startTime + timeoutMs;
  const startTimeout = 5;
  const ctx = {};

  const errorReporter =
    errorReporterCb ||
    (err => {
      throw err;
    });

  function checkCb(timeout) {
    const currentTime = new Date().getTime();

    if (currentTime > giveupTime) {
      const err = new Error(`Timeout while waiting for (${currentTime - startTime}ms): ${message}`);
      errorReporter(err, ctx);
    } else {
      cy.wait(timeout);

      return cb(ctx).then(result => {
        if (result === undefined || result === false) {
          return checkCb(timeout * 2); // always wait twice as long as the last time
        } else {
          return result;
        }
      });
    }
  }

  return checkCb(startTimeout);
});

With this you can implement polling loop like:

cy.waitFor(
  'reload page until #ele contain text', 
  () => cy.reload().get("#ele").then(ele => ele.text() ? ele.text() : undefined),
  null, 60000);

I would say using a for loop for something like this and refreshing is an anti-pattern. It looks like you're waiting for the text to show up in the element, not the element itself.

If so, can you stub the response to the server so it comes back right away? If that doesn't work, just do a cy.wait('@<whatever you aliased your response as>') until the call is completed

So it seems you just want to wait that element is appeared and then take text value. So something like cy.get('#ele', {timeout: 60000}).should('exist').invoke('text').then(text => ...work with text value)

Assertions in cypress have built-in retry mechanism, so if it fails before timeout expire - it will retry previous command.

You can't use while/for loops with cypress because of the async nature of cypress. Cypress doesn't wait for everything to complete in the loop before starting the loop again. You can however do recursive functions instead and that waits for everything to complete before it hits the method/function again.

Here is a simple example to explain this. You could check to see if a button is visible, if it is visible you click it, then check again to see if it is still visible, and if it is visible you click it again, but if it isn't visible it won't click it. This will repeat, the button will continue to be clicked until the button is no longer visible. Basically the method/function is called over and over until the conditional is no longer met, which accomplishes the same thing as a loop, but actually works with cypress.

clickVisibleButton = () => {
        cy.get( 'body' ).then( $mainContainer => {
            const isVisible = $mainContainer.find( '#idOfElement' ).is( ':visible' );
            if ( isVisible ) {
                cy.get( '#idOfElement' ).click();
                this.clickVisibleButton();
            }
        } );
    }

Then obviously call the this.clickVisibleButton() in your test. I'm using typescript and this method is setup in a class, but you could do this as a regular function as well.