Cypress wait till text appear on page

Question

I need to wait till particular text is present in my page , if its not there i need to reload the page and retry [probably need to wait up to 3 mins]. i decided to use waitUntil plugin

 cy.waitUntil(
        () =>
    cy.get("tr").find("td").contains("mysampletext").reload(true),
        {
          verbose: true,
          errorMsg: "Campaign status failing to synchronize with clickhouse",
          timeout: 180000,
          interval: 30000,
        }
    );

Problem for me is , the contains method fails and exit with out reloading. Any other input to address this issue..? i wont be able to use any element as it is very dynamic

I have tried use different recursive method instead of waituntill and it was not success

Answer 1

I'm not convinced cy.waitUntil() adds a lot of value to modern Cypress (it was written a while ago).

But one thing Cypress does lack is performing an action like cy.reload() during timeout retries.

A recursive function should work for this problem

function waitUntilWithReload(selector, expectedText, interval, error, iteration = 0) {

  if (iteration > 100) {   // set an upper limit to stop infinite retry
    throw new Error(error)
  }

  const text = Cypress.$(selector).text();
  if (text.includes(expectedText) {
    return
  }

  cy.wait(interval)
  cy.reload().then(() => {
    waitForText(selector, expectedText, interval, iteration + 1) 
  }
}

waitUntilWithReload('tr td', 'mysampletext', 30_000, 'Campaign status failing')