recording videos of Protractor e2e tests

protractor record test
protractor test generator
protractor testing
protractor tutorial
selenium grid video recording
testrec
protractor style guide
protractor script generator

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?

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

recording videos, Feature Request: recording videos - protractor-cucumber-framework We are using "protractor-cucumber-framework" for our E2E tests which run� recording videos of Protractor e2e tests. Ask Question Asked 3 years, 8 months ago. Active 4 months ago. Viewed 4k times 1. 3. I use Protractor and gulp to test an

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!

protractor-video-reporter, A jasmine2 reporter to capture a video screen cast of Protractor specs run with xvfb. Watch the recordings here! a headless browser, e.g. under Xvfb. This is especially usefull for debugging you e2e specs on you CI server. Records Protractor E2E test scripts. A recorder built for Protractor E2E tests To use go to the tab you wish to start tests on, open chrome dev tools by clicking F12 or right clicking and clicking

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.

recording videos of Protractor e2e tests - selenium - java, 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� In Angular Karma and Jasmine framework are mostly used to write unit tests. E2E testing. With e2e testing you can go through the GUI like a user does. Clicking buttons, pages, menu's,CRUD. (not in production) Most common use for E2E testing with Angular is Selenium web-driver with Protractor. So for testing your code it is useful to use unit tests.

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.

TestRec, Enjoy the videos and music you love, upload original content, and share it all with friends Duration: 4:00 Posted: Nov 1, 2016 End2End Testing with Protractor Christian Waldmann. @wachri Content. E2E; Protractor; Setup; Async vs. Flow ; Basic principles; Page Object; Protractor test helper; Debugging; Learnings; E2E. End-to-end testing is a methodology used to test whether the flow of an application is performing as designed from start to finish.

An Introduction to AngularJS End to End Testing with Protractor , video is the recording of the August 2013 DFW Area AngularJS Meetup where Jim Lavin Duration: 1:14:43 Posted: Aug 16, 2013 The rest of the tutorial is dedicated to writing Protractor tests in Angular. Protractor Basics. The spec file, ending with .e2e-spec.ts, will host the actual tests for our application. We will be placing all the test specs inside the e2e directory since that's the place we've configured Protractor to look for the specs.

selenium: 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� Also, it supports video recording (if being run headlessly) which makes it even easier to trace why an E2E test has failed. Problem 4: It is hard to trace the executed commands Cypress got its own test running, which contains a log and a snapshot for each action taken.

Testrec, Automatic PageModel-extraction (?). Premium Support. License, Free for Non- Commercial use, Commercial License. Demo Video� PROTRACTOR is an automation and end-to-end behavior-driven testing tool that plays an important role in the Testing of AngularJS applications and works as a Solution integrator combining powerful technologies like Selenium, Jasmine, Web driver, etc. The purpose of Protractor Testing is not only to test AngularJS applications but also for

Comments
  • Why are you wanting to record the video? Recording it won't tell you anything beyond what you see when the page comes up. You can use browser.pause() or browser.debugger() to debug it and see what you have up on the page.
  • It's useful for QA members that are not technical, they just need a way to be able to view all the tests that passed and broke in a recorded fashion then play it back and see visually, at what point something broke; we're already taking screenshots on faillure but I wanted to have a .mp4 like SauceLabs does where you can play back
  • It also saves development time because sometimes the error thrown is not clear like "unable to click element, other element would receive the click" I understand what this error says but being able to quickly go back and play the video that was recorded by the CI server would give me even more insight into exactly how that happened. I think this would help a ton of people working on setting up CI pipelines for their e2e tests
  • Recording e2e tests can be useful on a project integration when your team does not manage every pages of the project. When expected behavior suddenly changes, non technical people are able to see what have changed and what happened during the tests.
  • Is there a way to make this work with headless chrome?
  • No, unfortunately it did not work with headless browsers, we were using Jenkins to automate builds and end to end testing with protractor (selenium for angular) and my team needed video recording to see if failing tests were due to an external breaking change, like the standardized login page across several apps which we didn't manage. Also ffmpeg needs an active desktop under windows to be able to capture.
  • do you have sample code ? did you use protractor with Selenoid ? I'm unable to use selenoid with protractor. will it work for headless mode ?
  • Yep, I'm using Selenoid with Protractor about 1 year so far - it just works without any issues and 100% stable. What exactly doesn't work for you?
  • Hey amiller, thanks for your response; I'm NOT looking for recording software; I'm looking for a way that's integrated or interfaces with protractor to record your e2e tests as they run; something like this: github.com/tepez/protractor-video-reporter; problem with that link is it's using the Jasmine framework; I'm looking for one that works with the Cucumber framework not Jasmine. Also, I'm looking to achieve this with Bamboo NOT Jenkins so I can NOT use any Jenkins plugins.