Code coverage plugin in Cypress

Introduction

Code coverage plugin helps you see which parts of your code are tested. It shows what is covered and what is missed.

When you want to check if your tests cover all important parts of your app.

When you add new features and want to make sure tests cover them.

When you want to improve your tests by finding untested code.

When you want to share test coverage reports with your team.

When you want to track test coverage over time.

Syntax

Cypress

1. Install plugin: npm install --save-dev @cypress/code-coverage
2. Add to Cypress plugins file (cypress.config.js):
   import { defineConfig } from 'cypress'
   import codeCoverage from '@cypress/code-coverage/task'
   export default defineConfig({
     e2e: {
       setupNodeEvents(on, config) {
         codeCoverage(on, config)
         return config
       }
     }
   })
3. Add to support file (cypress/support/e2e.js):
   import '@cypress/code-coverage/support'
4. Run tests and view coverage report in coverage folder.

Make sure to instrument your app code for coverage before running tests.

Coverage reports are usually in lcov or html format for easy viewing.

Examples

This example shows how to add the code coverage task in the Cypress config file.

Cypress

import { defineConfig } from 'cypress'
import codeCoverage from '@cypress/code-coverage/task'

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      codeCoverage(on, config)
      return config
    }
  }
})

This example shows how to import the support code to enable coverage collection in tests.

Cypress

import '@cypress/code-coverage/support'

// Now your tests will collect coverage data automatically.

Sample Program

This complete setup shows how to configure Cypress with the code coverage plugin, import support, and write a simple test. When you run this test, coverage data is collected and saved.

Cypress

// cypress.config.js
import { defineConfig } from 'cypress'
import codeCoverage from '@cypress/code-coverage/task'

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      codeCoverage(on, config)
      return config
    }
  }
})

// cypress/support/e2e.js
import '@cypress/code-coverage/support'

// cypress/e2e/sample_spec.cy.js
describe('Simple test with coverage', () => {
  it('Visits example page', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')
  })
})

Important Notes

Always instrument your app code with a tool like babel-plugin-istanbul or nyc before running Cypress tests to get accurate coverage.

Coverage reports help find untested code so you can write better tests.

Use the coverage folder to open HTML reports in a browser for easy reading.

Summary

Code coverage plugin shows which code your tests run and which they miss.

Install and configure it in Cypress config and support files.

Run tests and check coverage reports to improve your test quality.