Verify login functionality using Page Object pattern

Preconditions (1)

Step 1: Enter 'user@example.com' in the email input field

Step 2: Enter 'Password123' in the password input field

Step 3: Click the login button

Step 4: Verify that the URL changes to the dashboard page

Step 5: Verify that the dashboard heading is visible

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

Automation Requirements - Cypress

Assertions Needed:

URL contains '/dashboard'

Dashboard heading is visible

Best Practices:

Use Page Object pattern to separate selectors and actions

Use Cypress commands for actions and assertions

Use explicit assertions to verify outcomes

Avoid hardcoding selectors in test files

Automated Solution

Cypress

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

// cypress/support/pageObjects/LoginPage.js
export class LoginPage {
  emailInput() {
    return cy.get('#email');
  }

  passwordInput() {
    return cy.get('#password');
  }

  loginButton() {
    return cy.get('button[type="submit"]');
  }

  visit() {
    cy.visit('/login');
  }

  login(email, password) {
    this.emailInput().clear().type(email);
    this.passwordInput().clear().type(password);
    this.loginButton().click();
  }
}

// cypress/support/pageObjects/DashboardPage.js
export class DashboardPage {
  heading() {
    return cy.get('h1').contains('Dashboard');
  }
}

// cypress/e2e/login.spec.js
import { LoginPage } from '../support/pageObjects/LoginPage';
import { DashboardPage } from '../support/pageObjects/DashboardPage';

describe('Login Test Suite', () => {
  const loginPage = new LoginPage();
  const dashboardPage = new DashboardPage();

  it('should login successfully and show dashboard', () => {
    loginPage.visit();
    loginPage.login('user@example.com', 'Password123');

    cy.url().should('include', '/dashboard');
    dashboardPage.heading().should('be.visible');
  });
});

This test uses the Page Object pattern to keep selectors and actions organized in separate classes. LoginPage handles all login page elements and actions, while DashboardPage handles dashboard elements.

The test visits the login page, performs login with given credentials, then asserts the URL contains '/dashboard' and the dashboard heading is visible. This separation makes the test easier to maintain and scale as the application grows.

Using Cypress commands ensures reliable interaction and assertions. Selectors are stored in page objects to avoid duplication and make updates easier.

Common Mistakes - 3 Pitfalls

Hardcoding selectors directly in test files

Not using assertions after actions

Using fixed waits like cy.wait(5000)

Bonus Challenge

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

Show Hint