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.