Child commands in Cypress - Framework Patterns

Framework Mode - Child commands

Folder Structure of a Cypress Test Project

  cypress/
  ├── e2e/                  # Test specs (test cases)
  │   ├── login.cy.js       # Example test file
  │   └── dashboard.cy.js
  ├── support/              # Custom commands and reusable code
  │   ├── commands.js       # Custom child commands defined here
  │   ├── e2e.js            # Support file loaded before tests
  │   └── index.js          # Entry point for support files
  ├── fixtures/             # Test data files (JSON, etc.)
  │   └── user.json
  └── cypress.config.js     # Cypress configuration file
  

Test Framework Layers in Cypress with Child Commands

• Test Specs (e2e/): Contains test files that use child commands to interact with page elements.
• Support Layer (support/commands.js): Defines custom child commands that extend Cypress commands for reusable actions.
• Fixtures: Holds test data used by tests and commands.
• Configuration: Manages environment settings and browser options.
• Utilities: Helper functions can be added in support or separate utility files for complex logic.

Configuration Patterns for Child Commands in Cypress

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

Example environment config:

  module.exports = {
    e2e: {
      baseUrl: 'https://example.com',
      env: {
        username: 'testuser',
        password: 'password123'
      },
      setupNodeEvents(on, config) {
        // implement node event listeners here
      }
    }
  }
  

Access environment variables inside child commands via Cypress.env().

Test Reporting and CI/CD Integration

• Use built-in Cypress Dashboard or plugins like mochawesome for detailed reports.
• Configure reporters in cypress.config.js to generate HTML or JSON reports.
• Integrate Cypress tests in CI/CD pipelines (GitHub Actions, Jenkins, GitLab CI) to run tests automatically on code changes.
• Use cypress run --reporter mochawesome to generate reports during CI runs.

Best Practices for Using Child Commands in Cypress

1. Keep child commands small and focused: Each command should do one clear action for easy reuse.
2. Use chaining properly: Return Cypress chainables from child commands to allow chaining in tests.
3. Use descriptive names: Name child commands clearly to describe their purpose.
4. Access environment variables safely: Use Cypress.env() inside commands for sensitive data.
5. Document commands: Add comments to explain what each child command does.

Self Check

Where would you add a new child command for logging in a user in this Cypress framework structure?

Key Result

Organize Cypress tests with custom child commands in support/commands.js for reusable, chainable actions.