beforeEach and afterEach hooks in Cypress - Test Execution Trace

Test Overview

This test suite uses beforeEach to visit the homepage before each test and afterEach to clear cookies after each test. It verifies the page title and the presence of a login button.

Test Code - Cypress

Cypress

describe('Homepage tests with hooks', () => {
  beforeEach(() => {
    cy.visit('https://example.cypress.io')
  })

  afterEach(() => {
    cy.clearCookies()
  })

  it('checks the page title', () => {
    cy.title().should('include', 'Kitchen Sink')
  })

  it('checks the login button is visible', () => {
    cy.get('button#login').should('be.visible')
  })
})

Execution Trace - 7 Steps

Step	Action	System State	Assertion	Result
1	Test suite starts	No browser opened yet	-	PASS
2	beforeEach hook runs: cy.visit('https://example.cypress.io')	Browser opens and navigates to https://example.cypress.io homepage	-	PASS
3	Test 1 runs: cy.title().should('include', 'Kitchen Sink')	Homepage loaded with title containing 'Kitchen Sink'	Page title includes 'Kitchen Sink'	PASS
4	afterEach hook runs: cy.clearCookies()	Cookies cleared from browser	-	PASS
5	beforeEach hook runs again: cy.visit('https://example.cypress.io')	Browser reloads homepage	-	PASS
6	Test 2 runs: cy.get('button#login').should('be.visible')	Homepage loaded with login button visible	Login button with id 'login' is visible	PASS
7	afterEach hook runs again: cy.clearCookies()	Cookies cleared from browser	-	PASS

Failure Scenario

Failing Condition: The login button with id 'login' is not present or not visible on the page

Execution Trace Quiz - 3 Questions

What does the beforeEach hook do in this test suite?

A Checks the page title

B Visits the homepage before each test

C Clears cookies after each test

D Clicks the login button

Key Result

Using beforeEach and afterEach hooks helps keep tests clean and independent by setting up and cleaning up the test environment automatically before and after each test.