before and after hooks in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to run a setup step before all tests in the suite.

Cypress

describe('My Test Suite', () => {
  [1](() => {
    cy.log('Setup before all tests')
  })

  it('Test 1', () => {
    cy.visit('/')
  })
})

Drag options to blanks, or click blank then click option'

Abefore

BbeforeEach

Cafter

DafterEach

Attempts:

3 left

💡 Hint

Common Mistakes

Using beforeEach instead of before causes the setup to run before every test, not once.

The before hook runs once before all tests in the suite. It is used for setup steps.

2fill in blank

medium

Complete the code to run a cleanup step after each test in the suite.

Cypress

describe('My Test Suite', () => {
  [1](() => {
    cy.log('Cleanup after each test')
  })

  it('Test 1', () => {
    cy.visit('/')
  })
})

Drag options to blanks, or click blank then click option'

AbeforeEach

BafterEach

Cafter

Dbefore

Attempts:

3 left

💡 Hint

Common Mistakes

Using after instead of afterEach causes the cleanup to run only once after all tests.

The afterEach hook runs after each test in the suite. It is used for cleanup steps.

3fill in blank

hard

Fix the error in the hook name to run code after all tests.

Cypress

describe('My Test Suite', () => {
  [1](() => {
    cy.log('Runs after all tests')
  })

  it('Test 1', () => {
    cy.visit('/')
  })
})

Drag options to blanks, or click blank then click option'

AafterEach

BafterAll

Cafter

Dbefore

Attempts:

3 left

💡 Hint

Common Mistakes

Using afterAll causes an error because Cypress does not support it.

The correct hook to run code after all tests is after. afterAll is not a valid Cypress hook.

4fill in blank

hard

Fill both blanks to run setup before each test and cleanup after each test.

Cypress

describe('My Test Suite', () => {
  [1](() => {
    cy.log('Setup before each test')
  })

  [2](() => {
    cy.log('Cleanup after each test')
  })

  it('Test 1', () => {
    cy.visit('/')
  })
})

Drag options to blanks, or click blank then click option'

AbeforeEach

Bafter

CafterEach

Dbefore

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up before and beforeEach or after and afterEach.

beforeEach runs before each test for setup, and afterEach runs after each test for cleanup.

5fill in blank

hard

Fill all three blanks to run setup once before all tests, setup before each test, and cleanup once after all tests.

Cypress

describe('My Test Suite', () => {
  [1](() => {
    cy.log('Setup once before all tests')
  })

  [2](() => {
    cy.log('Setup before each test')
  })

  [3](() => {
    cy.log('Cleanup once after all tests')
  })

  it('Test 1', () => {
    cy.visit('/')
  })
})

Drag options to blanks, or click blank then click option'

AbeforeEach

Bafter

Cbefore

DafterEach

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing afterEach with after or beforeEach with before.

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

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