Cypress Code Coverage

During project work, testers often have to write many component and E2E tests. However, no matter how many tests are written, questions inevitably arise within the team sooner or later.

💭 Are all sections of the application’s source code executed during testing?
🤔 Are there parts of the web application that are tested too frequently, or conversely, not tested at all?

If you’re using Cypress code coverage reports instruments, it can help answer these questions.

What is Code Coverage?

Code Coverage is an indicator that allows testers to understand what portion of your source code is covered by tests. Also it helps evaluate the quality of test sets and, if necessary, make changes to optimize project work.

In Cypress, code coverage is not part of the tool’s out-of-the-box features, so its use involves additional configurations and installing the Cypress code coverage plugin. Let’s explore how code coverage in Cypress can be helpful and what steps are required for its use.

Importance of Collecting Code Coverage

Installing the code coverage plugin allows you access additional Cypress capabilities. Detailed coverage reports allow you to:

• Determine the feasibility of testing individual web application components. Special metrics are used for this:
  → Function coverage shows how many times individual functions were called during testing.
  → Statement coverage demonstrates the number of executed statements.
  → Branch coverage is a measure of how many branches were successfully executed.
  → Condition coverage controls over boolean subexpressions checked for true or false.
  → Line coverage counts the number of lines of application code covered by tests.
• Identify dead code and eliminate it. Dead code refers to source code that can be successfully executed, but its execution results will not affect the program.
• Save time for QA engineers. Coverage information eliminates the need to search for unchecked or missing test cases.
• Control the functionality of the code. From the code coverage report, you can obtain information about the parts of the source code and its integrity.

As you can see, code coverage is an essential part of testing. However, in the modern QA world, where there is an increasing emphasis on test automation, automation coverage is another concept to consider. It’s important not to confuse the two.

Differences between Code Coverage and Automation Coverage

Code Coverage and Test Automation Coverage are two components of testing that fundamentally differ from each other. The distinctions between them are outlined in the table below:

In this material, we will specifically discuss Code Coverage for Cypress.

Cypress Code Coverage installation, configuration, options & settings

To use Cypress code coverage, three steps need to be taken:

1. Instrument the code.
2. Install the code coverage plugin.
3. Open the saved code coverage report.

⬇️ Let’s delve into each of these steps in more detail!

Setting up Code Coverage

Before proceeding with the plugin installation, ensure that your Cypress project already has a peer dependency installed.

To install the Cypress code coverage plugin, use the following command:

npm install -D @cypress/code-coverage

Then, insert the code into the cypress support e2e.js file and setupNodeEvents function:

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

module.exports = (on, config) => {
on('task', require('@cypress/code-coverage/task'))
}

Conclusion: Specific Considerations for Cypress Usage

Cypress is a tool that supports component and End-to-End tests for web applications. For reliable E2E testing, QA engineers should regularly collect code coverage – an indicator demonstrating how well tests cover the web application’s source code.

You can get this information from the code coverage report, which shows coverage for statements, branches, functions, and lines of source code metrics with Cypress code coverage plugin.

We hope this guide on Cypress code coverage will help you organize quality testing individual functions of your web application.

Have more questions? Contact us and get a detailed consultation on implementing end-to-end and other types of testing for digital solutions.