Code coverage plugin in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Cypress code coverage plugin.

Cypress

import '[1]';

Drag options to blanks, or click blank then click option'

A@cypress/code-coverage/support

Bcypress/code-coverage/plugin

C@cypress/code-coverage/plugin

Dcypress/code-coverage/support

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'plugin' instead of 'support' in the import path.

Omitting the '@' symbol in the package name.

The correct import path for the Cypress code coverage support file is @cypress/code-coverage/support. This enables code coverage collection during tests.

2fill in blank

medium

Complete the code to require the code coverage plugin in the Cypress plugins file.

Cypress

module.exports = (on, config) => { on('task', require('[1]')(on, config)); return config; };

Drag options to blanks, or click blank then click option'

Acypress/code-coverage/support

B@cypress/code-coverage/plugin

C@cypress/code-coverage/support

Dcypress/code-coverage/plugin

Attempts:

3 left

💡 Hint

Common Mistakes

Using the support path instead of the plugin path.

Forgetting to return the config object.

The code coverage plugin is required from @cypress/code-coverage/plugin in the plugins file to enable coverage tasks.

3fill in blank

hard

Fix the error in the code to correctly enable code coverage in Cypress plugins.

Cypress

const codeCoverageTask = require('[1]'); module.exports = (on, config) => { codeCoverageTask(on, config); return config; };

Drag options to blanks, or click blank then click option'

Acypress/code-coverage/plugin

B@cypress/code-coverage/support

C@cypress/code-coverage/plugin

Dcypress/code-coverage/support

Attempts:

3 left

💡 Hint

Common Mistakes

Requiring the support module instead of the plugin module.

Omitting the '@' symbol in the package name.

The correct module to require for the code coverage task is @cypress/code-coverage/plugin. Using 'support' or missing '@' causes errors.

4fill in blank

hard

Fill both blanks to configure Cypress to collect coverage and save reports.

Cypress

module.exports = (on, config) => { on('[1]', require('@cypress/code-coverage/plugin')(on, config)); return [2]; };

Drag options to blanks, or click blank then click option'

Atask

Bconfig

Csettings

Dconfiguration

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong event names like 'settings' or 'configuration'.

Returning a wrong variable instead of config.

The event name to listen for is task, and the Cypress config object must be returned as config.

5fill in blank

hard

Fill all three blanks to add code coverage support import and configure plugin in Cypress.

Cypress

import '[1]';

module.exports = (on, [2]) => {
  on('[3]', require('@cypress/code-coverage/plugin')(on, [2]));
  return [2];
};

Drag options to blanks, or click blank then click option'

A@cypress/code-coverage/support

Bconfig

Ctask

Dsettings

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'settings' instead of 'task' for the event.

Not returning the config object after plugin setup.

The support file is imported from @cypress/code-coverage/support. The plugin function uses the task event and the config object is passed and returned.

Practice

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

Solution

1. Step 1: Understand code coverage concept

   Code coverage helps identify which lines or branches of code are executed during tests.

2. Step 2: Match purpose with plugin function

   The Cypress code coverage plugin tracks and reports tested vs untested code parts.

3. Final Answer:

   To show which parts of your code are tested and which are not -> Option A

4. Quick Check:

   Code coverage = tested vs untested code [OK]

Hint: Code coverage = shows tested and missed code parts [OK]

Common Mistakes:

• Thinking it speeds up tests
• Believing it fixes bugs automatically
• Confusing it with screenshot tools

2. Which file should you modify to enable the Cypress code coverage plugin support?

easy

A. cypress/support/e2e.js

B. cypress/fixtures/data.json

C. package.json

D. cypress.config.js

Solution

1. Step 1: Identify where plugin support code goes

   The plugin support code is added in the support file to load before tests run.

2. Step 2: Choose correct support file path

   By default, Cypress uses cypress/support/e2e.js for test support setup.

3. Final Answer:

   cypress/support/e2e.js -> Option A

4. Quick Check:

   Support file = cypress/support/e2e.js [OK]

Hint: Support code goes in cypress/support/e2e.js [OK]

Common Mistakes:

• Modifying cypress.config.js only
• Changing package.json for plugin support
• Editing fixture files for plugin setup

3. Given this snippet in cypress/support/e2e.js:

import '@cypress/code-coverage/support';

What will happen when you run your tests?

medium

A. Tests will fail due to missing plugin installation

B. No effect; code coverage requires config changes only

C. Code coverage data will be collected during tests

D. Tests will run but coverage report will be empty

Solution

1. Step 1: Understand import statement effect

   Importing '@cypress/code-coverage/support' enables coverage collection hooks.

2. Step 2: Recognize plugin behavior during test run

   This import activates coverage tracking so data is gathered as tests run.

3. Final Answer:

   Code coverage data will be collected during tests -> Option C

4. Quick Check:

   Import support = coverage data collected [OK]

Hint: Importing support enables coverage collection [OK]

Common Mistakes:

• Assuming import alone fails tests
• Thinking config changes alone enable coverage
• Believing coverage report is empty without extra steps

4. You added the code coverage plugin but your coverage report is empty after tests run. What is the most likely cause?

medium

A. You did not write any tests

B. You forgot to instrument your app code with the coverage tool

C. You imported the plugin support file twice

D. You ran tests in headless mode

Solution

1. Step 1: Understand coverage instrumentation

   Coverage requires your app code to be instrumented to track executed lines.

2. Step 2: Identify missing instrumentation effect

   Without instrumentation, coverage plugin cannot detect which code ran, so report is empty.

3. Final Answer:

   You forgot to instrument your app code with the coverage tool -> Option B

4. Quick Check:

   Missing instrumentation = empty coverage report [OK]

Hint: Instrument app code to get coverage data [OK]

Common Mistakes:

• Assuming no tests means empty report
• Thinking duplicate imports cause empty report
• Believing headless mode disables coverage

5. You want to improve your test suite by using the Cypress code coverage plugin. Which steps should you follow to get a working coverage report? Select the correct sequence.

hard

A. Instrument app code, run tests, install plugin, import support in e2e.js, check report

B. Run tests, install plugin, import support in e2e.js, instrument app code, check report

C. Import support in e2e.js, run tests, install plugin, instrument app code, check report

D. Install plugin, instrument app code, import support in e2e.js, run tests, check report

Solution

1. Step 1: Install the code coverage plugin

   First, add the plugin package to your project dependencies.

2. Step 2: Instrument your application code

   Modify your app build to include coverage instrumentation for tracking.

3. Step 3: Import the plugin support file in cypress/support/e2e.js

   This enables coverage hooks during test execution.

4. Step 4: Run your Cypress tests

   Tests will now collect coverage data as they execute.

5. Step 5: Check the generated coverage report

   Review which code was covered and improve tests accordingly.

6. Final Answer:

   Install plugin, instrument app code, import support in e2e.js, run tests, check report -> Option D

7. Quick Check:

   Correct setup sequence = Install plugin, instrument app code, import support in e2e.js, run tests, check report [OK]

Hint: Install, instrument, import support, run tests, check report [OK]

Common Mistakes:

• Running tests before installing plugin
• Skipping instrumentation step
• Importing support after running tests