Overwriting existing commands in Cypress - Framework Patterns

Framework Mode - Overwriting existing commands

Folder Structure

  cypress/
  ├── e2e/                  # Test specs
  │   └── example.cy.js
  ├── support/              # Support files and custom commands
  │   ├── commands.js       # Custom and overwritten commands
  │   └── e2e.js            # Support file loaded before tests
  ├── fixtures/             # Test data files
  │   └── example.json
  cypress.config.js         # Cypress configuration file
  

Test Framework Layers

• Support Layer: Contains commands.js where existing Cypress commands are overwritten or new commands are added.
• Test Specs Layer: Located in cypress/e2e/, contains test files that use the commands.
• Fixtures Layer: Holds test data files used by tests.
• Configuration Layer: cypress.config.js manages environment settings.

Configuration Patterns

Use cypress.config.js to define environment variables, base URLs, and browser settings.

Example snippet to set environment variables:

  import { defineConfig } from 'cypress'

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

Access environment variables in tests or commands with Cypress.env('username').

Test Reporting and CI/CD Integration

• Use built-in Cypress reporters or integrate with mochawesome for detailed HTML reports.
• Configure CI pipelines (GitHub Actions, Jenkins, GitLab CI) to run Cypress tests headlessly.
• Save test reports and screenshots as artifacts for review.
• Example GitHub Actions step to run tests and upload reports:

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

Best Practices for Overwriting Commands in Cypress

1. Keep Original Behavior: When overwriting, call originalFn to preserve existing functionality unless intentionally changing it.
2. Use Clear Naming: Overwrite commands only when necessary; avoid confusing names.
3. Centralize Overwrites: Place all overwritten commands in cypress/support/commands.js for easy maintenance.
4. Document Changes: Comment why and how commands are overwritten for team clarity.
5. Test Overwritten Commands: Write tests to verify the new behavior works as expected.

Self Check

Where in this folder structure would you add a new overwritten command for cy.click() to add a custom log message before clicking?

Key Result

In Cypress, overwrite existing commands by extending cypress/support/commands.js to customize behavior while preserving original functionality.