Parent commands in Cypress - Framework Patterns

Framework Mode - Parent commands

Folder Structure

cypress/
├── e2e/                  # Test specs
│   ├── login.cy.js       # Example test file
│   └── dashboard.cy.js
├── support/              # Custom commands and support files
│   ├── commands.js       # Custom Cypress commands including parent commands
│   └── e2e.js            # Support file loaded before tests
├── fixtures/             # Test data files (JSON, etc.)
│   └── user.json
cypress.config.js         # Cypress configuration file
package.json              # Project dependencies and scripts

Test Framework Layers

• Test Specs (cypress/e2e): Contains test files that use parent commands to chain actions and assertions.
• Support Layer (cypress/support): Holds commands.js where parent commands are defined using Cypress.Commands.add(). This layer extends Cypress with reusable parent commands that return Cypress chains.
• Fixtures: Static test data used by tests.
• Configuration: Central place for environment and browser settings.

Configuration Patterns

• cypress.config.js: Define baseUrl, defaultCommandTimeout, and environment variables here.
• Environment Variables: Use env property in config or CYPRESS_ prefixed system variables for sensitive data like credentials.
• Browser Selection: Specify browser via CLI or config for cross-browser testing.
• Test Data: Use fixtures folder to store JSON files and load them in tests or commands.

Test Reporting and CI/CD Integration

• Use built-in Cypress Dashboard or third-party reporters (like Mochawesome) for detailed test reports.
• Configure cypress.config.js to generate reports after test runs.
• Integrate Cypress tests into CI/CD pipelines (GitHub Actions, Jenkins, GitLab CI) to run tests on code changes.
• Use --record flag with Cypress Dashboard for cloud test results and analytics.

Best Practices for Parent Commands in Cypress

1. Return Cypress Chain: Always return the Cypress chainable object from parent commands to allow chaining.
2. Use Cypress.Commands.add(): Define parent commands here to keep tests clean and reusable.
3. Keep Commands Focused: Each parent command should perform a clear, single action or logical group of actions.
4. Use Aliases and Fixtures: Combine parent commands with fixtures and aliases for data-driven and maintainable tests.
5. Document Commands: Comment commands clearly so team members understand their purpose and usage.

Self Check

Where in this folder structure would you add a new parent command to log in a user?

Key Result

Use Cypress custom parent commands in the support/commands.js file to create reusable, chainable test actions.