Why login handling speeds up test suites in Cypress - Automation Benefits in Action

Automate login handling to speed up test suites

Preconditions (2)

Step 1: Visit the login page URL

Step 2: Enter '[e-mail]' in the email input field with id 'email'

Step 3: Enter 'Password123!' in the password input field with id 'password'

Step 4: Click the login button with id 'loginBtn'

Step 5: Verify the URL changes to the dashboard page URL '/dashboard'

Step 6: Verify the dashboard page contains a welcome message with id 'welcomeMsg'

✅ Expected Result: User is logged in successfully and redirected to the dashboard page with welcome message visible

Automation Requirements - Cypress

Assertions Needed:

Verify URL is '/dashboard' after login

Verify welcome message is visible on dashboard

Best Practices:

Use custom Cypress command for login to reuse in multiple tests

Avoid UI login in every test by programmatically setting authentication state

Use explicit assertions to confirm login success

Keep selectors stable and meaningful (ids preferred)

Automated Solution

Cypress

/// <reference types="cypress" />

// cypress/support/commands.js
Cypress.Commands.add('login', (email, password) => {
  cy.visit('/login');
  cy.get('#email').clear().type(email);
  cy.get('#password').clear().type(password);
  cy.get('#loginBtn').click();
  cy.url().should('include', '/dashboard');
  cy.get('#welcomeMsg').should('be.visible');
});

// cypress/e2e/login_spec.cy.js

describe('Login Handling Speeds Up Test Suites', () => {
  beforeEach(() => {
    cy.login('[e-mail]', 'Password123!');
  });

  it('should show dashboard after login', () => {
    cy.url().should('include', '/dashboard');
    cy.get('#welcomeMsg').should('contain.text', 'Welcome');
  });

  it('should allow access to protected page without UI login again', () => {
    cy.visit('/protected-page');
    cy.url().should('include', '/protected-page');
    cy.get('h1').should('contain.text', 'Protected Content');
  });
});

This solution uses Cypress to automate login handling.

First, a custom command cy.login is created in commands.js. It visits the login page, fills in email and password fields, clicks login, and asserts the URL and welcome message to confirm success.

Then, in the test file, beforeEach calls cy.login to perform login once before each test. This avoids repeating UI login steps in every test, speeding up the suite.

The tests verify the dashboard URL and welcome message, and also check access to a protected page without logging in again.

Using a custom command and assertions ensures code reuse, readability, and reliable verification of login success.

Common Mistakes - 4 Pitfalls

Hardcoding selectors that are unstable or change frequently

Performing UI login in every test instead of reusing login state

Not asserting login success explicitly

Using arbitrary waits like cy.wait(5000) instead of proper assertions

Bonus Challenge

Now add data-driven testing with 3 different sets of login credentials

Show Hint