1. Introduction

This article shows how to use the Protractor/Gulp Automation Tool to test AngularJS Applications and how to implement it through using IBM Cloud DevOps Delivery pipeline.One of the reasons AngularJS is gaining in popularity because it was developed around the idea that testing is so important that it should be built into the framework.AngularJS is a framework that extends the functionality of HTML and can be used to quick launch applications.

Protractor is an open source functional automation framework designed specifically for AngularJS web applications. It was introduced during AngularJS 1.2 as a replacement of the existing E2E testing framework. Gulp is another automation tool that helps to run our JavaScript files. We can write our protractor script in separate JS files and instruct gulp to run all the JS files one by one. Here we will use to run protractor test using Gulp.

I.What is an End to End test?

An end to end test runs against the front-end of a fully functional application. In the case of a web application, this implies driving a browser that loads pages, runs Javascript, interacts with the DOM, fills and submits forms, and so forth. In our quest for a scenario based functional automation framework to automate the UI and functionality of the AngularJS web application, we zeroed in on the Protractor and Gulp Automation tool.

You might compare this with unit testing, wherein a unit test runs against a small piece of functionality in isolation. The remaining test coverage of the codebase can be ensured with end to end tests using Protractor and Gulp.

II.Prerequisite

Protractor is a Node.js program built upon WebDriverJS. To run, you will need to have Node.js installed. You will download Protractor package using npm, which comes with Node.js. Check the version of Node.js you have by running node –version. Then, check the compatibility notes in the Protractor README to make sure your version of Node.js is compatible with Protractor.

By default, Protractor uses the Jasmine test framework for its testing interface. This article will set up a test using a standalone Selenium Server to control browsers. You will need to have the Java Development Kit (JDK) installed to run the standalone Selenium Server. Check this by running java -version from the command line.

III. Browser supports

Protractor uses WebDriver to drive browsers, any issues with WebDriver implementations (such as FireFoxDriver, ChromeDriver,SafariDriver and IEDriver) will show up in Protractor. Protractor supports the two latest major versions of Chrome, Firefox, Safari, and IE. we recommend against using PhantomJS for tests with Protractor. There are many reported issues with PhantomJS crashing and behaving differently from real browsers.

IV.How it works: Understanding Architectural Diagram and Process communication

When working with Protractor, you need to specify how to connect to the browser drivers which will start up and control the browsers you are testing on. You will most likely use the Selenium Server. The server acts as proxy between your test script (written with the WebDriver API) and the browser driver (controlled by the WebDriver protocols). The server forwards commands from your script to the driver and returns responses from the driver to your script. Architecture diagram is depicted at Figure 1 below.

Architecture diagram-IBM Cloud DevOps

Figure 1*: Architecture Diagram

Process communication: A test using Selenium WebDriver involves three processes – the test script, the server, and the browser. The communication between these processes is shown in the diagram (Figure 2) below.

Process communication-IBM Cloud DevOps

Figure 2*: Process communication:

*reference link: https://github.com/angular/protractor/blob/master/docs/infrastructure.md

Protractor works in conjunction with Selenium to provide an automated test infrastructure that can simulate a user’s interaction with an Angular application running in a browser or mobile device. Your test scripts send commands to the Selenium Server using http protocol, which in turn communicates with the browser driver using JSON Webdriver Wire Protocol.

2.Covering scenario and solution

To accelerate your automated browser testing Protractor or Gulp test scripts is configured as a Build job in an IBM Cloud DevOps pipeline. The test scripts can run as unit tests against your web application as part of your continuous delivery process.

I.Problem statement:Fundamental concept of delivery pipeline says that Input from the stage is passed to its jobs, and each job runs in a clean Linux container. The jobs in a stage can’t pass artifacts to each other, so in that sense invoking Protractor/Gulp run command which require another session to execute is not possible using another stage or another job of same stage because After a job runs, the container that was created for it is discarded or in case of another job at same stage it can’t pass artifacts to each other.

