App Actions pattern in Cypress - Framework Patterns

Framework Mode - App Actions pattern

Folder Structure

cypress/
├── e2e/                  # Test specs
│   ├── login.cy.js       # Example test file
│   └── dashboard.cy.js
├── support/              # Support files
│   ├── appActions.js     # App Actions pattern implementation
│   ├── commands.js       # Custom Cypress commands
│   └── index.js          # Support file entry point
├── fixtures/             # Test data files
│   └── users.json
cypress.config.js         # Cypress configuration
package.json              # Project dependencies and scripts

Test Framework Layers

• Test Specs (cypress/e2e): Contains test files that describe user scenarios using App Actions.
• App Actions (cypress/support/appActions.js): Encapsulates user interactions as reusable functions representing app behaviors.
• Custom Commands (cypress/support/commands.js): Adds Cypress commands for common low-level actions.
• Fixtures (cypress/fixtures): Holds test data like user credentials or sample inputs.
• Configuration (cypress.config.js): Defines environment settings, base URLs, and browser options.

Configuration Patterns

• Environment Variables: Use cypress.env.json or --env CLI flags to switch between dev, staging, and production URLs.
• Browser Selection: Configure browsers in cypress.config.js or via CLI to run tests in Chrome, Firefox, or Edge.
• Credentials Management: Store sensitive data in cypress.env.json or CI environment variables, never in source code.
• Base URL: Set baseUrl in cypress.config.js for easy navigation in tests.

Test Reporting and CI/CD Integration

• Test Reports: Use Cypress built-in reporter or integrate with mochawesome for detailed HTML reports.
• CI/CD Integration: Run Cypress tests in pipelines (GitHub Actions, GitLab CI, Jenkins) with commands like npx cypress run.
• Artifacts: Save screenshots and videos on test failures for debugging.
• Notifications: Configure pipeline to notify team on test results via email or chat tools.

Best Practices for App Actions Pattern

• Single Responsibility: Each app action function should perform one clear user interaction.
• Reusability: Write app actions to be reusable across multiple tests to reduce duplication.
• Readable Tests: Use app actions in test specs to make tests easy to read like a story.
• Maintainability: Keep app actions in a dedicated file to isolate UI changes from tests.
• Parameterization: Allow app actions to accept parameters for flexible inputs.

Self Check

Where in this folder structure would you add a new app action for filling out a registration form?

Key Result

Use App Actions to encapsulate user interactions as reusable functions in Cypress support files for clean, maintainable tests.