Code coverage plugin in Cypress - Test Execution Trace

Test Overview

This test uses Cypress with a code coverage plugin to check if the homepage loads and the main heading is visible. It verifies that the heading text matches the expected value and that code coverage data is collected during the test.

Test Code - Cypress

Cypress

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

describe('Homepage Code Coverage Test', () => {
  beforeEach(() => {
    cy.visit('https://example.cypress.io')
  })

  it('checks main heading and collects coverage', () => {
    cy.get('h1').should('be.visible').and('contain', 'Kitchen Sink')
  })
})

Execution Trace - 6 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Cypress test runner initialized with code coverage plugin enabled	—	PASS
2	Browser opens	Browser window opens controlled by Cypress	—	PASS
3	Navigates to 'https://example.cypress.io'	Page loads with homepage content	Page URL is correct	PASS
4	Finds element 'h1'	Main heading element is present and visible	Element 'h1' is visible	PASS
5	Checks that 'h1' contains text 'Kitchen Sink'	Heading text matches expected	Text content contains 'Kitchen Sink'	PASS
6	Code coverage plugin collects coverage data during test	Coverage data recorded for visited code	Coverage data exists and is valid	PASS

Failure Scenario

Failing Condition: The 'h1' element is missing or text does not match 'Kitchen Sink'

Execution Trace Quiz - 3 Questions

What does the test verify about the 'h1' element?

A It contains a button element

B It is hidden on the page

C It is visible and contains the text 'Kitchen Sink'

D It has a CSS class named 'header'

Key Result

Always verify key page elements are visible and contain expected text to ensure the page loaded correctly. Using a code coverage plugin helps track which parts of your code run during tests, improving test quality.

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