Second issue is that there are times when you don’t want a browser popping each time you execute the test. Or you just don’t have privilege of having a browser display like in UNIX based system running your CONTINOUS INTEGRATION and not having any display. These are the times when you would find it right to execute your tests in headless browser mode.

II.Solution in brief:Proposed solution is to execute the step for getting the running instance of selenium standalone server in background and then perform Protractor/Gulp command after that.

For display issue which Is common to Linux based container, Idea is to use “Xvfb” which is a virtual display framebuffer for X – the display system used by Linux. It provides a fake display buffer for graphical programs to write to, thus allowing any program to run headlessly.

3.Method to write and run an angular test using Protractor

Protractor needs two files to run, the test or spec file, and the configuration file. Even you want to run Protractor task as gulp, so there you too need these files.

I.Specification File

Let’s start with a simple test that navigates to an example AngularJS application where it requires some name need to be filled so that browser send your given name back to client.

describe('angularjs homepage', function() {
it('should greet the named user', function() {
browser.get('http://www.angularjs.org');

element(by.model('yourName')).sendKeys('Julie');

var greeting = element(by.binding('yourName'));

expect(greeting.getText()).toEqual('Hello Julie!');
});

This example uses Jasmine which is a Behavior-driven development(BDD) testing framework for JavaScript to write our Protractor test in. Explanations have been given to used syntax in above example.

describe – is a test suite that begins with a call to the global Jasmine function describe with two parameters: a string and a function.

it – Specs are defined by calling the global Jasmine function it.

Expectations -Expectations are built with the function expect which takes a value, called the actual. It is chained with a Matcher function, which takes the expected value.

Additionally, Protractor provides some new locator strategies and functions which are very helpful to automate the AngularJS application. Examples include things like:

waitForAngular, By.binding, By.repeater, By.textarea, By.model, WebElement.all, WebElement.evaluate, etc.

II.Configuration File

The configuration file tells Protractor how to set up the Selenium Server, which tests to run, how to set up the browsers, and which test framework to use. The configuration file can also include one or more global settings.


exports.config = {
// Capabilities to be passed to the webdriver instance.
specs: ['example_spec.js'],
capabilities: {
'browserName': 'chrome'
},
framework: 'jasmine2',
// Options to be passed to Jasmine-node. For example, if you are using Jasmine, you can
// add a reporter with:
onPrepare: function() {
var jasmineReporters = require('./node_modules/jasmine-reporters');
jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter({
consolidateAll: true,
savePath: 'testresults',
filePrefix: 'xmloutput'
}));
},
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 3000000
}
};

