Component testing vs E2E in Cypress - Framework Approaches Compared

Framework Mode - Component testing vs E2E

Folder Structure for Cypress Testing Framework

  cypress.config.js         # Cypress configuration file
  
  cypress/
  ├── e2e/                  # End-to-End test specs
  │   ├── login.cy.js       # E2E test example
  │   └── dashboard.cy.js
  ├── component/            # Component test specs
  │   ├── button.cy.js      # Component test example
  │   └── modal.cy.js
  ├── fixtures/             # Test data files
  │   └── user.json
  └── support/              # Support files and commands
      ├── commands.js       # Custom commands
      ├── e2e.js            # E2E support setup
      └── component.js      # Component support setup
  

Test Framework Layers

• Test Specs: Separate folders for component and e2e tests to keep tests organized by scope.
• Support Layer: Contains reusable commands and setup files for both component and E2E tests.
• Fixtures: Static test data used by tests to keep data consistent and reusable.
• Configuration: Central place to define environment settings, browser options, and test behavior.

Configuration Patterns

Use cypress.config.js to define settings for both component and E2E tests.

  import { defineConfig } from 'cypress'

  export default defineConfig({
    e2e: {
      baseUrl: 'https://myapp.example.com',
      supportFile: 'cypress/support/e2e.js',
      specPattern: 'cypress/e2e/**/*.cy.js',
      env: {
        username: 'testuser',
        password: 'password123'
      }
    },
    component: {
      devServer: {
        framework: 'react',
        bundler: 'webpack'
      },
      supportFile: 'cypress/support/component.js',
      specPattern: 'cypress/component/**/*.cy.js'
    }
  })
  

Use environment variables or separate config files for different environments (dev, staging, prod).

Test Reporting and CI/CD Integration

• Use built-in Cypress reporters or plugins like mochawesome for detailed HTML reports.
• Integrate Cypress tests into CI pipelines (GitHub Actions, Jenkins, GitLab CI) to run tests on every code push.
• Separate jobs for component and E2E tests to optimize test run time and isolate failures.
• Use Cypress Dashboard service for test analytics and video recordings of test runs.

Best Practices for Component Testing vs E2E Framework

• Separate Test Types: Keep component and E2E tests in different folders and configs for clarity and faster runs.
• Reuse Support Code: Share common commands and utilities but customize support files for each test type.
• Isolate Component Tests: Test UI components in isolation without backend dependencies for fast, reliable feedback.
• Use Realistic E2E Tests: Test full user flows including backend and UI to catch integration issues.
• Data Management: Use fixtures and environment variables to keep test data consistent and secure.

Self Check Question

Where in this folder structure would you add a new component test for a custom dropdown menu?

Key Result

Organize Cypress tests by separating component and E2E tests with dedicated folders, configs, and support files for clear, maintainable, and efficient testing.