The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →To send Cypress coverage to Codecov, instrument your application during its build, collect the resulting coverage with @cypress/code-coverage, generate a report, then upload it from CI. Cypress does not instrument application code automatically, so installing the Cypress plugin alone will not produce meaningful coverage.
How the Cypress-to-Codecov flow works
- Instrument the application: use the instrumentation method for your build tool so the code Cypress exercises records coverage.
- Collect coverage: configure
@cypress/code-coveragein Cypress support code and Node event setup. - Generate and inspect a report: run Cypress while the instrumented app is active, then inspect the generated output.
- Upload the report: add a Codecov upload action or CLI step after coverage is created in CI.
Coverage indicates which source code ran; it does not, by itself, establish that tests are effective or that user journeys are fully covered. Cypress distinguishes source-code coverage from UI Coverage, which concerns the interface elements exercised. See Cypress’s code coverage guide.
As an Amazon Associate I earn from qualifying purchases.
Instrument the application before Cypress runs
Choose the instrumentation route that matches the app’s bundler. Cypress describes Istanbul-based approaches, including nyc and Babel-related setups; for Vite, its guide uses vite-plugin-istanbul. Configure the instrumentation to include the application files you want to measure and exclude irrelevant files such as dependencies in node_modules. Source maps can help reports point back to original source files when using the documented Istanbul tooling.
Instrumentation must be active in the build or dev server that Cypress tests. The exact install command and run script depend on the project’s bundler and configuration; do not assume a generic Cypress command instruments the app. For full-stack coverage, Cypress also documents combining instrumented backend coverage with frontend coverage.
Configure the Cypress coverage plugin
Install @cypress/code-coverage using your package manager, then add its support import and Node task registration. The Cypress plugin listing identifies version 4.0.3, updated March 2026, for Cypress 15.10.0 and later; confirm the current compatibility information if your Cypress version differs. See the Cypress setup instructions and plugin listing.
Support file
In the support file used by the test mode, add:
import '@cypress/code-coverage/support'For end-to-end tests, this belongs in the E2E support file. For component tests, put the import in the component support file; adding it only to E2E support will not configure component coverage.
Node event setup
Register the coverage task in the Cypress configuration’s setupNodeEvents callback. Keep the project’s existing event setup and return the config object, including any environment changes your setup makes. For example, in an E2E configuration:
const { defineConfig } = require('cypress')
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
require('@cypress/code-coverage/task')(on, config)
return config
},
},
})Adapt the configuration style and location to the project rather than replacing existing event handlers. If Cypress has both E2E and component testing configured, ensure the relevant mode loads the support import and Node task setup.
Run tests and verify the generated report
Start or build the instrumented application using the project’s normal scripts, then run Cypress in the mode you configured. The plugin writes raw coverage data under .nyc_output and creates an HTML report at coverage/index.html. Open that HTML file locally to confirm the expected source files and executed lines appear. For a terminal summary, run:
npx nyc report --reporter=text-summaryIf the report is empty, check instrumentation and support-file loading before changing Codecov settings: Codecov can only process coverage data that the test run actually produced.
Upload coverage from GitHub Actions
Place the upload step after the Cypress run, in the same job workspace where the report is available. Codecov’s GitHub Actions documentation shows codecov/codecov-action@v5 and a CODECOV_TOKEN secret. The Cypress command is intentionally project-specific: it must start the correctly instrumented app and run the relevant E2E or component tests.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
name: Cypress coverage
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v7
- name: Install dependencies
run: npm ci
- name: Run Cypress and create coverage
run: <project-specific command that starts the instrumented app and runs Cypress>
- name: Upload coverage reports to Codecov
uses: codecov/codecov-action@v5
env:
CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}Set up the repository secret according to the current Codecov instructions for your repository visibility and CI context. Codecov’s quick start currently recommends its CLI and repository upload token, and its guidance favors supported built-in upload utilities that perform uploader integrity verification. Token requirements can vary, so use the current Codecov quick start and GitHub Actions instructions rather than older workflow examples. Cypress also maintains a GitHub Actions CI guide.
When a browsable report is useful after the job finishes, configure CI to preserve the coverage directory as an artifact. This is separate from uploading coverage to Codecov.
Choose the setup that matches your project
- Build tool: use the Vite-specific
vite-plugin-istanbulroute for Vite, or an Istanbul/nyc/Babel approach appropriate to other builds. - Test mode: E2E and component tests can use the plugin, but each mode must load its support import from its own support file.
- Coverage scope: frontend-only coverage may suit a frontend project; instrument and merge backend coverage if you want a fuller full-stack report.
- Upload method: use Codecov’s current CLI guidance or the provider’s maintained upload integration, matching token and repository requirements to your CI context.
Troubleshooting common failures
- No coverage file or an empty report: verify that the application build is instrumented, the tested app is the instrumented instance, and the plugin support import runs in the test mode being used.
- Component tests show no coverage: put the support import in the component support file, not only the E2E support file.
- Task registration or config changes appear ineffective: confirm the coverage task is registered inside
setupNodeEventsand that the callback returns the config object. - Report exists locally but upload fails in CI: check that the report is generated in the same job workspace before the upload step, that the configured secret is available to that workflow, and that the upload method matches Codecov’s current instructions for the repository and CI context.
- Coverage points to generated files: review instrumentation include/exclude settings and source-map configuration so the report focuses on application code and can resolve original source where supported.
- An older Cypress version conflicts with the plugin: compare the installed versions with the plugin’s current compatibility listing before adopting its setup.
Or skip the browser setup
If your goal is to capture clean screenshots of a website rather than measure Cypress test coverage, ScreenshotNeo offers a one-request screenshot API and an MCP server. It is not a replacement for Cypress coverage or a Codecov uploader. A cURL example is:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation. ScreenshotNeo removes cookie banners, popups and chat widgets before capture; bot checks, blank pages and failed loads are not billed; its MCP server lets AI agents take screenshots; and the free plan includes 1,000 screenshots a month with no card, while paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card required.
Recommended Free Tools
Frequently Asked Questions
Does adding Codecov to a Cypress project create coverage automatically?
No. The application must be instrumented before Cypress runs; the coverage plugin collects data from that instrumented code.
Can I use Cypress code coverage with component tests?
Yes. Configure the plugin for the component test mode and load its support import from the component support file.
Is code coverage the same as Cypress UI Coverage?
No. Code coverage tracks executed source code, while UI Coverage concerns interface elements exercised by tests.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →
