Cypress.Commands.add() - Framework Patterns

Framework Mode - Cypress.Commands.add()

Folder Structure of a Cypress Test Framework

  cypress/
  ├── e2e/                  # Test specification files
  │   ├── login.cy.js       # Example test file
  │   └── dashboard.cy.js
  ├── support/              # Support files and custom commands
  │   ├── commands.js       # Custom commands added with Cypress.Commands.add()
  │   ├── e2e.js            # Support file loaded before tests
  │   └── index.js          # Entry point for support files
  ├── fixtures/             # Test data files (JSON, etc.)
  │   └── user.json
  └── plugins/              # Plugins for extending Cypress
      └── index.js
  cypress.config.js         # Cypress configuration file
  

Test Framework Layers

• Test Specs (e2e/): Contains test scripts that use Cypress commands to automate UI actions and assertions.
• Custom Commands (support/commands.js): Extend Cypress with reusable commands using Cypress.Commands.add() to simplify tests and avoid repetition.
• Fixtures (fixtures/): Store static test data like user info or test inputs in JSON files for easy reuse.
• Plugins (plugins/): Add or modify Cypress behavior, e.g., for tasks like file system access or environment setup.
• Configuration (cypress.config.js): Define environment settings, base URLs, browser options, and test timeouts.

Configuration Patterns

Use cypress.config.js to manage settings like base URL, test retries, and browser preferences.

Manage environments by defining env variables in the config or via CLI, e.g., cypress run --env environment=staging.

Store sensitive data like credentials in environment variables or cypress.env.json (excluded from version control) to keep secrets safe.

Example snippet from cypress.config.js:

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

Test Reporting and CI/CD Integration

Use built-in Cypress reporters or add plugins like mochawesome for detailed HTML and JSON reports.

Configure reporters in cypress.config.js or via CLI options.

Integrate Cypress tests into CI/CD pipelines (GitHub Actions, Jenkins, GitLab CI) by running cypress run commands and collecting reports as artifacts.

Example GitHub Actions step:

  - name: Run Cypress Tests
    uses: cypress-io/github-action@v5
    with:
      browser: chrome
      headless: true
  

Best Practices for Using Cypress.Commands.add()

• Keep commands simple and focused: Each custom command should do one clear task to keep tests readable.
• Use commands to abstract repetitive UI actions: For example, create a login command to reuse login steps across tests.
• Chain commands properly: Return Cypress chainables from commands to allow smooth chaining in tests.
• Document custom commands: Add comments explaining what each command does for easy maintenance.
• Store commands in support/commands.js: This keeps the framework organized and commands automatically loaded.

Self Check Question

Where in this folder structure would you add a new custom command named fillForm that types data into a form?

Key Result

Use Cypress.Commands.add() in support/commands.js to create reusable custom commands that simplify test scripts.