Code coverage plugin in Cypress - Framework Patterns

Framework Mode - Code coverage plugin

Folder Structure

  cypress/
  ├── e2e/                  # Test specs
  │   └── example.cy.js
  ├── support/              # Support files and commands
  │   ├── commands.js
  │   └── e2e.js
  ├── fixtures/             # Test data files
  │   └── example.json
  └── coverage/             # Code coverage reports (generated)

  cypress.config.js         # Cypress configuration file
  package.json              # Project dependencies and scripts
  .nycrc.json               # NYC (Istanbul) coverage config
  

Test Framework Layers

• Test Specs (cypress/e2e/): Contains test files that run user scenarios and trigger code execution.
• Support Layer (cypress/support/): Custom commands and setup code, including importing the coverage plugin.
• Code Coverage Instrumentation: The app code is instrumented (usually via a bundler plugin or preprocessor) to collect coverage data during tests.
• Configuration: cypress.config.js configures Cypress and integrates the coverage plugin.
  .nycrc.json configures coverage report formats and thresholds.
• Coverage Reports (cypress/coverage/): Generated after tests run, showing which code lines were executed.

Configuration Patterns

• cypress.config.js: Import and setup the coverage plugin in the setupNodeEvents function.

  import { defineConfig } from 'cypress'
  import codeCoverageTask from '@cypress/code-coverage/task'
  
  export default defineConfig({
    e2e: {
      setupNodeEvents(on, config) {
        codeCoverageTask(on, config)
        return config
      },
      baseUrl: 'http://localhost:3000',
    },
  })

• cypress/support/e2e.js: Import the coverage support commands.

  import '@cypress/code-coverage/support'

• .nycrc.json: Configure coverage report formats and thresholds.

  {
    "extends": "@istanbuljs/nyc-config-babel",
    "all": true,
    "reporter": ["html", "text-summary"],
    "check-coverage": true,
    "branches": 80,
    "functions": 80,
    "lines": 80,
    "statements": 80
  }

• Environment Handling: Use baseUrl in Cypress config to switch between dev, staging, prod. Credentials can be stored securely using environment variables or Cypress.env.

Test Reporting and CI/CD Integration

• Coverage Reports: After tests run, coverage reports are generated in cypress/coverage/ in HTML and text-summary formats. These reports show which lines of code were executed during tests.
• CI/CD Integration:
  • Run Cypress tests in CI pipelines (GitHub Actions, Jenkins, GitLab CI).
  • Collect coverage reports as artifacts.
  • Fail builds if coverage thresholds are not met (configured in .nycrc.json).
  • Publish coverage reports to dashboards or code quality tools.
• Example GitHub Actions Step:

  steps:
    - uses: actions/checkout@v3
    - uses: cypress-io/github-action@v5
      with:
        start: npm start
        wait-on: 'http://localhost:3000'
        wait-on-timeout: 60
    - run: npm run test:e2e
    - run: npm run coverage:report

Best Practices

• Instrument Code Before Tests: Ensure your app code is instrumented for coverage before running Cypress tests.
• Use Official Plugins: Use @cypress/code-coverage plugin for reliable integration.
• Keep Coverage Thresholds Realistic: Set coverage thresholds that encourage improvement but allow incremental progress.
• Separate Coverage from Functional Tests: Run coverage-enabled tests in dedicated CI jobs to avoid slowing down all tests.
• Secure Sensitive Data: Never hardcode credentials; use environment variables or secure vaults.

Self Check

Where in this folder structure would you add a new custom command to collect additional coverage metrics during tests?

Key Result

Integrate @cypress/code-coverage plugin with Cypress tests to collect and report code coverage efficiently.