JS-CypressIO

Here’s a mockup project structure for a JavaScript-based project using CypressIO, npm, and the Page Object Model (POM) design pattern. It includes examples for each relevant file and folder:

Project Structure

project-root/
├── .github/
│   ├── workflows/
│   │   └── nightly-build.yml
│   │   └── on-push-build.yml
│   ├── CODEOWNERS
│   └── pull_request_template.md
├── cypress/
│   ├── e2e/
│   │   ├── tests/
│   │   │   ├── login.spec.js
│   │   │   └── dashboard.spec.js
│   │   ├── pages/
│   │   │   ├── loginPage.js
│   │   │   └── dashboardPage.js
│   ├── fixtures/
│   │   └── testData.json
│   ├── support/
│   │   ├── commands.js
│   │   └── e2e.js
├── node_modules/
├── .gitignore
├── package.json
├── package-lock.json
├── README.md
└── cypress.config.js

File Examples

.github/workflows/nightly-build.yml

name: Nightly Build

on:
  schedule:
    - cron: "0 0 * * *" # Runs at midnight daily

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install Dependencies
        run: npm ci

      - name: Run Cypress Tests
        run: npx cypress run

.github/workflows/on-push-build.yml

name: On-Push Build

on:
  push:
    branches:
      - main

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install Dependencies
        run: npm ci

      - name: Run Cypress Tests
        run: npx cypress run

.github/CODEOWNERS

# This defines code ownership for review requests
* @username

.github/pull_request_template.md

# Pull Request

## Description
Please include a summary of the changes and the purpose of this PR.

## Related Issues
Fixes #<issue-number>

## Changes
- <List key changes here>

## Checklist
- [ ] Tests are passing
- [ ] Documentation updated (if necessary)

cypress/e2e/pages/loginPage.js

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

  enterUsername(username) {
    cy.get('#username').type(username);
  }

  enterPassword(password) {
    cy.get('#password').type(password);
  }

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

module.exports = new LoginPage();

cypress/e2e/tests/login.spec.js

const loginPage = require('../pages/loginPage');

describe('Login Tests', () => {
  beforeEach(() => {
    loginPage.visit();
  });

  it('should login successfully with valid credentials', () => {
    loginPage.enterUsername('testUser');
    loginPage.enterPassword('password123');
    loginPage.submit();

    cy.url().should('include', '/dashboard');
  });
});

cypress/fixtures/testData.json

{
  "validUser": {
    "username": "testUser",
    "password": "password123"
  }
}

cypress/support/commands.js

Cypress.Commands.add('login', (username, password) => {
  cy.get('#username').type(username);
  cy.get('#password').type(password);
  cy.get('button[type="submit"]').click();
});

.gitignore

node_modules/
cypress/screenshots/
cypress/videos/
.env

package.json

{
  "name": "cypress-pom-project",
  "version": "1.0.0",
  "scripts": {
    "test": "cypress run",
    "test:open": "cypress open"
  },
  "devDependencies": {
    "cypress": "^12.17.0"
  }
}

README.md

# Cypress POM Project

## Overview
This project demonstrates using Cypress with the Page Object Model (POM) for test automation.

## Getting Started
1. Clone the repository.
2. Run `npm install` to install dependencies.
3. Use `npm run test:open` to run tests in the GUI.
4. Use `npm run test` to run tests in headless mode.

## Directory Structure
- `cypress/e2e/pages`: Contains page object models.
- `cypress/e2e/tests`: Contains test cases.
- `cypress/fixtures`: Contains test data.

## CI/CD
GitHub Actions are set up for:
- Nightly builds.
- Tests on each push.

This mockup should give you a comprehensive structure to start your project!