Cypress Dashboard (Cloud) service - Framework Patterns

Framework Mode - Cypress Dashboard (Cloud) service

Folder Structure

    cypress/
    ├── e2e/                  # Test specs
    │   ├── login.cy.js
    │   └── dashboard.cy.js
    ├── fixtures/             # Test data files
    │   └── users.json
    ├── support/              # Custom commands and global hooks
    │   ├── commands.js
    │   └── e2e.js
    cypress.config.js          # Cypress configuration file
    package.json               # Project dependencies and scripts
    

Test Framework Layers

• Test Specs (cypress/e2e): Contains the actual test files that describe user flows and assertions.
• Support Layer (cypress/support): Holds reusable commands and setup code that runs before tests.
• Fixtures (cypress/fixtures): Stores static test data like JSON files for consistent test inputs.
• Configuration (cypress.config.js): Defines environment settings, base URLs, and integration with Cypress Dashboard.
• CI/CD Integration: Scripts and settings to run tests automatically and send results to Cypress Dashboard.

Configuration Patterns

Use cypress.config.js to manage settings:

    import { defineConfig } from 'cypress'

    export default defineConfig({
      e2e: {
        baseUrl: 'https://example.com',
        env: {
          username: 'testuser',
          password: 'testpass'
        },
        setupNodeEvents(on, config) {
          // configure plugins or tasks here
          return config
        }
      },
      video: true,               // record videos of test runs
      screenshotOnRunFailure: true
    })
    

Use environment variables or cypress.env.json for sensitive data.

To enable Cypress Dashboard integration, add your project ID and record key in cypress.config.js or pass via CLI:

    // CLI example:
    npx cypress run --record --key YOUR_RECORD_KEY
    

Test Reporting and CI/CD Integration

Cypress Dashboard provides cloud-based test result storage and visualization.

• Record test runs with --record flag to send results to Dashboard.
• View detailed test reports, screenshots, and videos in the Dashboard UI.
• Integrate with CI/CD pipelines (GitHub Actions, Jenkins, GitLab CI) by running npx cypress run --record in build scripts.
• Use Dashboard to track flaky tests, test duration, and parallelization.

Best Practices

1. Use the Dashboard for visibility: Always record test runs in CI to get insights on failures and performance.
2. Keep sensitive keys secure: Store record keys in environment variables, not in code.
3. Organize tests logically: Group tests in cypress/e2e by feature for easier reporting.
4. Use fixtures for test data: Keep test data separate to make tests cleaner and reusable.
5. Leverage Dashboard features: Use parallelization and retry logic to speed up and stabilize tests.

Self Check

Where in this folder structure would you add a new test file for the user profile feature?

Key Result

A Cypress test framework uses a clear folder structure with e2e tests, support files, fixtures, and integrates with Cypress Dashboard for cloud reporting and CI/CD.