cy.reload() in Cypress

Introduction

We use cy.reload() to refresh the current web page during a test. This helps check if the page loads correctly again or if changes persist after reloading.

You want to test if a form submission keeps data after refreshing.

You need to verify that a page shows updated content after reload.

You want to simulate a user pressing the browser refresh button.

You want to clear temporary page states by reloading.

You want to test if error messages disappear after a reload.

Syntax

Cypress

cy.reload(options?)

The options parameter is optional and can control how the reload happens.

By default, cy.reload() reloads the page without forcing the browser to fetch from the server cache.

Examples

Reloads the current page normally.

Cypress

cy.reload()

Reloads the page and forces the browser to fetch fresh content from the server, ignoring cache.

Cypress

cy.reload(true)

Reloads the page and waits up to 10 seconds for the reload to complete.

Cypress

cy.reload({ timeout: 10000 })

Sample Program

This test visits a page, checks the title, reloads the page, and checks the title again to confirm the reload worked.

Cypress

describe('Reload page test', () => {
  it('should reload the page and keep the title', () => {
    cy.visit('https://example.cypress.io')
    cy.title().should('include', 'Kitchen Sink')
    cy.reload()
    cy.title().should('include', 'Kitchen Sink')
  })
})

Important Notes

Reloading can help test if your app handles page refreshes gracefully.

Use cy.reload(true) to force a full reload from the server, useful when testing cache issues.

Reloading resets the page state, so any temporary data in memory will be lost.

Summary

cy.reload() refreshes the current page during a test.

It helps verify page behavior after a user refreshes the browser.

You can control reload behavior with optional parameters.

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