This configuration also tells Protractor where your test files (specs) are, and where to talk to your Selenium Server (seleniumAddress). In above case, we have not specified any selenium address as we want to execute step in background using “webdriver-manager” helper tool to easily get an instance of a Selenium Server running. These command are fully scripted as part of Build Jobs. We will be observing these set of commands with their proper explanation in later phase of this paper ( i.e covered at Point # 5).

Configuration file also specifies that we will be using Jasmine for the test framework. It will use the defaults for all other configuration. Chrome is the default browser. In Node.js, jasmine-reporters exports an object with all the reporters. You can use multiCapabilities array for using more browsers. The reference config file file provides explanations for all of the Protractor configuration options. Default settings include the standalone Selenium Server, the Chrome browser, and the Jasmine test framework.

4.Method to write and run an angular test using Gulp

Gulp is an automation tool which runs several java scripts as task. Using gulp.task() API we can run any JavaScritpt file. Here gulp.src() takes the script file name as argument. In our case protractor.conf.js is the file name. We can run multiple js files. gulp protractor command is used to run protractor test scripts. Below is the example of typical gulpfile configuration.

I. gulpfile configuration

To run your Run your angular protractor tests with gulp.


var gulp = require('gulp');
// The protractor task

var protractor = require("gulp-protractor").protractor;
webdriver_update = require("gulp-protractor").webdriver_update;
gulp.task('webdriver_update', webdriver_update);

// Download and update the selenium driver
var webdriver_update = require('webdriver_update');

// Downloads the selenium webdriver
gulp.task('webdriver_update', webdriver_update);

// Setting up the test task
gulp.task('protractor',['webdriver_update'],function(cb) {
gulp.src(['example_spec.js']).pipe(protractor({
configFile: 'conf.js',
})).on('error', function(e) {
console.log(e)
}).on('end', cb);
});

You can also ensure that the Updated driver is installed by using the webdriver_update task,and you have started the standalone selenium server using to let the gulp task handle it with the built-in webdriver snippet.

II.gulp.task() API and running other tasks

We use only the command name “gulp” in case of task name “default” as it can automatically detect the task by default. If we mention task name at gulp.task() function then we need to mention it after gulp command. In above scripts gulp.task() api has taken “Protractor” task.

5.Understanding the Installation steps/scripts used at The IBM Cloud DevOps pipeline

I.Protractor scripts


#!/bin/bash
# The default Node.js version is 0.10.40
# To use Node.js 0.12.7, uncomment the following line:
#export PATH=/opt/IBM/node-v0.12/bin:$PATH
# To use Node.js 4.2.2, uncomment the following line:
export PATH=/opt/IBM/node-v4.2/bin:$PATH
sudo apt-get update
sudo apt-get install -y xvfb chromium-browser libpango1.0-0 fonts-liberation libappindicator1
sudo dpkg -i google-chrome-stable_current_amd64.deb
npm install protractor -g
npm install protractor
npm install gulp -g
npm install gulp
npm install jasmine-reporters -g
npm install jasmine-reporters
npm install
chmod +x node_modules
ls -lrt -a
pwd
cd node_modules
ls -lrt -a
cd protractor
pwd
ls -lrt -a
cd bin
pwd
ls -lrt -a
./webdriver-manager update --standalone
cd ..
pwd
ls -lrt -a
cd selenium
pwd
ls -lrt -a
unzip -o chromedriver_2.21linux64.zip
ls -lrt -a
pwd
cd ../bin
pwd
ls -lrt -a
webdriver-manager update --standalone
nohup webdriver-manager start --standalone &
cd ../../../
xvfb-run protractor conf.js

As all the scripts execution is done in Linux container environment so the command’s has been made compatible to run in that environment. Below I have explained pointwise description of above test scripts.

1) sudo apt-get update
– If you want to use installation of softwares as root.

2) sudo apt-get install -y xvfb chromium-browser libpango1.0-0 fonts-liberation libappindicator1 firefox

– Above command is used to install browsers. For firefix things may not complicated at all but for chrome If the automatic installation fails because of dependency problems, one simple solution is to automatically install the Chromium browser first (see hereunder), this will install most if not all necessary libraries. (On a bare system, I had to manually install libpango1.0-0 fonts-liberation libappindicator1 additionally, which posed no problem with apt-get. In addition to this Xvfb is a virtual display framebuffer for X(The display system used by Linux) is to be installed. This method is called as Run Real Browsers Headless.

3) wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

4) sudo dpkg -i google-chrome-stable_current_amd64.deb
– Install the Google Chrome Browser for Linux, download the .deb package from (https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb) distribution for your flavor of Linux Install it with above command

5) Use npm to install Protractor/Gulp globally (omit the -g if you’d prefer not to install globally): The Protractor install includes the following:

    a) protractor command line tool
    b) webdriver-manager command line tool
    c) Protractor API (library)

6) ./webdriver-manager update
– standalone is used to fix error “No Selenium Server Jar found with Protractor”. Instead of running webdriver-manager update as specified in protractor site, you should run this command instead “./node_modules/protractor/bin/webdriver-manager update”. This would update the webdriver that your app is using and voila, the error should be gone, and you should see a selenium folder in the protractor folder in your app.

7) unzip -o chromedriver_2.21linux64.zip
– To get the the unzip version of chromedriver at selnium folder.

