Why Cypress is built for modern web testing - Framework Benefits

Framework Mode - Why Cypress is built for modern web testing

Folder Structure

cypress-project/
├── cypress/
│   ├── e2e/               # Test files (end-to-end tests)
│   │   └── example.cy.js
│   ├── fixtures/          # Static test data (JSON files)
│   │   └── user.json
│   ├── support/           # Custom commands and reusable code
│   │   ├── commands.js
│   │   └── e2e.js
├── cypress.config.js      # Main Cypress configuration file
├── package.json           # Project dependencies and scripts
└── README.md              # Project overview and instructions

Test Framework Layers

• Test Layer (cypress/e2e): Contains the actual test scripts that simulate user actions and verify app behavior.
• Support Layer (cypress/support): Holds reusable commands, custom helpers, and global setup for tests.
• Fixtures Layer (cypress/fixtures): Stores static data files used to feed tests with consistent inputs.
• Configuration Layer (cypress.config.js): Defines environment settings, browser options, base URLs, and test timeouts.

Configuration Patterns

Cypress uses a single cypress.config.js file to manage settings. It supports:

• Environment Variables: Define different URLs, credentials, or flags for dev, staging, and production.
• Browser Selection: Easily switch between Chrome, Firefox, Edge, or Electron for tests.
• Test Timeouts and Retries: Configure how long Cypress waits for elements and how many times to retry failed tests.
• Base URL: Set a common URL prefix to simplify test code.

Example snippet from cypress.config.js:

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    baseUrl: 'https://example.com',
    env: {
      username: 'testuser',
      password: 'password123'
    },
    retries: 2
  }
})

Test Reporting and CI/CD Integration

Cypress provides built-in test reporting with clear pass/fail results in the Test Runner UI. For CI/CD pipelines, it supports:

• JSON and JUnit Reports: Export test results for integration with Jenkins, GitHub Actions, GitLab, etc.
• Dashboard Service: Optional Cypress Dashboard offers advanced analytics, flake detection, and parallel test runs.
• Headless Mode: Run tests without UI in CI environments using cypress run.

Example GitHub Actions snippet to run Cypress tests:

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: cypress-io/github-action@v5
        with:
          browser: chrome
          headless: true

Framework Design Principles

• Automatic Waiting: Cypress waits for elements and commands automatically, reducing flaky tests.
• Real Browser Execution: Tests run inside the browser, giving accurate results like a real user experience.
• Time Travel Debugging: Cypress records snapshots during test runs to help debug failures easily.
• Easy Setup and Configuration: Minimal setup with zero extra drivers or servers needed.
• Modular Support Layer: Use support/commands.js to keep reusable code clean and maintainable.

Self Check

Where in this folder structure would you add a new custom command to log in users for multiple tests?

Answer: Add it inside cypress/support/commands.js to keep reusable commands centralized.

Key Result

Cypress is built for modern web testing by running tests inside real browsers with automatic waits and easy configuration.