Cypress architecture (runs in browser) - Framework Patterns

Framework Mode - Cypress architecture (runs in browser)

Folder Structure

  cypress/
  ├── e2e/                 # Test files (end-to-end tests)
  │   ├── login.cy.js      # Example test for login
  │   └── dashboard.cy.js  # Example test for dashboard
  ├── fixtures/            # Static test data (JSON, images)
  │   └── user.json
  ├── support/             # Custom commands and reusable code
  │   ├── commands.js      # Custom Cypress commands
  │   └── e2e.js           # Global support file loaded before tests
  └── videos/              # Automatically saved test run videos

  cypress.config.js        # Main Cypress configuration file
  package.json             # Project dependencies and scripts
  

Test Framework Layers

• Test Layer (cypress/e2e): Contains test scripts written in JavaScript. These describe user actions and assertions.
• Support Layer (cypress/support): Holds reusable commands and setup code that runs before tests. Helps avoid repetition.
• Fixtures Layer (cypress/fixtures): Stores static data files like JSON to use as test data inputs.
• Configuration Layer (cypress.config.js): Defines environment settings, base URLs, browser options, and test behavior.
• Plugins Layer (optional): For extending Cypress with Node.js code, e.g., custom tasks or preprocessors.

Configuration Patterns

Cypress uses cypress.config.js to manage settings:

• Base URL: Set the main website URL to avoid repeating it in tests.
• Environment Variables: Use env property for credentials or feature flags, accessed via Cypress.env().
• Browser Selection: Specify browser in CLI or config for cross-browser testing.
• Test Files Pattern: Define which files to run as tests.
• Retries and Timeouts: Configure automatic retries and command timeouts for stability.

Example snippet from cypress.config.js:

  import { defineConfig } from 'cypress'

  export default defineConfig({
    e2e: {
      baseUrl: 'https://example.com',
      env: {
        username: 'testuser',
        password: 'secret'
      },
      retries: 2,
      setupNodeEvents(on, config) {
        // implement node event listeners here
      }
    }
  })
  

Test Reporting and CI/CD Integration

• Built-in Reporter: Cypress shows test results in the Test Runner UI with clear pass/fail status.
• Command Line Reports: Use reporters like mochawesome for detailed HTML or JSON reports.
• Video and Screenshots: Automatically record videos and screenshots on test failures for debugging.
• CI/CD Integration: Run Cypress tests in pipelines (GitHub Actions, Jenkins, GitLab) using CLI commands.
  • Use headless mode (cypress run) for automated runs.
  • Publish reports and artifacts for team review.

Best Practices

1. Use Page Object Pattern: Organize selectors and actions in separate files inside support or e2e folders to keep tests clean.
2. Leverage Custom Commands: Create reusable commands in commands.js to avoid repeating code.
3. Keep Tests Independent: Each test should run alone without relying on others to avoid flaky results.
4. Use Fixtures for Test Data: Store static data separately to make tests easier to maintain and update.
5. Explicit Assertions: Always assert expected outcomes clearly to catch failures early.

Self Check

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

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

Key Result

Cypress test framework runs tests inside the browser with clear folder layers for tests, support code, fixtures, and config.