8) Importance of webdriver-manager

    a) webdriver-manager update –standalone
    – The webdriver-manager is a helper tool to easily get an instance of a Selenium Server running. Use it to download the necessary binaries with.

    b) webdriver-manager start –standalone

– This will start up a Selenium Server and will output a bunch of info logs. Your Protractor test will send requests to this server to control a local browser. This command is using “nohup” as prefix so command executes in background, so this action allows you to use Protractor run command using another session.

9) xvfb-run protractor conf.js

– command is used to run your angularJS application using Protractor. Used with xvfb-run allow you to run protractor test using browsers like firefox and chrome in background.

II.Gulp scripts


#!/bin/bash
# The default Node.js version is 0.10.40
# To use Node.js 0.12.7, uncomment the following line:
#export PATH=/opt/IBM/node-v0.12/bin:$PATH
# To use Node.js 4.2.2, uncomment the following line:
export PATH=/opt/IBM/node-v4.2/bin:$PATH
sudo apt-get update
sudo apt-get install -y xvfb chromium-browser libpango1.0-0 fonts-liberation libappindicator1
sudo dpkg -i google-chrome-stable_current_amd64.deb
npm install protractor -g
npm install protractor
npm install gulp-protractor -g
npm install gulp-protractor
npm install gulp -g
npm install gulp
npm install jasmine-reporters -g
npm install jasmine-reporters
npm install
xvfb-run gulp protractor

For running protractor task as gulp, first install gulp-protractor as a development dependency. Then, add it to your gulpfile.js. like we used steps as part of “Protractor” scripts , here too every step is required but We don’t need to use webdriver-manager helper tool anymore as we have used “webdriver-update” task to download selenium driver and to get the running instance of selenium server. You can see in details at Point # 4(I).

Running “xvfb-run gulp protractor” search and executes gulpfile.js.

6.Run results and report generation

Once you execute protractor or gulp command it will be running the protractor test scripts that uses angularJS application. Scripts will be installing browsers dependency and will install various prerequisite npm packages before execute real commands. Here I have taken run results after gulp test scripts is been executed at Linux machine. For the convenience sake, I commensurate the results and avoid to show browser dependency results.

I.Run results


