AngulrJS + Grunt + Protractor: keepAlive and watch

Question

I'm currently playing around with E2E tests an Protractor in my AngularJS app and Grunt. I followed the installation from https://www.npmjs.org/package/grunt-protractor-runner, and I have 2 questions:

First:

I was wondering, if it's possible, to have that behaviour from my unit tests with Karma:

• start the test server
• run all tests
• when a test file or any other html/js file changes, re-run all tests

I like that way with live watch and auto reloading very much, because it reduces the startup time from the whole suite, and makes everything faster.

But with Protractor, I have a problem: Everytime I start the test with Grunt, the tests are executed, and then everything shuts down. Although, I set the keepAlive option to true in the protractor configuration part of my Gruntfile.js. Any ideas?

Second:

I can't get it to work, to connect Protractor to my angular app. Do I have to start the grunt server, to serve the files? When I try to visit a page in my tests like browser.get('app/index.html'); or browser.get('#/');, I can't access the page. I've played around with the baseUrl option (like baseUrl: 'http://localhost:' + (process.env.HTTP_PORT || '8000')) from my protractor.conf.js. But to me it looks like, I have to start the grunt server before, am I right? And how can I do this? Or are there any other options for accessing my angular app? I'm using sass with compass, so I think, I need the compass:dist taks in some way.

UPDATE:

I found a workaround. I registered the following grunt task:

  grunt.registerTask('e2e', [
    'clean:server',
    'concurrent:test',
    'autoprefixer',
    'connect:test',
    'concurrent:server',
    'autoprefixer',
    'protractor',
    'watch'
  ]);

When started with grunt e2e my server gets started, based on the baseUrl: 'http://10.0.0.200:9001' inside my protractor.conf.js, and my tests are running. When the tests are completed, the watch task watches for changed files, and reruns protractor if needed.

The drawback of this is, that everytime watch starts the protractor task, a new Chrome instance is spawned, and after the test killed. Is there a way to prevent protractor from killing the Chrome instance?

Furthermore, I was wondering why in every tutorial it always says sth like "Just run grunt protractor and your tests are executed...". Why do I need an additional task for starting up my grunt server to access my angularjs application?

And here are my config files:

protractor.conf.js

exports.config = {
  capabilities: {
    'browserName': 'chrome'
  },
  chromeOnly: true,
  specs: ['test/e2e/**/*.js'],

  jasmineNodeOpts: {
    showColors: true
  },
  framework: 'jasmine'
};

Gruntfile.js

module.exports = function(grunt) {

  // Load grunt tasks automatically
  require('load-grunt-tasks')(grunt);
  grunt.loadNpmTasks('grunt-protractor-runner');

  grunt.initConfig({
    // ...
    protractor: {
      options: {
        configFile: "protractor.conf.js",
        keepAlive: false,
        noColor: false
      },
      run: {}
    },
    // ...
  });

  // ...

  grunt.registerTask('test:e2e', [
    'clean:server',
    'compass:dist',
    'compass:server',
    'autoprefixer',
    'connect:test',
    'protractor'
  ]);

  // ...
}

thanks!

Answer 1

I was wondering, if it's possible, to have that behaviour from my unit tests with Karma:

Typically, you wouldn't run E2E tests after every HTML change. The main reason for this is that running E2E tests can take a long time as you add more and more tests. Therefore to answer the question, I don't believe there is any built in way to support running E2E tests after each change in the same browser. I'd recommend using Unit Tests as a mechanism to test after each change and running your E2E tests manually.

Do I have to start the grunt server, to serve the files?

Yes, you need to start a server to run your protractor tests against. You aren't starting a "grunt server", you're actually starting a web server that Selenium will use which is the engine Protractor uses for its tests. This is one of the major differentiating factors (among others) between using Protractor and ng-scenario.

Is there a way to prevent protractor from killing the Chrome instance?

Once again, I don't believe that Protractor was meant to be used like this since you shouldn't need to run your E2E test after each change. To answer the question though, I don't believe so.

Why do I need an additional task for starting up my grunt server to access my angularjs application?

Same answer as above in regards to Selenium.

Answer 2

Why do I need an additional task for starting up my grunt server to access my angularjs application?

As a separation of concern Protractor does not manage the spinup and teardown of a web server to run the tests, this is a different approach from Karma . I would imagine this is due to the fact that the tests are run on the server side, where a web browser is "driven" to perform actions from your test code.

Is there a way to prevent protractor from killing the Chrome instance?

Short answer NO.
Long answer, you can use the debug option and set a breakpoint in your code, but that's probably not what you are looking for. The keepAlive option you tried only keeps the browser alive if a test fails, it doesn't keep the browser up once the tests are over.

This question might be of interest to you.

Answer 3

In addition to @Always Learning answer which i think is the right one.

What you are trying to do is Continuous Integration, this is a practice in which every time someone working on a Project makes a change and commit, the entire quality checks are executed (Static code analysis, Unit test, Compilation/dependencies, E2E test, etc)

That shouldn't be executed in the developer's environment, that should be executed using a Continuous integration tool like Jenkins I recommend you to check it out because is a very useful tool, it can run all the task that you need, send you messages when something is wrong or previous errors were fixed, and even you can make him deploy the final Build on production environments once is finished

Answer 4

Came across this question when I was trying to do the exact same thing...pretty new to gulp (not sure if I'm doing all things right) but this works for me:

I used gulp-angular-protractor instead of gulp-protractor for the webdriver auto start/stop tasks.

The sample below just watches the 'specs' folder, but it can be easily changed. Remove 'browsersync' if you're not using it and just start your localhost server beforehand on your desired port.

var config = require('./config');
var gulp = require('gulp');
var browserSync = require('browser-sync');
var watch = require('gulp-watch');
var angularProtractor = require('gulp-angular-protractor');

gulp.task('e2e', [
    'browserSync',
    'protractor',
    'watch-e2e'
]);

gulp.task('watch-e2e', function () {
    gulp.watch('e2e-tests/**/*.js', ['protractor']);
});

// Setting up the test task
gulp.task('protractor', function(callback) {
    gulp
        .src(['e2e-tests/**/*.js'])
        .pipe(angularProtractor({
            configFile: './karma-e2e.conf.js',
            args: ['--baseUrl', 'http://127.0.0.1:3002'],
            debug: false,
            autoStartStopServer: true
        }))
        .on('error', function(e) {
            console.log(e);
            this.emit('end'); // Prevents task stopping on error
        })
        .on('end', function() {
            // Close browser sync server
            browserSync.exit();
            callback();
        });
});

Answer 5

Is there a way to prevent protractor from killing the Chrome instance?

I believe you can pause the browser by using:

browser.pause();

Answer 6

Answer to old problem.... I like the Ruby FileWatcher Gem

gem install filewatcher filewatcher . "protractor my-protractor-conf-file.conf.js"

It works for all sorts of problems. I use it to re-run AsciiDoctor on my training docs whenever I hit save.