Example of Cypress.io code coverage collected from webpack dev server
Webpack dev server setup following blog post Webpack with Babel 7 Project Setup.
Install and start
npm ci npm start
Find examples of end-to-end and unit tests in cypress/integration/spec.js file.
Application's source code is instrumented via Webpack + Babelrc. The instrumentation is only enabled in
NODE_ENV=test environment via the
env option in .babelrc file. This file is used to transpile source code because of webpack.config.babel.js
To serve the app using webpack-dev-server with instrumented app and open Cypress use:
npm run dev
window.__coverage__ object in the application iframe:
To run headless end-to-end tests and have coverage use:
npm run e2e
cy.visit) you are effectively doing unit tests in Cypress. To instrument those files, you need to insert Istanbul plugin into the bundler Cypress uses to bundle the spec files. Since this project already uses Webpack, install @cypress/webpack-preprocessor
npm i -D @cypress/webpack-preprocessor
Then set that preprocessor to transpile spec files and use same settings as your regular Webpack in cypress/plugins/index.js file.
You should see instrumented source files in the
Spec iframe when Cypress runs.
Cypress code coverage plugin automatically combines end-to-end and unit test code coverage information and produces a combined report.
The coverage HTML and other reports are saved into folder
coverage. You can open HTML report with
See package.json for all NPM scripts.
- Read Cypress code coverage guide