Andres Vargas - zodman

Get Coverage Report From Angular With Cypress

In my previous post, I talk how you can get coverage report with selenium.

If you remember, you have instrumented the application, well now I have implemented with angular.

Basically works on the same way, you have to instrument the application with angular, and then get the window.__coverage__ populated. For getting the coverage report.

Actually I’m working with cypress+angular+nestjs it’s a OOP combo because all can handle ts with object-oriented.

Let’s jump in.

Instrument Angular

If you were working with recent versions of angular, you know how the angular works.

You run:

npx ng serve

✔ Compiled successfully.
✔ Browser application bundle generation complete.

Initial Chunk Files | Names   | Raw Size
runtime.js          | runtime |  7.21 kB |

4 unchanged chunks

Then you get your application getting up and running behind the port http://localhost:4200 for example.

And that because the is using internally webpack to transpile your typescript code and convert it to JS and create multiple files to be served like static files.

Well, here is where you have to put something when the webpack is transpiling the code to JS, get the code instrumented.

Natively angular doesn’t support this; you need to extend the webpack to transpile getting instabul on it.

There are two options to apply this is using:

plus (npm install):

Both have the same objective, extends the webpack configuration. For instrument the code with istanbuljs.

// angular.json
 "serve-cov": {
          "builder": "ngx-build-plus:dev-server",
          "configurations": {
            "development": {
              "browserTarget": "app:build:development"
          "defaultConfiguration": "development",
          "options": {
            "extraWebpackConfig": "./coverage.webpack.js"

// coverage.webpack.js
module.exports = {
  module: {
    rules: [
        test: /\.ts$/,
        use: {
          loader: "babel-loader",
          options: {
            plugins: ["babel-plugin-istanbul"],
        enforce: "post",
        include: require("path").join(__dirname, "src"),
        exclude: [/node_modules/, /cypress/, /\.(e2e|spec)\.ts$/, /\.json$/],

Then you can execute:

npx ng run serve-cov

Will be up and running the ng serve but instrumented with window.__coverage__

Then execute the cypress with coverage

npm i --save @cypress/code-coverage
npx cypress run --config baseUrl=http://localhost:42000

And you get the coverage report

Some examples based is:

#Opensource #Cypress #Coverage #Code