Setting up Continuous Integration of Protractor using Jenkins

Question

I am writing automation test scripts using Protractor and now I need to set up the CI for this using Jenkins.

Tasks it needs to perform are:

1. Starting the selenium standalon server.
2. Starting the test using conf.js file.
3. Stopping the selenium standalone server.

Can anyone help in this regard?

Answer 1

I created a small bash script to do this.

# start selenium
./node_modules/protractor/bin/webdriver-manager start > /dev/null 2>&1 &

# wait until selenium is up
while ! curl http://localhost:4444/wd/hub/status &>/dev/null; do :; done

# run the build
grunt cibuild --force

# stop selenium
curl -s -L http://localhost:4444/selenium-server/driver?cmd=shutDownSeleniumServer > /dev/null 2>&1

This script is invoked from a free-style project in jenkins (Build > Execute shell)

Then the test result report is generated by reading the protractor test results. Hence, you have to produce junit reports from protractor, (look here) :

onPrepare: function() {
  // The require statement must be down here, since jasmine-reporters
  // needs jasmine to be in the global and protractor does not guarantee
  // this until inside the onPrepare function.
  require('jasmine-reporters');
  jasmine.getEnv().addReporter(
    new jasmine.JUnitXmlReporter('xmloutput', true, true));
},

To make the report visible in jenkins i add a post build action in the job: Publish JUnit test result report:

Answer 2

Alternatively, you could run this as a Grunt Task. First install grunt on Jenkins. Install the NPM packages for protractor_webdriver and protractor. Setup the configuration file to point the the node_module path and config file paths.

http://sideroad.secret.jp/articles/grunt-on-jenkins/

Then install protractor node modules. The Gruntfile would look similar to this. I created a test directory where the conf and spec files would be located.

module.exports = function (grunt) {
  grunt.initConfig({
    protractor_webdriver: {
        your_target: {
            options: {
                path: 'node_modules/protractor/bin/',
                command: 'webdriver-manager start'
            }
        }
    }, 
    protractor: {
        options: {
            configFile: "node_modules/protractor/referenceConf.js", // Default config file
            keepAlive: true, // If false, the grunt process stops when the test fails.
            noColor: false, // If true, protractor will not use colors in its output.
            args: {
            // Arguments passed to the command
            }
        },
        your_target: {
            options: {
                configFile: "test/conf.js", // Target-specific config file
                args: {} // Target-specific arguments
            }
        }
    }
});

grunt.registerTask('p:test', [
    'protractor_webdriver',
    'protractor'
]);  
});

Answer 3

The newest protractor allows you to run the selenium standalone server directly from the conf.js (or whatever protractor entry point you have).

comment out (or delete) the seleniumAddress: 'http://localhost:4444/wd/hub', line, and replace it with seleniumServerJar: './node_modules/protractor/selenium/latest.jar'.

latest.jar isn't installed by default, I created it as a symlink to the latest version installed via npm install protractor --save. This gives longer life to my conf.js files in the same directory. Within the ./node_modules/protractor/selenium/ folder I ran ln -s selenium-server-standalone-2.48.2.jar latest.jar

Answer 4

You can use Gulp which is far simpler.

After installing gulp in Jenkins System , you may install the npm dependencies(npm install) & run gulp tasks directly as windows batch command in Jenkins as below:

In the background to make selenium server up and running and providing various other parameters , you may use packages like 'gulp-angular-protractor' in the gulpfile.js as below:

gulpfile.js

'use strict';

 var gulp = require('gulp'),
 gulpProtractorAngular = require('gulp-angular-protractor'),
 gulpStart = gulp.Gulp.prototype.start,
 currentStartTaskName;

 gulp.Gulp.prototype.start = function (task) {
    currentStartTaskName = task;
    gulpStart.apply(this, arguments);
};
function executeWebTests(suiteName, appName) {
    return gulp.src([])
        .pipe(gulpProtractorAngular({
            'configFile': './conf.js',
            'debug': false,
            'autoStartStopServer': true,
            args: [
                '--suite', suiteName,
                '--capabilities.browserName', 'chrome',
                '--params.APPNAME', appName,
                '--params.SUITENAME', currentStartTaskName,
                '--capabilities.platformName', 'Windows'],
            keepAlive: false
        }))
        .on('error', function (e) {
            console.log('Ended with below ERROR::',e);
            process.exit(1);
        })
        .on('end', function () {
            console.log('Test complete');
            process.exit();
        });
}

gulp.task('RegressionSuiteTask', function () {
    executeWebTests('regressionTests,','Application_Name');
});

conf.js

 suites: {
          regressionTests: ['testCases/**/*.js']//will run all specs in subfolders 
         },

Answer 5

I know this already resolved and want to target for beginner to create Jenkins job and running test. I suggest to use selenium-server-standalone jar in configuration file and call configuration file from Jenkins.
conf.js

    ..  
    exports.config = {
        //seleniumAddress: 'http://localhost:4444/wd/hub',  
        seleniumServerJar: 'node_modules/protractor/node_modules/webdriver-manager/selenium/selenium-server-standalone-3.5.3.jar',
    ....
    //html reporter logic
    .....

Creating Jenkins Job

• Install node js on Jenkins Server

• Install Html Publisher Plugin for end to end testing report

• Create Freestyle Project or whatever your needs

• Go to Build Section -> Add build step and choose Execute Windows batch command if Jenkins server in Windows otherwise choose Execute Shell for Linux

• Call conf.js (install packages and call your configuration file)

• For reporting Got to Post-Build Actions Section -> Add Publish Html Reports and call your report file (file assuming from root of your project)

However you can customize execution command using gulp or similar other packages. Thanks