recording videos of Protractor e2e tests

Question

I use Protractor and gulp to test an angular application.

I'm looking for a way to record videos for my Protractor e2e tests so that I can play them back as .mp4 or whatever other forms that can be opened on Windows 10.

Has anyone accomplished this? Could you suggest maybe some useful links or code?

Answer 1

There's an npm package that allows you to record protractor e2e tests using ffmpeg binaries: https://www.npmjs.com/package/protractor-video-reporter

It also generates subtitles with each spec names in the video so you quickly know which test is running and see which one succeeded/failed.

The only thing you need to do is add a new reporter in your protractor-config.js file.

You can either record a window or the whole desktop.

With version 0.3.0 of protractor-video-reporter, I also had to override it's internal jasmineStarted function to be able to rename the outputted video name and extension (as I was unable to play back .mov)

Here's my current config on windows 10:

...
onPrepare: () => {    

  ...
    //TODO remove function override to be able to change the single video containing all spec's name when PR merged
    //TODO https://github.com/tomyam1/protractor-video-reporter/pull/18
    VideoReporter.prototype.jasmineStarted = function() {
      var self = this;
      if (self.options.singleVideo) {
        var videoPath = path.join(self.options.baseDirectory, 'protractor-specs.avi');

        self._startScreencast(videoPath);

        if (self.options.createSubtitles) {
          self._subtitles = [];
          self._jasmineStartTime = new Date();
        }
      }
    }; 

    jasmine.getEnv().addReporter(new VideoReporter({
          baseDirectory: path.normalize(path.join(__dirname, '../testresults/videos/')),
          createSubtitles: true,
          singleVideo: true,
          ffmpegCmd: path.normalize('./node_modules/ffmpeg-binaries/bin/ffmpeg.exe'),
          ffmpegArgs: [
              '-f', 'gdigrab',
              '-framerate', '24',
              '-video_size', 'wsxga',
              '-i', 'desktop',
              '-q:v','10',
          ]
        }));

},
...

You can play with ffmegArgs to fit your needs. Some arguments have to be defined in a certain order, else, if there's an error with the parameters, ffmpeg will silently terminate and no video's will be recorded. When this happens, you can output error messages from ffmpeg process if you enable debugging in this package's VideoReporter.js file : (node_modules/protractor-video-reporter/lib/VideoReporter.js)

...
function VideoReporter(options) {

      var self = this;

      debug.enabled = true;
...

On Mac OSX, it seems the bundled ffmpeg binary didn't include qttask or avfoundation, so I had to install it manually with brew :

brew install ffmpeg --with-libass --with-fontconfig

Here's my current config for Mac OSX :

         jasmine.getEnv().addReporter(new VideoReporter({
              baseDirectory: path.normalize(path.join(__dirname, '../testresults/videos/')),
              createSubtitles: true,
              singleVideo: true,
              ffmpegCmd: path.normalize('/usr/local/bin/ffmpeg'),
              ffmpegArgs: [
                  '-f', 'avfoundation',
                  '-i', '1',
                  '-pix_fmt','yuv420p',
                  '-r','24',
                  '-video_size', 'woxga',
                  '-q:v','10',
              ]
          }));

Happy e2e recording! :)