before and after hooks in Cypress - Build an Automation Script

Verify user login and logout with setup and cleanup hooks

Preconditions (2)

Step 1: Before all tests, open the login page

Step 2: Before each test, ensure the user is logged out

Step 3: Enter 'testuser' in the username field

Step 4: Enter 'Test@1234' in the password field

Step 5: Click the login button

Step 6: Verify the URL changes to the dashboard page

Step 7: After each test, log out the user

Step 8: After all tests, close the browser session

✅ Expected Result: User successfully logs in and logs out for each test, with setup and cleanup done automatically before and after tests

Automation Requirements - Cypress

Assertions Needed:

Verify URL is 'https://example.com/dashboard' after login

Verify logout button is visible after login

Verify user is redirected to login page after logout

Best Practices:

Use before() hook to open login page once before all tests

Use beforeEach() hook to ensure user is logged out before each test

Use afterEach() hook to log out user after each test

Use after() hook to perform any cleanup if needed

Use clear and stable selectors for elements

Avoid hardcoded waits; use Cypress commands for synchronization

Automated Solution

Cypress

describe('User Login and Logout Tests with Hooks', () => {
  before(() => {
    // Runs once before all tests
    cy.visit('https://example.com/login');
  });

  beforeEach(() => {
    // Ensure user is logged out before each test
    cy.get('body').then(($body) => {
      if ($body.find('#logout-button').length) {
        cy.get('#logout-button').click();
        cy.url().should('include', '/login');
      }
    });
  });

  it('should log in successfully', () => {
    cy.get('#username').clear().type('testuser');
    cy.get('#password').clear().type('Test@1234');
    cy.get('#login-button').click();
    cy.url().should('eq', 'https://example.com/dashboard');
    cy.get('#logout-button').should('be.visible');
  });

  afterEach(() => {
    // Log out after each test if logged in
    cy.get('body').then(($body) => {
      if ($body.find('#logout-button').length) {
        cy.get('#logout-button').click();
        cy.url().should('include', '/login');
      }
    });
  });

  after(() => {
    // Cleanup if needed after all tests
    // For Cypress, usually no action needed here
  });
});

The before() hook runs once before all tests to open the login page.

The beforeEach() hook checks if the user is logged in by looking for the logout button. If found, it clicks logout to ensure a clean state before each test.

The test case enters username and password, clicks login, then verifies the URL and logout button visibility.

The afterEach() hook logs out the user after each test if logged in, ensuring no leftover session affects other tests.

The after() hook is included for completeness but is empty because Cypress handles cleanup automatically.

This structure keeps tests independent and reliable by managing setup and cleanup with hooks.

Common Mistakes - 4 Pitfalls

Not using beforeEach to reset state before each test

Using hardcoded waits like cy.wait(5000)

Not checking if user is logged in before clicking logout

{'mistake': 'Putting all test steps inside before() hook', 'why_bad': "before() runs once, so tests won't run independently.", 'correct_approach': 'Use before() only for setup, keep test steps inside it() blocks.'}

Bonus Challenge

Now add data-driven testing with 3 different username and password combinations

Show Hint