/home/pipeline/.npm-global/bin/protractor -> /home/pipeline/.npm-global/lib/node_modules/protractor/bin/protractor
/home/pipeline/.npm-global/bin/webdriver-manager -> /home/pipeline/.npm-global/lib/node_modules/protractor/bin/webdriver-manager
protractor@3.3.0 /home/pipeline/.npm-global/lib/node_modules/protractor
├── jasminewd2@0.0.9
├── q@1.4.1
├── adm-zip@0.4.7
├── chalk@1.1.3 (escape-string-regexp@1.0.5, supports-color@2.0.0, ansi-styles@2.2.1, strip-ansi@3.0.1, has-ansi@2.0.0)
├── optimist@0.6.1 (wordwrap@0.0.3, minimist@0.0.10)
├── glob@6.0.4 (path-is-absolute@1.0.0, inherits@2.0.1, once@1.3.3, inflight@1.0.5, minimatch@3.0.0)
├── source-map-support@0.4.0 (source-map@0.1.32)
├── jasmine@2.4.1 (exit@0.1.2, jasmine-core@2.4.1, glob@3.2.11)
├── saucelabs@1.0.1 (https-proxy-agent@1.0.0)
├── request@2.67.0 (aws-sign2@0.6.0, tunnel-agent@0.4.3, forever-agent@0.6.1, oauth-sign@0.8.2, stringstream@0.0.5, caseless@0.11.0, is-typedarray@1.0.0, json-stringify-safe@5.0.1, isstream@0.1.2, extend@3.0.0, tough-cookie@2.2.2, node-uuid@1.4.7, qs@5.2.0, combined-stream@1.0.5, mime-types@2.1.11, form-data@1.0.0-rc4, hawk@3.1.3, bl@1.0.3, http-signature@1.1.1, har-validator@2.0.6)
└── selenium-webdriver@2.52.0 (tmp@0.0.24, adm-zip@0.4.4, ws@1.1.0, rimraf@2.5.2, xml2js@0.4.4)
npm WARN package.json example-gulp-protractor@0.0.1 No repository field.
npm WARN package.json example-gulp-protractor@0.0.1 No license field.
protractor@3.3.0 node_modules/protractor
├── jasminewd2@0.0.9
├── q@1.4.1
├── adm-zip@0.4.7
├── chalk@1.1.3 (escape-string-regexp@1.0.5, supports-color@2.0.0, ansi-styles@2.2.1, has-ansi@2.0.0, strip-ansi@3.0.1)
├── glob@6.0.4 (path-is-absolute@1.0.0, inherits@2.0.1, once@1.3.3, inflight@1.0.5, minimatch@3.0.0)
├── optimist@0.6.1 (wordwrap@0.0.3, minimist@0.0.10)
├── saucelabs@1.0.1 (https-proxy-agent@1.0.0)
├── source-map-support@0.4.0 (source-map@0.1.32)
├── jasmine@2.4.1 (exit@0.1.2, jasmine-core@2.4.1, glob@3.2.11)
├── request@2.67.0 (tunnel-agent@0.4.3, aws-sign2@0.6.0, oauth-sign@0.8.2, forever-agent@0.6.1, is-typedarray@1.0.0, caseless@0.11.0, stringstream@0.0.5, isstream@0.1.2, json-stringify-safe@5.0.1, extend@3.0.0, tough-cookie@2.2.2, node-uuid@1.4.7, qs@5.2.0, combined-stream@1.0.5, mime-types@2.1.11, form-data@1.0.0-rc4, hawk@3.1.3, bl@1.0.3, http-signature@1.1.1, har-validator@2.0.6)
└── selenium-webdriver@2.52.0 (tmp@0.0.24, adm-zip@0.4.4, ws@1.1.0, rimraf@2.5.2, xml2js@0.4.4)
gulp-protractor@2.3.0 /home/pipeline/.npm-global/lib/node_modules/gulp-protractor
├── async@1.5.2
├── dargs@4.1.0 (number-is-nan@1.0.0)
├── event-stream@3.3.2 (pause-stream@0.0.11, duplexer@0.1.1, from@0.1.3, stream-combiner@0.0.4, map-stream@0.1.0, split@0.3.3, through@2.3.8)
├── gulp-util@3.0.7 (array-differ@1.0.0, array-uniq@1.0.2, beeper@1.1.0, lodash._reinterpolate@3.0.0, lodash._reevaluate@3.0.0, lodash._reescape@3.0.0, object-assign@3.0.0, replace-ext@0.0.1, minimist@1.2.0, has-gulplog@0.1.0, fancy-log@1.2.0, chalk@1.1.3, vinyl@0.5.3, gulplog@1.0.0, lodash.template@3.6.2, through2@2.0.1, multipipe@0.1.2, dateformat@1.0.12)
└── protractor@3.2.2 (jasminewd2@0.0.8, q@1.4.1, adm-zip@0.4.7, glob@6.0.4, optimist@0.6.1, saucelabs@1.0.1, source-map-support@0.4.0, jasmine@2.4.1, request@2.67.0, selenium-webdriver@2.52.0)
npm WARN package.json example-gulp-protractor@0.0.1 No repository field.
npm WARN package.json example-gulp-protractor@0.0.1 No license field.
gulp-protractor@2.3.0 node_modules/gulp-protractor
├── async@1.5.2
├── dargs@4.1.0 (number-is-nan@1.0.0)
├── event-stream@3.3.2 (pause-stream@0.0.11, duplexer@0.1.1, stream-combiner@0.0.4, from@0.1.3, map-stream@0.1.0, split@0.3.3, through@2.3.8)
├── gulp-util@3.0.7 (array-differ@1.0.0, array-uniq@1.0.2, beeper@1.1.0, lodash._reevaluate@3.0.0, lodash._reinterpolate@3.0.0, object-assign@3.0.0, lodash._reescape@3.0.0, replace-ext@0.0.1, has-gulplog@0.1.0, fancy-log@1.2.0, minimist@1.2.0, vinyl@0.5.3, gulplog@1.0.0, chalk@1.1.3, lodash.template@3.6.2, through2@2.0.1, multipipe@0.1.2, dateformat@1.0.12)
└── protractor@3.2.2 (jasminewd2@0.0.8, q@1.4.1, adm-zip@0.4.7, optimist@0.6.1, glob@6.0.4, saucelabs@1.0.1, source-map-support@0.4.0, jasmine@2.4.1, request@2.67.0, selenium-webdriver@2.52.0)
npm WARN deprecated graceful-fs@3.0.8: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated lodash@1.0.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0. npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
/home/pipeline/.npm-global/bin/gulp -> /home/pipeline/.npm-global/lib/node_modules/gulp/bin/gulp.js
gulp@3.9.1 /home/pipeline/.npm-global/lib/node_modules/gulp
├── interpret@1.0.1
├── pretty-hrtime@1.0.2
├── deprecated@0.0.1
├── archy@1.0.0
├── minimist@1.2.0
├── tildify@1.2.0 (os-homedir@1.0.1)
├── semver@4.3.6
├── v8flags@2.0.11 (user-home@1.1.1)
├── chalk@1.1.3 (escape-string-regexp@1.0.5, ansi-styles@2.2.1, supports-color@2.0.0, strip-ansi@3.0.1, has-ansi@2.0.0)
├── orchestrator@0.3.7 (sequencify@0.0.7, stream-consume@0.1.0, end-of-stream@0.1.5)
├── liftoff@2.2.1 (extend@2.0.1, rechoir@0.6.2, flagged-respawn@0.3.2, findup-sync@0.3.0, resolve@1.1.7)
├── vinyl-fs@0.3.14 (graceful-fs@3.0.8, strip-bom@1.0.0, defaults@1.0.3, vinyl@0.4.6, through2@0.6.5, mkdirp@0.5.1, glob-stream@3.1.18, glob-watcher@0.0.6)
└── gulp-util@3.0.7 (array-differ@1.0.0, array-uniq@1.0.2, lodash._reinterpolate@3.0.0, beeper@1.1.0, lodash._reevaluate@3.0.0, object-assign@3.0.0, lodash._reescape@3.0.0, replace-ext@0.0.1, has-gulplog@0.1.0, fancy-log@1.2.0, vinyl@0.5.3, lodash.template@3.6.2, gulplog@1.0.0, through2@2.0.1, multipipe@0.1.2, dateformat@1.0.12)
npm WARN package.json example-gulp-protractor@0.0.1 No repository field.
npm WARN package.json example-gulp-protractor@0.0.1 No license field.
npm WARN deprecated graceful-fs@3.0.8: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated lodash@1.0.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0. npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
gulp@3.9.1 node_modules/gulp
├── interpret@1.0.1
├── pretty-hrtime@1.0.2
├── deprecated@0.0.1
├── archy@1.0.0
├── tildify@1.2.0 (os-homedir@1.0.1)
├── minimist@1.2.0
├── v8flags@2.0.11 (user-home@1.1.1)
├── semver@4.3.6
├── chalk@1.1.3 (escape-string-regexp@1.0.5, supports-color@2.0.0, ansi-styles@2.2.1, has-ansi@2.0.0, strip-ansi@3.0.1)
├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.1.5)
├── liftoff@2.2.1 (extend@2.0.1, rechoir@0.6.2, flagged-respawn@0.3.2, findup-sync@0.3.0, resolve@1.1.7)
├── vinyl-fs@0.3.14 (graceful-fs@3.0.8, strip-bom@1.0.0, defaults@1.0.3, vinyl@0.4.6, through2@0.6.5, mkdirp@0.5.1, glob-stream@3.1.18, glob-watcher@0.0.6)
└── gulp-util@3.0.7 (array-differ@1.0.0, array-uniq@1.0.2, object-assign@3.0.0, lodash._reevaluate@3.0.0, beeper@1.1.0, lodash._reescape@3.0.0, lodash._reinterpolate@3.0.0, replace-ext@0.0.1, has-gulplog@0.1.0, fancy-log@1.2.0, vinyl@0.5.3, gulplog@1.0.0, lodash.template@3.6.2, through2@2.0.1, multipipe@0.1.2, dateformat@1.0.12)
jasmine-reporters@2.1.1 /home/pipeline/.npm-global/lib/node_modules/jasmine-reporters
└── mkdirp@0.3.5
npm WARN package.json example-gulp-protractor@0.0.1 No repository field.
npm WARN package.json example-gulp-protractor@0.0.1 No license field.
jasmine-reporters@2.1.1 node_modules/jasmine-reporters
└── mkdirp@0.3.5
npm WARN package.json example-gulp-protractor@0.0.1 No repository field.
npm WARN package.json example-gulp-protractor@0.0.1 No license field.
[11:04:15] Using gulpfile ~/d8416f00-36b3-408f-b790-e831058ac7dc/gulpfile.js
[11:04:15] Starting 'webdriver_update'...
Updating selenium standalone to version 2.52.0
downloading https://selenium-release.storage.googleapis.com/2.52/selenium-server-standalone-2.52.0.jar...
Updating chromedriver to version 2.21
downloading https://chromedriver.storage.googleapis.com/2.21/chromedriver_linux64.zip...
chromedriver_2.21linux64.zip downloaded to /home/pipeline/d8416f00-36b3-408f-b790-e831058ac7dc/node_modules/gulp-protractor/node_modules/protractor/selenium/chromedriver_2.21linux64.zip
selenium-server-standalone-2.52.0.jar downloaded to /home/pipeline/d8416f00-36b3-408f-b790-e831058ac7dc/node_modules/gulp-protractor/node_modules/protractor/selenium/selenium-server-standalone-2.52.0.jar
[11:04:17] Finished 'webdriver_update' after 1.61 s
[11:04:17] Starting 'protractor'...
Starting selenium standalone server...
[launcher] Running 1 instances of WebDriver
Selenium standalone server started at http://172.17.97.10:34527/wd/hub
Started
.

