Cypress CLI execution - Framework Patterns

Framework Mode - Cypress CLI execution

Folder Structure for Cypress Test Project

  cypress/
  ├── e2e/                  # Test specs (test cases)
  │   ├── login.cy.js       # Example test file
  │   └── dashboard.cy.js
  ├── fixtures/             # Test data files (JSON, etc.)
  │   └── user.json
  ├── support/              # Custom commands and reusable utilities
  │   ├── commands.js       # Custom Cypress commands
  │   └── e2e.js            # Support file loaded before tests
  ├── videos/               # Videos of test runs (auto-generated)
  ├── screenshots/          # Screenshots on test failures (auto-generated)
  cypress.config.js         # Cypress configuration file
  package.json              # Project dependencies and scripts
  

Test Framework Layers in Cypress CLI Execution

• Test Specs (cypress/e2e): Contains the actual test scripts written in JavaScript using Cypress commands.
• Support Layer (cypress/support): Holds reusable commands and setup code that runs before tests, like login commands or global hooks.
• Fixtures (cypress/fixtures): Stores static test data files used by tests for consistent input.
• Configuration (cypress.config.js): Defines environment settings, base URLs, browser options, and test behavior.
• CLI Runner: The Cypress Command Line Interface runs tests headlessly or in headed mode, controlling browser launch and test execution.

Configuration Patterns for Cypress CLI Execution

• Environment Variables: Use cypress.config.js to define env object for different environments (dev, staging, prod).
• Browser Selection: Pass --browser flag in CLI to run tests in Chrome, Firefox, Edge, etc.
• Test Files Selection: Use --spec flag to run specific test files or folders.
• Headless Mode: Use --headless flag to run tests without opening the browser UI, ideal for CI/CD.
• Credentials Handling: Store sensitive data in environment variables or use cypress.env.json (excluded from version control) to keep secrets safe.

  // Example CLI commands:
  npx cypress run --browser chrome --headless
  npx cypress run --spec "cypress/e2e/login.cy.js"
  

Test Reporting and CI/CD Integration

• Built-in Reports: Cypress CLI generates video recordings and screenshots on failures automatically.
• Custom Reporters: Integrate with Mocha reporters or use plugins like mochawesome for HTML and JSON reports.
• CI/CD Integration: Run npx cypress run commands in pipelines (GitHub Actions, Jenkins, GitLab CI) to automate tests on code changes.
• Artifacts Upload: Upload videos, screenshots, and reports as build artifacts for review.

  // Example GitHub Actions step
  - name: Run Cypress Tests
    run: npx cypress run --headless --browser chrome
  

Best Practices for Cypress CLI Execution Framework

• Keep Tests Independent: Each test should run alone without relying on others to avoid flaky results.
• Use Explicit Selectors: Use data-* attributes for element selectors to make tests stable and readable.
• Manage Environment Configs: Separate environment variables for dev, staging, and production to avoid mistakes.
• Run Tests Headlessly in CI: Use --headless mode in CI pipelines for faster, resource-efficient runs.
• Use Custom Commands: Put repeated actions in cypress/support/commands.js to keep tests clean and DRY.

Self Check Question

Where in this folder structure would you add a new test file for verifying the user registration page?

Key Result

Organize Cypress tests with clear folder layers, configure environments and browsers via CLI flags, and integrate reporting for smooth CI/CD automation.