Code coverage plugin in Cypress - Build an Automation Script

Verify code coverage collection using Cypress and code coverage plugin

Preconditions (3)

Step 1: Open Cypress test runner

Step 2: Run the test suite that exercises the application code

Step 3: Wait for all tests to complete

Step 4: Check that the code coverage report is generated

Step 5: Verify that the coverage report includes coverage data for the tested files

✅ Expected Result: The code coverage report is generated after test run and shows coverage data for the application files exercised by the tests

Automation Requirements - Cypress

Assertions Needed:

Verify that the coverage object exists in the window after tests run

Verify that coverage report files are generated in the coverage folder

Best Practices:

Use cy.task to handle coverage report writing

Use before and after hooks to setup and teardown coverage collection

Use explicit waits for coverage data availability

Use proper selectors and avoid flaky tests

Automated Solution

Cypress

/// <reference types="cypress" />

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

// cypress/plugins/index.js
const codeCoverageTask = require('@cypress/code-coverage/task');

module.exports = (on, config) => {
  codeCoverageTask(on, config);
  return config;
};

// cypress/e2e/code_coverage_spec.cy.js
describe('Code Coverage Plugin Test', () => {
  before(() => {
    cy.visit('/');
  });

  it('should run application code and collect coverage', () => {
    // Example interaction that triggers application code
    cy.get('button#increment').click();
    cy.get('span#count').should('contain.text', '1');
  });

  after(() => {
    // Verify that coverage object exists in window
    cy.window().its('__coverage__').should('exist');
  });
});

The cypress/support/e2e.js file imports the code coverage support commands to enable coverage collection during tests.

The cypress/plugins/index.js file registers the code coverage task that writes coverage data to disk after tests complete.

The test file code_coverage_spec.cy.js visits the application, performs an action to run application code, and asserts expected UI changes.

After the test, it checks that the __coverage__ object exists on the window, confirming coverage data was collected.

This setup follows Cypress best practices by using the official plugin API, proper hooks, and assertions to verify coverage collection.

Common Mistakes - 4 Pitfalls

{'mistake': "Not importing '@cypress/code-coverage/support' in support file", 'why_bad': "Without this import, coverage commands and hooks are not registered, so coverage data won't be collected.", 'correct_approach': "Always import '@cypress/code-coverage/support' in the Cypress support file."}

{'mistake': 'Not registering the coverage task in plugins file', 'why_bad': "Coverage data won't be saved to disk if the task is not registered.", 'correct_approach': 'Call codeCoverageTask(on, config) in the plugins file and return config.'}

Trying to access coverage data before the application code runs

Hardcoding selectors that may change or are not unique

Bonus Challenge

Now add data-driven testing with 3 different button click counts and verify coverage is collected for each

Show Hint