Cypresstesting~15 mins

Code coverage plugin in Cypress - Build an Automation Script

Choose your learning style10 modes available

Learn Why Deep Trace Try Challenge Automate Recall Frame

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

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 - Build an Automation Script

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?