Why custom commands reduce duplication in Cypress - Framework Benefits

Framework Mode - Why custom commands reduce duplication

Folder Structure

cypress/
├── e2e/                  # Test specs
│   ├── login.cy.js       # Login tests
│   └── dashboard.cy.js   # Dashboard tests
├── support/              # Support files
│   ├── commands.js       # Custom commands
│   └── e2e.js            # Global setup
cypress.config.js         # Cypress configuration

Test Framework Layers

• Test Specs (e2e/): Contains test files that use custom commands to perform actions.
• Custom Commands (support/commands.js): Defines reusable commands to avoid repeating code like login steps.
• Support File (support/e2e.js): Loads custom commands and global setup before tests run.
• Configuration (cypress.config.js): Holds environment settings, base URLs, and browser options.

Configuration Patterns

Use cypress.config.js to set base URLs and environment variables.

// cypress.config.js
export default {
  e2e: {
    baseUrl: 'https://example.com',
    env: {
      username: 'testuser',
      password: 'testpass'
    },
    setupNodeEvents(on, config) {
      // event listeners
    }
  }
}

Access credentials in tests or commands via Cypress.env('username').

Test Reporting and CI/CD Integration

• Use built-in Cypress reporter or plugins like mochawesome for detailed HTML reports.
• Integrate Cypress tests in CI pipelines (GitHub Actions, Jenkins) to run tests on every code push.
• Custom commands reduce duplication, making tests shorter and easier to maintain, improving CI feedback speed.

Best Practices

1. Define reusable actions: Put repeated steps like login or form filling in custom commands.
2. Keep commands simple: Each custom command should do one clear task.
3. Use descriptive names: Name commands so tests read like plain English.
4. Load commands globally: Import custom commands in support/e2e.js to use everywhere.
5. Reduce test code duplication: Custom commands avoid copy-pasting code, making tests easier to update.

Self Check

Where in this folder structure would you add a new custom command for resetting a user password?

Key Result

Custom commands in Cypress reduce duplication by centralizing repeated actions into reusable functions.