Page Object Model

Overview

Page Objects encapsulate selectors and actions for a single screen. This keeps tests readable and isolates selector changes to one place.

Location

cypress/pages/
├── Login/
│   └── login.js
├── Home/
│   └── home.js
├── Application_form/
│   └── application_form.js
├── Employees/
│   ├── employees.js
│   └── Profile_employee/
│       ├── HR_Payroll_Compliance/
│       ├── Competency_Checklist/
│       ├── work_schedule.js
│       ├── grievances.js
│       ├── documents.js
│       └── ...
├── Marketers/
│   └── marketers.js
└── Profile/
    └── profile.js

Example Page Object

class LoginPage {
  visit() {
    cy.visit('/account/login')
  }

  enterCredentials(email, password) {
    cy.get('[data-cy=email-input]').type(email)
    cy.get('[data-cy=password-input]').type(password)
  }

  submit() {
    cy.get('[data-cy=login-button]').click()
  }

  // Assertion helpers
  shouldShowError(message) {
    cy.get('[data-cy=error-message]').should('contain', message)
  }
}

export default LoginPage

Convention

• Page objects expose actions (verbs) and assertions (should*), not raw selectors
• Selectors are private to the page object — never copy them into step definitions
• Group sub-pages (e.g. employee profile tabs) as nested classes or separate files in a subdirectory