cy.reload() in Cypress - Build an Automation Script

Verify page reload functionality using cy.reload()

Preconditions (2)

Step 1: Open the web page at 'http://localhost:3000'

Step 2: Locate the paragraph with id 'status-text' and note its initial text

Step 3: Click the button with id 'change-text' to change the paragraph text

Step 4: Verify the paragraph text has changed

Step 5: Reload the page using browser reload

Step 6: Verify the paragraph text has reverted to the initial text after reload

✅ Expected Result: After reload, the paragraph text resets to its original value, confirming the page reload works correctly

Automation Requirements - Cypress

Assertions Needed:

Verify initial paragraph text before button click

Verify paragraph text changes after button click

Verify paragraph text resets to initial text after cy.reload()

Best Practices:

Use cy.get() with id selectors for element targeting

Use cy.reload() to reload the page

Use assertions with .should() for verifying text content

Avoid hardcoded waits; rely on Cypress automatic waits

Automated Solution

Cypress

describe('Page reload test with cy.reload()', () => {
  it('should reload the page and reset paragraph text', () => {
    cy.visit('http://localhost:3000');

    // Get initial text
    cy.get('#status-text').invoke('text').as('initialText');

    // Click button to change text
    cy.get('#change-text').click();

    // Verify text changed
    cy.get('#status-text').should(($p) => {
      expect($p.text()).to.not.equal(Cypress.env('initialText'));
    });

    // Reload the page
    cy.reload();

    // Verify text reset to initial
    cy.get('@initialText').then((initialText) => {
      cy.get('#status-text').should('have.text', initialText);
    });
  });
});

This test visits the page, stores the initial paragraph text, clicks a button to change the text, and verifies the change. Then it reloads the page using cy.reload() and verifies the paragraph text resets to the original.

We use cy.get() with id selectors for clarity and reliability. The invoke('text') command captures the initial text and saves it as an alias for later comparison. Assertions use .should() with callback functions to check text changes. cy.reload() reloads the page without needing a full visit again. This approach avoids hardcoded waits and uses Cypress's automatic waiting for elements.

Common Mistakes - 3 Pitfalls

Using hardcoded waits like cy.wait(5000) before reload

{'mistake': "Using incorrect selectors like cy.get('.button') when id is available", 'why_bad': 'Class selectors can be less specific and may select multiple elements, causing flaky tests', 'correct_approach': "Use unique id selectors like cy.get('#change-text') for precise targeting"}

{'mistake': 'Not storing initial text before clicking the button', 'why_bad': 'Cannot verify if text resets after reload without knowing the original text', 'correct_approach': "Use cy.get().invoke('text').as() to save initial text for later assertions"}

Bonus Challenge

Now add data-driven testing with 3 different buttons that change different paragraph texts and verify reload resets each correctly

Show Hint