beforeEach and afterEach hooks in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to run the setup before each test.

Cypress

beforeEach(() => {
  cy.[1]('https://example.com')
});

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

Acontains

Bclick

Cget

Dvisit

Attempts:

3 left

💡 Hint

Common Mistakes

Using commands like cy.click() or cy.get() inside beforeEach without visiting a page first.

Forgetting to use cy.visit() to load the page before tests.

The beforeEach hook runs before every test. Using cy.visit() inside it loads the page before each test starts.

2fill in blank

medium

Complete the code to clean up after each test.

Cypress

afterEach(() => {
  cy.[1]()
});

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

AclearCookies

BclearLocalStorage

Creload

Dreset

Attempts:

3 left

💡 Hint

Common Mistakes

Using cy.reload() which reloads the page but does not clear storage.

Using cy.clearCookies() which only clears cookies, not local storage.

The afterEach hook runs after every test. Using cy.clearLocalStorage() clears local storage to avoid test interference.

3fill in blank

hard

Fix the error in the hook to correctly run code before each test.

Cypress

beforeEach(function() {
  cy.[1]('https://testsite.com')
});

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

Await

Bclick

Cvisit

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using cy.click() or cy.wait() instead of cy.visit() in beforeEach.

Not loading the page before tests causing failures.

The beforeEach hook should use cy.visit() to load the page before each test. Using other commands like click or wait here is incorrect.

4fill in blank

hard

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

Cypress

beforeEach(() => {
  cy.[1]('https://mysite.com')
});
afterEach(() => {
  cy.[2]()
});

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

Avisit

BclearCookies

CclearLocalStorage

Dreload

Attempts:

3 left

💡 Hint

Common Mistakes

Using cy.reload() instead of cy.clearLocalStorage() in afterEach.

Not visiting the page before tests causing errors.

Use cy.visit() in beforeEach to load the page before tests. Use cy.clearLocalStorage() in afterEach to clear storage after tests.

5fill in blank

hard

Fill all three blanks to visit a page, check a button, and clear storage around tests.

Cypress

beforeEach(() => {
  cy.[1]('https://app.com')
  cy.get('button#submit').[2]()
});
afterEach(() => {
  cy.[3]()
});

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

Avisit

Bclick

CclearLocalStorage

Dreload

Attempts:

3 left

💡 Hint

Common Mistakes

Using cy.reload() instead of cy.clearLocalStorage() after tests.

Forgetting to click the button before tests.

Use cy.visit() to open the page before tests, cy.get(...).click() to click the button, and cy.clearLocalStorage() after tests to clean up.