before and after hooks in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of before and after hooks in Cypress

What will be the output order of console logs when running this Cypress test?

Cypress

describe('Test hooks order', () => {
  before(() => {
    cy.log('before all')
  })

  beforeEach(() => {
    cy.log('before each')
  })

  it('test 1', () => {
    cy.log('test 1')
  })

  it('test 2', () => {
    cy.log('test 2')
  })

  afterEach(() => {
    cy.log('after each')
  })

  after(() => {
    cy.log('after all')
  })
})

A before all, before each, test 1, before each, test 2, after each, after each, after all

B before each, before all, test 1, after each, before each, test 2, after each, after all

C before all, test 1, before each, after each, before each, test 2, after each, after all

D before all, before each, test 1, after each, before each, test 2, after each, after all

💡 Hint

Remember the order: before runs once before all tests, beforeEach runs before each test, afterEach runs after each test, and after runs once after all tests.

The before hook runs once before all tests. Then for each test, beforeEach runs, followed by the test, then afterEach. After all tests finish, after runs once.

❓ assertion

intermediate

Correct assertion to verify after hook effect

You want to verify that a cleanup function in an after hook resets a global variable count to zero after all tests run. Which assertion correctly checks this?

Cypress

let count = 0;
describe('Count tests', () => {
  after(() => {
    count = 0;
  });

  it('increments count', () => {
    count += 1;
  });

  it('increments count again', () => {
    count += 2;
  });
});

A expect(count).to.equal(0); // placed inside after hook

B expect(count).to.equal(3); // placed inside last test

C expect(count).to.equal(0); // placed after describe block

D expect(count).to.equal(3); // placed inside after hook

💡 Hint

The after hook runs after all tests, so assertions about cleanup should be inside it.

The after hook resets count to zero. To verify this, the assertion must be inside the after hook. Checking outside the describe block or inside tests will not reflect the reset.

🔧 Debug

advanced

Debug why afterEach hook is not running

Given this Cypress test, why is the afterEach hook not running after the tests?

Cypress

describe('Sample tests', () => {
  afterEach(() => {
    cy.log('Cleaning up');
  });

  it('test A', () => {
    cy.log('Running test A');
  });

  context('Nested context', () => {
    it('test B', () => {
      cy.log('Running test B');
    });
  });
});

A The afterEach hook must be declared inside each it block to run.

B The afterEach hook is missing a call to done(), so it never completes.

C The afterEach hook only runs for tests in the same describe block, so it does not run after test B inside nested context.

D The afterEach hook is asynchronous and needs await to run properly.

💡 Hint

Consider how hooks apply to nested blocks in Cypress.

In Cypress, hooks declared in a describe block apply to tests inside that block only. The nested context creates a new block, so the afterEach hook in the outer describe does not run after tests inside the nested context.

🧠 Conceptual

advanced

Purpose of before and after hooks in test suites

Which statement best describes the purpose of before and after hooks in Cypress test suites?

A They run before and after each individual test to isolate test data.

B They run setup and cleanup code once before and after all tests in a suite, ensuring consistent test environment.

C They replace the need for assertions by automatically verifying test outcomes.

D They are used to skip tests conditionally based on environment variables.

💡 Hint

Think about when before and after hooks run relative to tests.

