How to Use cy.reload in Cypress for Page Reload Testing

Use cy.reload() in Cypress to reload the current page during a test. It helps verify page behavior after a refresh and can accept options like { forceReload: true } to force reload without cache.

Syntax

The basic syntax of cy.reload() reloads the current page. You can optionally pass { forceReload: true } to reload the page without using the browser cache.

• cy.reload(): Reloads the page normally.
• cy.reload(true) or cy.reload({ forceReload: true }): Reloads the page bypassing cache.

javascript

cy.reload()
cy.reload(true)
cy.reload({ forceReload: true })

Example

This example shows how to visit a page, reload it, and check that the page title is correct after reload.

javascript

describe('Page reload test', () => {
  it('reloads the page and verifies title', () => {
    cy.visit('https://example.cypress.io')
    cy.reload()
    cy.title().should('include', 'Cypress')
  })
})

Output

Test passes if the page reloads and the title includes 'Cypress'.

Common Pitfalls

Common mistakes when using cy.reload() include:

• Not waiting for the page to fully reload before asserting, which can cause flaky tests.
• Using cy.reload() without understanding cache behavior; use { forceReload: true } to avoid stale content.
• Reloading pages that cause side effects or reset test state unexpectedly.

Always chain assertions after reload to ensure the page is ready.

javascript

/* Wrong: Asserting immediately after reload without waiting */
cy.reload()
cy.get('h1').should('contain', 'Welcome') // May fail if page not loaded yet

/* Right: Chain assertions to wait for reload completion */
cy.reload().get('h1').should('contain', 'Welcome')

Quick Reference

Usage	Description
cy.reload()	Reloads the current page using browser cache
cy.reload(true)	Reloads the page bypassing browser cache
cy.reload({ forceReload: true })	Same as above, forces reload without cache
cy.reload().then(...)	Waits for reload to complete before next commands

Key Takeaways

Use cy.reload() to refresh the current page during Cypress tests.

Pass { forceReload: true } to reload without using browser cache.

Always chain assertions after reload to avoid flaky tests.

Avoid reloading pages that reset important test state unexpectedly.

cy.reload() helps verify page behavior after a refresh.