Cypresstesting~8 mins

Code coverage plugin in Cypress - Framework Patterns

Choose your learning style10 modes available

Learn Why Deep Trace Try Challenge Automate Recall Frame

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.

Practice

(1/5)

1. What is the main purpose of the Cypress code coverage plugin?

easy

A. To show which parts of your code are tested and which are not

B. To speed up test execution time

C. To automatically fix bugs in your code

D. To generate user interface screenshots

Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard

Code coverage plugin in Cypress - Framework Patterns

Practice

Solution

Step 1: Understand code coverage concept

Step 2: Match purpose with plugin function

Final Answer:

Quick Check:

Solution

Step 1: Identify where plugin support code goes

Step 2: Choose correct support file path

Final Answer:

Quick Check:

Solution

Step 1: Understand import statement effect

Step 2: Recognize plugin behavior during test run

Final Answer:

Quick Check:

Solution

Step 1: Understand coverage instrumentation

Step 2: Identify missing instrumentation effect

Final Answer:

Quick Check:

Solution

Step 1: Install the code coverage plugin

Step 2: Instrument your application code

Step 3: Import the plugin support file in cypress/support/e2e.js

Step 4: Run your Cypress tests

Step 5: Check the generated coverage report

Final Answer:

Quick Check:

Ready to prove it?