before and after hooks run once per test suite to prepare and clean up the environment. They do not run before/after each test (that's beforeEach and afterEach), nor do they replace assertions or skip tests.

❓ framework

expert

Identify correct Cypress hook usage for database reset

You want to reset the test database only once before all tests run and close the database connection only once after all tests finish. Which hook pair correctly implements this in Cypress?

A Use <code>before()</code> to reset database and <code>after()</code> to close connection.

B Use <code>beforeEach()</code> to reset database and <code>afterEach()</code> to close connection.

C Use <code>before()</code> to reset database and <code>afterEach()</code> to close connection.

D Use <code>beforeEach()</code> to reset database and <code>after()</code> to close connection.

💡 Hint

Consider how often you want each action to run.

Resetting the database once before all tests and closing connection once after all tests requires before() and after() hooks. Using beforeEach() or afterEach() would run these actions multiple times unnecessarily.

Practice

1. What is the main purpose of before and after hooks in Cypress testing?

easy

A. To define test data inside tests

B. To write the main test steps

C. To skip tests conditionally

D. To run setup and cleanup code once per test suite

Solution

1. Step 1: Understand the role of hooks

   Hooks like before and after run code automatically before or after tests.

2. Step 2: Identify their scope

   before and after run once per test suite, ideal for setup and cleanup.

3. Final Answer:

   To run setup and cleanup code once per test suite -> Option D

4. Quick Check:

   Hooks run code around tests = D [OK]

Hint: Remember: before/after run once per suite, beforeEach/afterEach per test [OK]

Common Mistakes:

• Confusing before with beforeEach
• Thinking hooks run inside tests
• Using hooks to skip tests

2. Which of the following is the correct syntax to run a function once before all tests in a Cypress test suite?

easy

A. before(() => { cy.visit('/') })

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

C. after(() => { cy.visit('/') })

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

Solution

1. Step 1: Identify the hook that runs once before all tests

   before runs once before the entire suite; beforeEach runs before each test.

2. Step 2: Match the syntax

   before(() => { cy.visit('/') }) is the correct syntax to run once before all tests.

3. Final Answer:

   before(() => { cy.visit('/') }) -> Option A

4. Quick Check:

   Run once before all tests = before() = A [OK]

Hint: Use before() for once before all tests, beforeEach() for every test [OK]

Common Mistakes:

• Using beforeEach instead of before for once-per-suite setup
• Confusing after with before
• Incorrect arrow function syntax

3. Consider this Cypress code snippet:

describe('My Suite', () => {
  before(() => {
    cy.log('Setup once')
  })
  beforeEach(() => {
    cy.log('Setup before each test')
  })
  it('Test 1', () => {
    cy.log('Running Test 1')
  })
  it('Test 2', () => {
    cy.log('Running Test 2')
  })
})

What is the order of logs printed during test execution?

medium

A. Setup before each test, Setup once, Running Test 1, Running Test 2

B. Setup once, Setup before each test, Running Test 1, Setup before each test, Running Test 2

C. Running Test 1, Setup once, Setup before each test, Running Test 2

D. Setup once, Running Test 1, Setup before each test, Running Test 2

Solution

1. Step 1: Understand hook execution order

   before runs once before all tests, beforeEach runs before each test.

2. Step 2: Trace the logs

   Logs print in this order: 'Setup once' (before all), then for Test 1: 'Setup before each test', 'Running Test 1', then for Test 2: 'Setup before each test', 'Running Test 2'.

3. Final Answer:

   Setup once, Setup before each test, Running Test 1, Setup before each test, Running Test 2 -> Option B

4. Quick Check:

   before runs once, beforeEach runs before each test = A [OK]

Hint: Remember: before runs once, beforeEach runs before every test [OK]

Common Mistakes:

• Thinking beforeEach runs only once
• Mixing order of logs
• Ignoring before hook

4. You wrote this Cypress test code:

describe('Test Suite', () => {
  beforeEach(() => {
    cy.visit('/home')
  })
  after(() => {
    cy.clearCookies()
  })
  it('Test A', () => {
    cy.get('#btn').click()
  })
  it('Test B', () => {
    cy.get('#btn').click()
  })
})

But the cy.clearCookies() is not running after each test as expected. What is the problem?

medium

A. after runs once after all tests, not after each test

B. You must call cy.clearCookies() inside each test manually

C. after should be afterEach to run after each test

D. beforeEach should be before to clear cookies

Solution

1. Step 1: Understand the difference between after and afterEach

   after runs once after all tests; afterEach runs after each test.

2. Step 2: Identify the problem

   after runs once after all tests, not after each test.

3. Final Answer:

   after runs once after all tests, not after each test -> Option A

4. Quick Check:

   after runs once per suite = A [OK]

Hint: Use afterEach for per-test cleanup, after for once after all tests [OK]

Common Mistakes:

• Using after instead of afterEach for per-test cleanup
• Expecting after to run multiple times
• Manually clearing cookies inside tests

5. You want to run a setup step once before all tests, a cleanup step once after all tests, and also run a login step before each test in Cypress. Which code snippet correctly implements this?

hard

A. beforeEach(() => { cy.setup() }); afterEach(() => { cy.cleanup() }); before(() => { cy.login() });

B. before(() => { cy.login() }); afterEach(() => { cy.cleanup() }); beforeEach(() => { cy.setup() });

C. before(() => { cy.setup() }); after(() => { cy.cleanup() }); beforeEach(() => { cy.login() });

D. after(() => { cy.setup() }); before(() => { cy.cleanup() }); afterEach(() => { cy.login() });

Solution

1. Step 1: Assign setup and cleanup hooks

   Setup runs once before all tests using before, cleanup runs once after all tests using after.

2. Step 2: Assign login before each test

   Login runs before each test using beforeEach.

3. Step 3: Verify correct order and usage

   before(() => { cy.setup() }); after(() => { cy.cleanup() }); beforeEach(() => { cy.login() }); correctly uses before, after, and beforeEach for these steps.

4. Final Answer:

   before(() => { cy.setup() }); after(() => { cy.cleanup() }); beforeEach(() => { cy.login() }); -> Option C

5. Quick Check:

   Setup once before, cleanup once after, login before each = B [OK]

Hint: Use before for setup, after for cleanup, beforeEach for per-test login [OK]

Common Mistakes:

• Mixing beforeEach with once-per-suite hooks
• Placing login in before or after hooks incorrectly
• Swapping setup and cleanup hooks