1 spec, 0 failures
Finished in 2.545 seconds
Shutting down selenium standalone server.
[launcher] 0 instance(s) of WebDriver still running
[launcher] chrome #01 passed
[11:04:23] Finished 'protractor' after 5.86 s
Uploading artifacts...UPLOAD SUCCESSFUL
Finished: SUCCESS

II.Report generation using Jasmine Reporters

There are varius option you can apply for generating test report that uses protractor. An npm module “protractor-html-screenshot-reporter” which generates your Protractor test reports in HTML with screenshots.

Here I have used jasmine reporter which generates report in xml format. In Node.js, jasmine-reporters exports an object with all the reporters which you can use however you like. Below is an example used in conf.js.


var jasmineReporters = require('./node_modules/jasmine-reporters');
jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter({
consolidateAll: true,
savePath: 'testresults',
filePrefix: 'xmloutput'
}));

and testresults will look like this using Figure 3.

Result_xml-IBM Cloud DevOps

Figure 3: XML Based reporting results:

7.Resources

Learn

  1. Learn more about Protractor and Gulp.
  2. Read the Bluemix DevOps “Build and Deploy” concept.
  3. Read the Bluemix Garage Method about Protractor.
  4. For product documentation, visit the Protractor Tutorial

Visit

  1. http://www.protractortest.org/#/api-overview
  2. https://tobythetesterblog.wordpress.com/tag/protractor/

Discuss

Get involved in the stackoverflow Community. Connect with other users while you explore developer-driven blogs, forums, groups, and wikis.

Join The Discussion

Your email address will not be published. Required fields are marked *