🚀 cy-e2e-kit

Reusable, modular Cypress E2E automation framework for Angular, React, Vue, and any modern frontend apps.
Designed for scalability, maintainability, and team-wide consistency using Page Object and Flow Object patterns.

📦 Features

• ✅ Page Object Model (POM) structure
• ✅ Reusable business workflows (SOM / Flow Model)
• ✅ Custom Cypress commands
• ✅ Utility functions (dates, test data, API setup)
• ✅ Modular and scalable folder layout
• ✅ TypeScript support
• ✅ Works across Angular, React, Vue projects
• ✅ Ideal for CI pipelines and test libraries

📁 Folder Structure

cy-e2e-kit/
│
├── cypress/
│   ├── downloads/                # For downloaded files
│   ├── fixtures/                 # Test data (optional)
│   ├── types/                    # TS interfaces/types (optional)
│
│   ├── e2e/                      # Test files
│   │   ├── authentication/
│   │   │   └── loginPage.cy.ts
│   │   └── dashboard/
│   │       └── dashboardPage.cy.ts
│
│   ├── pages/                    # Page Objects (POM)
│   │   ├── authentication/
│   │   │   └── LoginPage.ts
│   │   └── dashboard/
│   │       └── DashboardPage.ts
│
│   ├── flows/                    # Business flows (SOM)
│   │   ├── authentication/
│   │   │   └── LoginFlow.ts
│   │   └── dashboard/
│   │       └── DashboardFlow.ts
│
│   ├── support/
│   │   ├── commands/             # Split command files (optional)
│   │   │   └── loginCommands.ts
│   │   ├── utils/                # Modular utility files
│   │   │   └── dateUtils.ts
│   │   ├── commands.ts
│   │   ├── e2e.ts
│   │   └── index.ts
│
│   ├── tsconfig.json
│   └── cypress.config.ts
│
├── node_modules/
├── package.json
├── package-lock.json
└── README.md

🔧 Installation

Install from npm:

npm install cy-e2e-kit --save-dev

or with yarn:

yarn add cy-e2e-kit --dev

⚙️ Compatibility

| Tool | Version | |------|---------| | Cypress | v13+ | | TypeScript | v5.x | | Node.js | 18+ |

📥 Setup in Your Cypress Project

Step 1: Register Custom Commands

In cypress/support/e2e.ts:

import 'cy-e2e-kit/commands'

Step 2: Use a Page Object (POM)

import { LoginPage } from 'cy-e2e-kit/pages'

const loginPage = new LoginPage()

loginPage.visit()
loginPage.enterUsername('admin')
loginPage.enterPassword('password')
loginPage.clickLogin()

Step 3: Use a Flow (SOM)

import { LoginFlow } from 'cy-e2e-kit/flows'

LoginFlow.loginAndNavigateToDashboard('admin', 'password')

Step 4: Use Utility Functions

import { getTodayDate, randomEmail } from 'cy-e2e-kit/utils'

const today = getTodayDate()
const email = randomEmail()

🧪 Example Test Case

import { DashboardPage } from 'cy-e2e-kit/pages'
import { LoginFlow } from 'cy-e2e-kit/flows'

describe('Login & Dashboard Flow', () => {
  const dashboard = new DashboardPage()

  it('should login and show welcome message', () => {
    LoginFlow.loginAndNavigateToDashboard('admin', 'admin123')
    dashboard.getWelcomeMessage().should('contain', 'Welcome, Admin')
  })
})

🧰 Utility Highlights

| Utility | Description | |--------|-------------| | getTodayDate() | Returns today’s date in YYYY-MM-DD | | randomEmail() | Generates a unique test email | | deleteTestUser() | Deletes test data via API |

🧙 Custom Commands

| Command | Usage | |--------|-------| | cy.login(username, password) | Logs in via UI | | cy.logout() | Logs out current user | | cy.clearSession() | Clears session/token | | cy.selectDropdown(label, value) | Selects from dropdown by label | | cy.clickByLabel(label) | Clicks element based on its label text |

🧱 Exported Modules

Use top-level exports:

import {
  LoginPage,
  DashboardPage,
  LoginFlow,
  getTodayDate,
  randomEmail
} from 'cy-e2e-kit'

❓ Why Use cy-e2e-kit?

• ⏱️ Faster E2E development for large apps
• 🔐 Stable selector strategies (data-cy driven)
• 🧼 Clear test architecture (POM + SOM)
• 🧪 Pluggable across multiple frontend frameworks
• 👨‍💻 Easy for teams to extend, maintain, and onboard

🏗️ Roadmap

• [ ] GitHub Actions CI sample integration
• [ ] Visual testing plugin support (Percy, Applitools)
• [ ] PDF/CSV download assertions
• [ ] Local test data seeder
• [ ] Cucumber BDD support

🤝 Contributing

Contributions welcome! To develop locally:

git clone https://github.com/jayasankardeepam/cy-e2e-kit.git
cd cy-e2e-kit
npm install
npm run build

Submit issues or pull requests for bugs, enhancements, or new modules.

🪪 License

MIT © Your Name or Organization

📬 Contact

Maintained by @jayasankardeepam Feel free to raise issues or reach out for help.