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.

Practice

1. What is the main purpose of the Cypress Dashboard (Cloud) service?

easy

A. To replace the Cypress test runner

B. To collect and display test results online for better tracking

C. To write test scripts automatically

D. To run tests locally without internet connection

Solution

1. Step 1: Understand the role of Cypress Dashboard

   The Cypress Dashboard service collects test results and shows them online.

2. Step 2: Compare options with this role

   Only To collect and display test results online for better tracking describes collecting and displaying test results online for tracking.

3. Final Answer:

   To collect and display test results online for better tracking -> Option B

4. Quick Check:

   Cypress Dashboard = Online test results tracking [OK]

Hint: Dashboard = online test results viewer [OK]

Common Mistakes:

• Thinking Dashboard runs tests locally
• Confusing Dashboard with test script writing
• Assuming Dashboard replaces test runner

2. Which command option is used to send test results to the Cypress Dashboard service?

easy

A. --sync

B. --upload

C. --record

D. --push

Solution

1. Step 1: Recall the command to send results

   The --record option is used with the project key to send test results to the Dashboard.

2. Step 2: Verify other options

   Options like --upload, --sync, and --push are not valid Cypress commands for this purpose.

3. Final Answer:

   --record -> Option C

4. Quick Check:

   Send results = --record [OK]

Hint: Use --record to send results [OK]

Common Mistakes:

• Using --upload instead of --record
• Confusing with git push commands
• Omitting the project key with --record

3. Given the command cypress run --record --key abc123, what is the expected outcome?

medium

A. Tests run and results are sent to Dashboard with key abc123

B. Tests fail to run due to missing project key

C. Tests run locally without sending results

D. Tests run but results are saved only locally

Solution

1. Step 1: Analyze the command options

   The command includes --record and a project key abc123, which means results will be sent to the Dashboard.

2. Step 2: Understand the effect

   Tests run normally and results are uploaded to the Dashboard service using the provided key.

3. Final Answer:

   Tests run and results are sent to Dashboard with key abc123 -> Option A

4. Quick Check:

   --record + key = send results [OK]

Hint: --record with key sends results online [OK]

Common Mistakes:

• Assuming tests run without sending results
• Thinking project key is optional
• Confusing local save with Dashboard upload

4. You run cypress run --record but get an error about missing project key. What is the fix?

medium

A. Add the --key option with your project key

B. Remove --record to run tests locally

C. Update Cypress to latest version

D. Run tests without internet connection

Solution

1. Step 1: Identify the error cause

   The error about missing project key means --record was used without specifying --key.

2. Step 2: Apply the fix

   Add --key your_project_key to the command to authenticate and send results.

3. Final Answer:

   Add the --key option with your project key -> Option A

4. Quick Check:

   Missing key error = add --key [OK]

Hint: Always provide --key with --record [OK]

Common Mistakes:

• Ignoring the missing key error
• Removing --record instead of adding key
• Assuming update fixes key error

5. Your team wants to track flaky tests using Cypress Dashboard. Which combination helps achieve this best?

hard

A. Run tests without Dashboard and email reports daily

B. Run tests locally and share screenshots manually

C. Disable recording and rely on console logs only

D. Use --record with project key and enable Dashboard retries

Solution

1. Step 1: Understand flaky test tracking

   Flaky tests are unstable tests that sometimes fail. Cypress Dashboard can track retries and failures.

2. Step 2: Identify best practice

   Using --record with the project key sends results to Dashboard, and enabling retries in Dashboard helps track flaky tests.

3. Final Answer:

   Use --record with project key and enable Dashboard retries -> Option D

4. Quick Check:

   Track flaky tests = record + retries [OK]

Hint: Record tests and enable retries in Dashboard [OK]

Common Mistakes:

• Relying on manual screenshots only
• Disabling recording loses Dashboard benefits
• Using email reports misses real-time tracking