cy.reload() in Cypress - Test Execution Trace

Test Overview

This test verifies that the page reloads correctly using cy.reload() and that a specific element is visible after the reload.

Test Code - Cypress

Cypress

describe('Page reload test', () => {
  it('Reloads the page and checks element visibility', () => {
    cy.visit('https://example.cypress.io')
    cy.get('h1').should('be.visible')
    cy.reload()
    cy.get('h1').should('be.visible')
  })
})

Execution Trace - 5 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner initialized, no browser actions yet	—	PASS
2	Browser opens and navigates to 'https://example.cypress.io'	Page loads with visible <h1> element	—	PASS
3	Finds <h1> element	<h1> element is present and visible on the page	Check that <h1> is visible	PASS
4	Calls cy.reload() to reload the page	Page reloads, content refreshes	—	PASS
5	Finds <h1> element again after reload	<h1> element is present and visible after reload	Check that <h1> is visible after reload	PASS

Failure Scenario

Failing Condition: The <h1> element is not found or not visible after the page reloads

Execution Trace Quiz - 3 Questions

What does cy.reload() do in this test?

A Reloads the current page in the browser

B Navigates to a new URL

C Clicks on the <h1> element

D Waits for the page to load without reloading

Key Result

Always verify key page elements after a reload to ensure the page refreshed correctly and content is intact.

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