beforeEach and afterEach hooks in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of beforeEach and afterEach hooks in Cypress

Consider the following Cypress test code. What will be the order of console logs when the tests run?

Cypress

describe('Test Suite', () => {
  beforeEach(() => {
    cy.log('beforeEach hook');
  });

  afterEach(() => {
    cy.log('afterEach hook');
  });

  it('Test 1', () => {
    cy.log('Test 1 body');
  });

  it('Test 2', () => {
    cy.log('Test 2 body');
  });
});

A 2,1,3,5,4,6

B 1,2,3,4,5,6

C 1,3,2,4,6,5

D 3,1,2,6,4,5

💡 Hint

Remember that beforeEach runs before each test and afterEach runs after each test.

The beforeEach hook runs before every test, and afterEach runs after every test. So for two tests, the order is: beforeEach, test body, afterEach, then repeat for the second test.

❓ assertion

intermediate

Correct assertion placement with beforeEach and afterEach

Where should you place assertions to verify a UI element is visible before each test and cleaned up after each test?

A Place visibility assertion inside beforeEach and cleanup assertion inside afterEach

B Place all assertions inside the first test only

C Place visibility assertion inside afterEach and cleanup assertion inside beforeEach

D Place all assertions inside afterEach only

💡 Hint

Think about when the UI element should be visible and when it should be cleaned up.

Assertions about the UI element's visibility should be in beforeEach to confirm it's ready before tests. Cleanup assertions belong in afterEach to confirm the element is removed after tests.

🔧 Debug

advanced

Debugging unexpected test order with beforeEach and afterEach

You notice that your afterEach hook is not running after the first test but runs after the second test. What is the most likely cause?

A The first test contains an asynchronous command without returning or awaiting it

B The beforeEach hook is missing

C The afterEach hook is defined inside the first test block

D The test suite has only one test

💡 Hint

Consider how Cypress handles asynchronous commands and test completion.

If a test has asynchronous commands but does not return or await them properly, Cypress may not detect test completion correctly, causing hooks like afterEach to run late or out of order.

❓ framework

advanced

Using beforeEach and afterEach with Cypress custom commands

You want to log in a user before each test and log out after each test using custom Cypress commands cy.login() and cy.logout(). Which setup is correct?

Cypress

describe('User tests', () => {
  beforeEach(() => {
    cy.login();
  });

  afterEach(() => {
    cy.logout();
  });

  it('checks dashboard', () => {
    cy.get('#dashboard').should('be.visible');
  });
});

A Login should be in afterEach and logout in beforeEach

B beforeEach and afterEach hooks cannot use custom commands

C Both login and logout should be inside each test, not hooks

D This setup is correct and will log in before and log out after each test

💡 Hint

Think about the test lifecycle and when setup and teardown should happen.

Using cy.login() in beforeEach ensures the user is logged in before every test. Using cy.logout() in afterEach ensures cleanup after each test. This is the recommended pattern.

🧠 Conceptual

expert

Impact of nested beforeEach and afterEach hooks in Cypress

Given nested describe blocks with beforeEach and afterEach hooks, what is the order of execution for hooks and tests?

Cypress

describe('Outer Suite', () => {
  beforeEach(() => cy.log('Outer beforeEach'));
  afterEach(() => cy.log('Outer afterEach'));

  describe('Inner Suite', () => {
    beforeEach(() => cy.log('Inner beforeEach'));
    afterEach(() => cy.log('Inner afterEach'));

    it('Inner test', () => cy.log('Test body'));
  });
});

A Outer beforeEach, Test body, Inner beforeEach, Outer afterEach, Inner afterEach

B Inner beforeEach, Outer beforeEach, Test body, Outer afterEach, Inner afterEach

C Outer beforeEach, Inner beforeEach, Test body, Inner afterEach, Outer afterEach

D Test body, Outer beforeEach, Inner beforeEach, Outer afterEach, Inner afterEach

💡 Hint

Hooks in outer describe run before hooks in inner describe for beforeEach, and reverse for afterEach.

For nested describes, beforeEach hooks run from outer to inner before the test. afterEach hooks run from inner to outer after the test. So the order is: Outer beforeEach, Inner beforeEach, Test, Inner afterEach, Outer afterEach.

Practice

1. What is the main purpose of the beforeEach hook in Cypress testing?

easy

A. To run code before every test to set up the test environment

B. To run code after every test to clean up the test environment

C. To skip a test conditionally

D. To group multiple tests together

Solution

1. Step 1: Understand the role of beforeEach

   The beforeEach hook runs before each test to prepare the environment or state needed for the test.

