What is Code coverage plugin in Cypress?

Cypresstesting~5 mins

Code coverage plugin in Cypress

Choose your learning style10 modes available

Learn Why Deep Trace Try Challenge Automate Recall Frame

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')
  })
})

OutputSuccess

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.

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

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?