recording videos of Protractor e2e tests

问题

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?

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

回答2:

I've implemented that using Selenoid + Jasmine Allure Reporter Selenoid 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!

回答3:

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.exe
let 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.

回答4:

If you're looking for recording software, you can get something like Open Broadcaster software which is a free program. With this program you can designate 'scenes' which are portions of your screen, or you can just record the entire main desktop screen. Here is a tutorial on scenes with OBS.

来源：https://stackoverflow.com/questions/38860261/recording-videos-of-protractor-e2e-tests

标签

selenium

protractor

e2e-testing