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

Practice

1. What is the primary purpose of cy.reload() in Cypress testing?

easy

A. To navigate to a new URL

B. To wait for an element to appear

C. To submit a form automatically

D. To refresh the current page during a test

Solution

1. Step 1: Understand the function of cy.reload()

   cy.reload() is used to refresh the current page in a Cypress test, simulating a browser refresh.

2. Step 2: Compare with other options

   Options A, C, and D describe different Cypress commands unrelated to page reload.

3. Final Answer:

   To refresh the current page during a test -> Option D

4. Quick Check:

   cy.reload() refreshes page = B [OK]

Hint: Remember: reload means refresh page [OK]

Common Mistakes:

• Confusing reload with navigation commands
• Thinking reload submits forms
• Assuming reload waits for elements

2. Which of the following is the correct syntax to reload the page without using cache in Cypress?

easy

A. cy.reload(false)

B. cy.reload(true)

C. cy.reload(cache=false)

D. cy.reload({cache: false})

Solution

1. Step 1: Recall the parameter for cy.reload()

   The method accepts a boolean parameter where true forces reload without cache.

2. Step 2: Check syntax correctness

   Only cy.reload(true) correctly uses the boolean parameter. Options C and D use incorrect syntax, and B reloads with cache.

3. Final Answer:

   cy.reload(true) -> Option B

4. Quick Check:

   Reload without cache = cy.reload(true) [OK]

Hint: Use true inside reload() to skip cache [OK]

Common Mistakes:

• Using object syntax instead of boolean
• Passing false to reload without cache
• Confusing parameter names

3. Consider this Cypress test snippet:

cy.visit('/home')
cy.get('#refresh-btn').click()
cy.reload()
cy.get('.welcome-message').should('be.visible')

What is the expected behavior after cy.reload() is called?

medium

A. The page reloads and the test checks if '.welcome-message' is visible

B. The page reloads but the test fails because '.welcome-message' disappears

C. The page does not reload and the test checks the button click only

D. The test throws a syntax error at cy.reload()

Solution

1. Step 1: Understand the test flow

   The test visits '/home', clicks a button, then reloads the page with cy.reload().

2. Step 2: Analyze the assertion after reload

   After reload, the test checks if '.welcome-message' is visible. Assuming the page loads correctly, this element should be visible.

3. Final Answer:

   The page reloads and the test checks if '.welcome-message' is visible -> Option A

4. Quick Check:

   Reload refreshes page, then check element visibility = D [OK]

Hint: Reload refreshes page; elements reappear if present [OK]

Common Mistakes:

• Assuming reload removes elements permanently
• Thinking reload causes syntax errors
• Ignoring page reload effect on elements

4. You wrote this Cypress code:

cy.reload(cache: true)

But the test fails with a syntax error. What is the problem?

medium

A. cache: true is not a valid option in Cypress

B. cy.reload() does not accept any parameters

C. Incorrect parameter syntax; should be a boolean without key

D. cy.reload() must be chained with .then()

Solution

1. Step 1: Check the parameter format for cy.reload()

   The method accepts a single boolean parameter without a key name.

2. Step 2: Identify the syntax error cause

   Using cache: true inside parentheses is invalid syntax in JavaScript function calls.

3. Final Answer:

   Incorrect parameter syntax; should be a boolean without key -> Option C

4. Quick Check:

   Use boolean parameter only, no keys = A [OK]

Hint: Pass true or false directly, no keys [OK]

Common Mistakes:

• Using object syntax instead of boolean
• Thinking reload has no parameters
• Adding unnecessary chaining

5. You want to test that after reloading the page without cache, a specific cookie named 'session_id' is cleared. Which Cypress code snippet correctly achieves this?

hard

A. cy.reload(true).getCookie('session_id').should('not.exist')

B. cy.reload(false).getCookie('session_id').should('not.exist')

C. cy.reload().getCookie('session_id').should('exist')

D. cy.reload({cache: false}).getCookie('session_id').should('not.exist')

Solution

1. Step 1: Reload page without cache

   Use cy.reload(true) to force reload without cache, which can clear cookies.

2. Step 2: Check cookie existence after reload

   Use getCookie('session_id').should('not.exist') to assert the cookie is cleared.

3. Final Answer:

   cy.reload(true).getCookie('session_id').should('not.exist') -> Option A

4. Quick Check:

   Reload no cache + check cookie cleared = C [OK]

Hint: Use true in reload() to clear cache and cookies [OK]

Common Mistakes:

• Using false to reload without cache
• Expecting cookie to exist after reload without cache
• Passing object instead of boolean to reload