Dual commands in Cypress - Framework Patterns

Framework Mode - Dual 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
│   └── e2e.js            # Global support file
cypress.config.js         # Cypress configuration
package.json             # Project dependencies and scripts

Test Framework Layers

• Test Specs (cypress/e2e): Contains test files that use dual commands to chain actions and assertions.
• Custom Commands (cypress/support/commands.js): Defines reusable dual commands combining actions and assertions for clarity and reusability.
• Support File (cypress/support/e2e.js): Loads custom commands and global configurations.
• Configuration (cypress.config.js): Sets environment variables, base URL, and browser settings.

Configuration Patterns

• Environment Variables: Use cypress.env.json or env property in cypress.config.js to store credentials and environment-specific data.
• Browser Settings: Configure default browser and viewport in cypress.config.js.
• Base URL: Define baseUrl in config for consistent URL references.
• Dual Command Options: Pass options to custom dual commands for flexibility (e.g., timeout, retries).

Test Reporting and CI/CD Integration

• Built-in Reporter: Cypress provides a clear test runner UI showing pass/fail results for dual commands.
• CI Integration: Use GitHub Actions, GitLab CI, or Jenkins to run Cypress tests on push or pull requests.
• Reporters: Integrate with mochawesome or junit reporters for detailed HTML or XML reports.
• Artifacts: Save screenshots and videos on test failures for debugging dual command issues.

Best Practices for Dual Commands Framework

1. Use Custom Commands: Encapsulate common dual command sequences (action + assertion) in commands.js for reuse.
2. Keep Tests Readable: Chain dual commands clearly to express intent, like "click and verify" in one step.
3. Explicit Assertions: Always include assertions in dual commands to ensure test reliability.
4. Parameterize Commands: Allow passing parameters to dual commands for flexibility across tests.
5. Handle Timing: Use Cypress automatic retries and timeouts to avoid flaky tests in dual commands.

Self Check

Where in this folder structure would you add a new dual command that clicks a button and verifies a modal appears?

Key Result

Use custom dual commands in Cypress support files to combine actions and assertions for clear, reusable test steps.