How can I refresh the page unless the text is present using Cypress?

General Discussions
#1

I am trying to install cypress on an empty project. However, cypress is not installed in the package.js file and cypress is not included on the project. How can I make it work? I cannot install cypress as part of the development project, so i am trying to create a separate test automation project with cypress.

#2

If you want to wait for text to change on a page using Cypress, you can use jQuery.

Here’s an example:

cy.visit(...);
cy.wait(1000); // in case the page is initially slow to load

const text = Cypress.$('div').text();
if (text.trim().startsWith('Processing')) {
  cy.wait(1000);
  cy.reload();
}

To repeat this process until the text becomes ‘Success…’, you can use recursion:

function waitForText(attempt = 0) {
  if (attempt > 100) { // Choose a cutoff point to avoid infinite loops
    throw 'Failed';
  }

  cy.wait(1000);
  const text = Cypress.$('div').text();
  if (text.trim().startsWith('Processing')) {
    cy.reload();
    waitForText(attempt + 1);
  }
}

cy.visit(...);
waitForText();

This solution checks for ‘Processing’ text, reloads the page if found, and repeats the process until the text changes to ‘Success…’ or until it reaches a predefined attempt limit. Adjust the attempt limit based on your specific scenario.

#3

You can make use of contains() as well,

// Using contains() method to check for text
cy.visit(...);
cy.wait(1000);

// Utilizing the contains() method to directly check for 'Processing' text
// Note: This assumes 'div' is the correct selector for your use case
cy.contains('div', 'Processing').then(() => {
  cy.wait(1000);
  cy.reload();
});

In the above code, I have replaced the use of Cypress.$(‘div’).text() with cy.contains(‘div’, ‘Processing’) for a more concise approach.