Code coverage for Protractor tests in AngularJS

Question

I am running some e2e tests in my angularJS app with protractor (as recommended in the angularJS documentation). I've googled around and cannot find any information on how to measure coverage for my protractor tests.

I think I'm missing something here... is there any way to get a code coverage report for protractor e2e tests? Or is it simply a feature for unit tests?

Answer 1

This is achievable using Istanbul. Here is the process, with some example configurations that I've extracted from our project (not tested):

1. Instrument your code using the command istanbul instrument. Make sure that istanbul's coverage variable is __coverage__.

   // gulpfile.js
   
   gulp.task('concat', function () {
       gulp.src(PATH.src)
         // Instrument for protractor-istanbul-plugin:
         .pipe(istanbul({coverageVariable: '__coverage__'}))
         .pipe(concat('scripts.js'))
         .pipe(gulp.dest(PATH.dest))
   });
   

2. Configure Protractor with the plugin protractor-istanbul-plugin.

   // spec-e2e.conf.js
   var istanbulPlugin = require('protractor-istanbul-plugin');
   
   exports.config = {
       // [...]
       plugins: [{ inline: istanbulPlugin }]
   };
   

3. Run your tests.

4. Extract the reports using istanbul report.

This approach has worked for me and is easy to combine with coverage reports from unit tests as well. To automate, I've put step 1 into my gulpfile.js and step 3 and 4 in the test and posttest scripts in package.json, more or less like this:

// In package.json:
"scripts": {
  "test": "gulp concat && protractor tests/spec-e2e.conf.js",
  "posttest": "istanbul report --include coverage/**/.json --dir reports/coverage cobertura"
},