2. Step 2: Differentiate from afterEach

   Unlike afterEach, which runs after tests to clean up, beforeEach sets up conditions before tests.

3. Final Answer:

   To run code before every test to set up the test environment -> Option A

4. Quick Check:

   beforeEach = setup before tests [OK]

Hint: Remember: beforeEach runs before tests, afterEach runs after [OK]

Common Mistakes:

• Confusing beforeEach with afterEach
• Thinking beforeEach skips tests
• Assuming beforeEach groups tests

2. Which of the following is the correct syntax to use afterEach in a Cypress test file?

easy

A. afterEach { cy.visit('/home') }

B. afterEach(() => { cy.visit('/home') })

C. afterEach: () => cy.visit('/home')

D. afterEach => { cy.visit('/home') }

Solution

1. Step 1: Recall correct function syntax in Cypress

   Cypress hooks use function calls with arrow functions inside parentheses, like afterEach(() => { ... }).

2. Step 2: Identify syntax errors in other options

   Options B, C, and D miss parentheses or use incorrect arrow function syntax.

3. Final Answer:

   afterEach(() => { cy.visit('/home') }) -> Option B

4. Quick Check:

   Hook syntax = function call with arrow function [OK]

Hint: Hooks need parentheses and arrow functions: hook(() => {}) [OK]

Common Mistakes:

• Omitting parentheses after hook name
• Using curly braces without parentheses
• Incorrect arrow function syntax

3. Consider this Cypress test code:

describe('My Tests', () => {
  beforeEach(() => {
    cy.visit('/login')
  })

  it('Test 1', () => {
    cy.get('#username').type('user1')
  })

  it('Test 2', () => {
    cy.get('#username').type('user2')
  })
})

How many times will cy.visit('/login') run when these tests execute?

medium

A. Once before all tests

B. Twice, once after each test

C. Twice, once before each test

D. Once after all tests

Solution

1. Step 1: Understand beforeEach behavior

   The beforeEach hook runs before every individual test inside the describe block.

2. Step 2: Count the tests and hook calls

   There are two tests, so cy.visit('/login') runs twice, once before each test.

3. Final Answer:

   Twice, once before each test -> Option C

4. Quick Check:

   beforeEach runs before every test [OK]

Hint: Count tests; beforeEach runs before each one [OK]

Common Mistakes:

• Thinking beforeEach runs only once
• Confusing beforeEach with afterEach
• Assuming hooks run after tests

4. You wrote this Cypress test:

describe('Sample', () => {
  beforeEach(() => {
    cy.visit('/dashboard')
  })

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

  it('checks title', () => {
    cy.title().should('include', 'Dashboard')
  })
})

Why does cy.clearCookies not run after the test?

medium

A. Because cy.clearCookies is missing parentheses to call the function

B. Because afterEach only runs before tests

C. Because cy.clearCookies is not a valid Cypress command

D. Because beforeEach overrides afterEach

Solution

1. Step 1: Check the afterEach hook code

   The code uses cy.clearCookies without parentheses, so the function is not called.

2. Step 2: Understand function call syntax

   To execute the command, parentheses are required: cy.clearCookies().

3. Final Answer:

   Because cy.clearCookies is missing parentheses to call the function -> Option A

4. Quick Check:

   Functions need () to run [OK]

Hint: Always add () to call Cypress commands [OK]

Common Mistakes:

• Forgetting parentheses on Cypress commands
• Confusing beforeEach and afterEach roles
• Assuming afterEach runs before tests

5. You want to test a form that requires logging in before each test and clearing local storage after each test. Which is the best way to organize your Cypress hooks?

hard

A. Use only beforeEach for both login and clearing local storage

B. Use afterEach to log in and beforeEach to clear local storage

C. Use only afterEach for both login and clearing local storage

D. Use beforeEach to log in and afterEach to clear local storage

Solution

1. Step 1: Identify setup and cleanup tasks

   Logging in is setup needed before each test; clearing local storage is cleanup after each test.

2. Step 2: Assign tasks to correct hooks

   Use beforeEach for setup (login) and afterEach for cleanup (clear local storage).

3. Final Answer:

   Use beforeEach to log in and afterEach to clear local storage -> Option D

4. Quick Check:

   Setup beforeEach, cleanup afterEach [OK]

Hint: Setup in beforeEach, cleanup in afterEach [OK]

Common Mistakes:

• Mixing setup and cleanup in wrong hooks
• Using only one hook for both tasks
• Not cleaning up after tests