recording videos of Protractor e2e tests recording videos of Protractor e2e tests selenium selenium

recording videos of Protractor e2e tests


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! :)


I've implemented that using Selenoid + Jasmine Allure ReporterSelenoid is generating video and you could attach it to the Allure Report as an attachment:

browser.getSession().then(sessionData => {          let sessionID = sessionData.id_;          allure.createAttachment('Video MP4', () => new Buffer("<html lang='en'><body><video width='100%' height='100%' controls autoplay><source src='"            + "https://<selenoid_host>:5443/video/" + sessionID + ".mp4"            + "' type='video/mp4'></video></body></html>", 'utf-8'), 'text/html')();

Selenoid is really cool tool and with it I have no more pain at all!


Create your own custom reporter with jasmine and ffmpeg.Download ffmpeg from https://www.ffmpeg.org/download.html

Here is how I did it

In protractor.conf.js,

let cp = require('child_process');let ffmpegCmd = 'C:\\Downloads\\ffmpeg.exe'; //Path to your ffmpeg.exelet ffmpegArgs = ['-y','-framerate','30','-f','gdigrab','out.mov'];let spw = "";onPrepare:()=> {   jasmine.getEnv().addReporter({       jasmineStarted: (result)=> {          spw = cp.spawn(ffmpegCmd, ffmpegArgs);          spw.stdout.on('data',function(data) {          });          spw.stderr.on('data',function(data) {              console.error(data)          });          spw.on('close',function(data){console.log(data)});       },       specStarted: (result)=> {       },       specDone: (result)=> {       },       jasmineDone: (result)=> {          spw.kill();       },       suiteDone: (result)=> {       }   })}

For my case I wanted to start capturing at jasmine start and kill at jasmine end. Depending on your use case, you could decide when you want to spawn ffmpeg or kill it.