Running Protractor tests with multiple variable parameters via npm

We were facing a roadblock of running protractor tests on different environments using different configurations.

We tried different methods to fix this.

How we tackled this problem:

  1. We created empty parameters for each  variable paramter in protractor.conf.js
    params: {
    baseUrl: “”,
    url: “”,

    2. Protractor cli has support for running commands with parameters. For example We need to run tests on beta environment for some region with
    admin credentials. We ran below command:

    protractor e2e/protractor.conf.js –params.baseUrl ‘preview’ –params.user ‘raj’ –params.password ‘test’ –params.Status ‘beta'”

    As you can see that this command is pretty long and tough to remember we leveraged scripts functionality of npm.

    3. We added scripts in package.json like below:

    “scripts”: {
    “beta-n”: “protractor e2e/protractor.conf.js –params.baseUrl ‘beta’ –params.user ‘anil’ –params.password ‘pass’ –params.Status ‘beta'”,
    “beta-a”: “protractor e2e/protractor.conf.js –params.baseUrl ‘beta’ –params.user ‘raj’ –params.password ‘test’ –params.Status ‘beta'”


    4. In cli use below command to run tests on beta env with non admin user:

    npm run beta-n

    5. We can add scripts for different combinations.


Generate reports using protractor-jasmine2-html-reporter

By Default if we generate an angular project using Angular-cli, e2e tests have support for jasmine spec reporter, but developers and QA’s need much more than that.

One of the basic reporting modules that npm provides is “protractor-jasmine2-html-reporter”.  It is easy to install and configure.


  • Run npm install protractor-jasmine2-html-reporter
  • In your protractor config.js file add following:
    var Jasmine2HtmlReporter = require('protractor-jasmine2-html-reporter');
  •  In On Prepare section register the new reporter as
    jasmine.getEnv().addReporter(new Jasmine2HtmlReporter({
      savePath: './test-reports',
  •  We can add various options like:
  • takeScreenshots: true,  If we set it to true then screenshots will be taken
    takeScreenshotsOnlyOnFailures: true, If we set it to false Screenshots will be taken both at the test pass and test fail.
    fileNameSuffix: timeStamp,  We can add suffix text or time to test report filename.
    fileNamePrefix: ‘Abc’, We can default prefix to Test report file name
    fileNameSeparator: ‘_’, Separator for various components of test report filename
    cleanDestination: false, If we want test report folder to be cleaned set it to false

example report:

Screen Shot 2018-06-21 at 12.12.31 AM


Introduction to HTTP basics

Communication is the core of human life, without it people will not be able to exchange ideas and interact with each other. There are set of rules followed for proper communication example harmony between listener and speaker. Similar set of rules is followed in world of Internet. In coming paragraphs we will be discussing the basic rule of internet called HTTP (Hyper text transfer protocol). Protocol is set of rules followed for specific purpose.

We will quickly test the above by using a site called that has number of endpoints for testing http requests/responses. We will dive more into this later.

We will be using telnet that is command that allows access to data on websites using  command line.

Steps to test http request:

      1. Open up your terminal
      2. type in telnet 80
      3. type in GET / HTTP/1.1
      4. type in quickly and press ENTER key twice
      5. We will get the html that is located at / (root)

Terminals don’t have layout engine like browsers, so they are not capable of converting html to layout. If we enter we will see the html content in better layout.

Screen Shot 2018-01-11 at 4.41.02 PM









We can access any endpoints available example for viewing xml we can use /xml instead of / in above command.

HTTP Requests:

A basic HTTP request consists of Request line, Headers , Black line and Request Body.

As we know request can be either GET or POST.

we need to pass uri (uniform resource identifier) and HTTP version we are using as seen in below example:

Screen Shot 2018-01-15 at 4.29.12 PM

Headers consist of HOST name, User Agent we are using for sending request and Accepted Language.

Screen Shot 2018-01-15 at 4.32.55 PM.png

Next is a simple blank line and Request body which is applicable only for POST request.

In request body we pass PAYLOAD (data) along with POST request eg we need to pass some data to a particular form we can achieve that by POST request and sending data in Request Body.

Screen Shot 2018-01-15 at 4.33.43 PM.png


HTTP Response’s:

Http Response also has some important parts like:


This consists of Http version, status code and status message. There are lot of status code’s like 200 which means everything is fine, 404 which means resource or page is not available example if we type in and if /blah is not available then we may get 404 error message and then we server error 500 code also. You can get more details on web about all the status code.

Each status code has some message called status message associated with it example 200 has OK message while as 404 has not available message associated.

Screen Shot 2018-01-15 at 4.40.46 PM


Response Headers: 

These usually consist if Server name like nginx or apache, Date on which response was received and Content type. In this case we have content of type xml while we can have html type also.

Screen Shot 2018-01-15 at 4.42.17 PM

Blank Line and Response body:

After a blank line we get actual response in the form of Response Body.

Screen Shot 2018-01-15 at 4.43.03 PM

Note : HTTP Protocol is Stateless. This means it does’nt remember or it does’nt keep the record of previous request. 








Getting started with Protractor for E2E Automated testing- Part1

What is Protractor?

Protractor is the E2E testing framework built as an wrapper over selenium using webdriver js api.

Protractor can be used for testing both angular and non angular apps.

We can run our tests both in headless way and with real browsers also.

The main benefit of writing our tests in angular is that we don’t need to add waits and timers.



Install Java/JDK:


To Verify Java is installed on your system run :

Java -version command on your terminal

Install NodeJs and NPM:


To verify node is installed on your system run:

Node -v

To verify npm is installed on your system run:

Npm -v

Install IDE (Sublime, Webstorm etc):

We will cover this in more detail later

Installing Protractor:

For installing protractor on your machine, run following command

npm install -g protractor

This command will install Protractor, Webdriver-Manager and associated libraries

Webdriver Manager is a helper tool to get the selenium standalone server up and running.

For knowing the version of Protractor installed on your system just run

Protractor --version command

Webdriver-manager update: This command installs the chromedriver, geckodriver and selenium standalone jar file.

Webdriver-manager start


This command starts up the selenium server.

Protractor test will send requests to this server to control a local browser. You can see information about the status of the server at http://localhost:4444/wd/hub.

Writing a basic test and Running it:

For running a basic test we need two files:

  1. Spec File
  2. Configuration

Spec File:

This file contains the tests we want to run

We will create a file spec.js in our root folder named as pro

Name the file as spec.js

We can name it as anything but make sure we have .js extension.

describe('page tests', function() {

it(‘should have title’, function () {


expect(browser.getTitle()).toEqual(‘AngularJS — Superheroic JavaScript MVW Framework’);


} );

Configuration file:

Create a file named as conf.js and add below snippet:

exports.config = {

seleniumAddress: ‘http://localhost:4444/wd/hub’,

specs: [‘spec.js’]


We will explain more about the above two files in next chapters.

Steps to run the the above test:

  1. Open up your terminal
  2. CD to folder where you saved above two files example pro
  3. Run protractor conf.js


The green dot in above screenshot indicates that our test has passed.

We can also see total execution time in above screenshot.

We will cover how to setup Eclipse and Webstorm for Protractor JS in our Next series.




Codeception, Software Testing

Super Test your Drupal Site with Codeception!

Automation is one of the buzzword in the current industry. However what if we look at a system where we not only do functional test automation for a Drupal site, but also enable developers to write unit tests and the Product Owners/ QA’s write acceptance tests all under a single hood.

Why to Automate!

Developers are often worried how to lower down the leaking of bugs into the production servers. Testers on the other hand cannot continuously test old functionality manually, this is where Automated tests come into play.

Why we used Codeception!

  • Love for Drupal: With love for drupal comes care. To improve the quality we needed a tool that could use both human readable (Gherkin) and drupal supported language PHP.
  • Community Support: Codeception and Drupal community have created number of modules that provide direct gateway to Drupal core functions. This not only allows the testers to do functional testing; however it also empowers them to do API and Database testing inside the codeception framework.
  • One Tool Super Power: One of main advantage of codeception is that it enables teams to do unit, functional and acceptance testing.
  • Developers can leverage it for Unit tests while as QA And Business facing people can write Functional and Acceptance tests easily.
  • Scalable: We can also write custom suites that can be scaled further for more automated tests. With a lot of test automation moving towards BDD, Codeception also has support for Gherkin along with providing the capability to write php code directly. Thereby making it usable for both QA and Business folks.

Codeception tests are written in two formats, namely cept and cest.

Their format is the only difference. Cept is a scenario-based format and Cest is a class based format.

Sample Cept:

$I = new AcceptanceTester($scenario);
$I->wantTo(‘Navigate to the site’);
$I->see(‘Welcome to The Site’);


Sample Cest:

class TestCest
public function _before()

public function _after()
// tests
public function testMe()

//test code here


How we used codeception with Drupal to write tests:

Connecting Codeception with Drupal:

So for getting started with codeception we just need to run following commands:

$ composer require “codeception/codeception”
$ php vendor/bin/codecept bootstrap

These commands need to be run at your Drupal projects root folder. As soon as you run above commands, a tests folder will get created. Inside that folder you will see separate subfolders for unit, acceptance and functional tests.

Getting started with writing simple Acceptance Tests:

With codeception writing Acceptance tests is just one command away

$ php vendor/bin/codecept generate:cept acceptance LoginTest

vendor/bin/codecept → This is the location where the codecept file is present
generate:cept → This is used to tell codeception that the file to be created is of type cept
acceptance -> This is used to decide which folder the test file needs to be created in

LoginTest → This is the name of the test file that we create. With this command an acceptance test file LoginTestCept.php will be created in tests/acceptance/ folder

The same command as above can be modified slightly to create unit and functional tests.

Basic Acceptance Test:

In our LoginTestCept.php file just add following code:

$I = new AcceptanceTester($scenario);
$I->wantTo(‘Navigate to the site’);
$I->see(‘Welcome to The Site’);

Don’t get scared by $I. It’s an object that mimics the real world tester guy, who performs real world actions like clicking on button, navigating to pages, adding text in the form. Some basic functions are wantTo(), see() or amOnPage()

The Power of PageObject:

At the time of inception of codeception it was difficult for Automation folks to visualise page objects in codception but with release of newer versions this feature was added and had a great acceptance also.
We can think of PageObject as a storage of UI locators.
So for example we have an Drupal Website with /blogs /partners pages.
We can define objects for /blogs page seperately in a class and use them based on the need. This also helps in reusability


class BlogsPage {
const URL = ‘/blogs’;
static $blogList = ‘#list’;
static $newBlogButton = ‘#toolbar’;
static function row($id)
return $blogList .” .blog-$id”;

We can use the above class and its objects easily in our cests or cepts:


$I = new WebGuy($scenario);
$I->wantTo(‘find blog #1 in a list and edit it’);
$I->click(‘Edit’, BlogsPage::row(1));
$I->see(‘Editing Blogs #1’);

We can further use it for improving UI interactions also

Helpers come to rescue:
As our tests get longer and functionality increases it becomes difficult to maintain our automation code. Helpers come to help here.

Example we have a flow to test for writing a blog:

$I = new WebGuy($scenario);
$I->wantTo(‘login and write blog’);
$I->login(uname, pass);

In our helper class we have already defined the steps for login inside login function and similar steps have been added for addBlog function.

How developers can write readable code for better automation testing:
One of the basic problems that automation folks face is regarding locators. Some pages have UI elements with similar locators. If locators are added unique for each element, this eases automation guy’s work.

Codeception comes with support of grouping your tests:
Tests can be grouped into smoke, sanity etc called suites. This is a nice feature of codeception that comes handy while running these suites.


Business folks and developers need Reporting for understanding the impacted areas based on failures.
Codeception provides both HTML and XML reporting.
XML reports can further be extended for custom reports depending on use case.

Drupal Love:
Community has developed lot of modules like drupal mail, drupal variable that enable a tester to access core functionality easily. Also tests involving DB queries can be run easily in codeception.

Continuous Integration :

Codeception has good support on almost all CI frameworks like Jenkins, Travis etc.
This minimises the human intervention for triggering tests manually and also provides reports on the go.

Why Codeception and not Behat:

  • Codeception is built on top of PHPUnit. It has capability for unit, functional and acceptance Tests.
  • Behat is included in Codeception, so I would say you should “switch” to Codeception yesterday. They aren’t exclusive. Anything you are doing using just the Behat framework you can do with Codeception, although the reverse isn’t true.
  • Codeception can handle your Gherkin feature files, and it can also handle files written for PHPUnit [called “Cest” files in Codeception]. Codeception can also handle acceptance and functional tests written in a modified form of Gherkin which are very easy to understand and read [called “Cept” files in Codeception].
  • Finally, Codeception has an extensive Drupal support that is far and away the best PHP testing framework for Drupal [since again, it can also handle the Core PHPUnit tests].
  • As far as Mink is concerned, you don’t really need it with Codeception because it includes drivers for headless [no rendered graphics or JS], as well as full Selenium and PhantomJS Webdrivers. Codeception will understand your Mink code, since Mink is just a Webdriver wrapper.
  • Codeception also makes it easy by separating tests into suites by default. You can use different driver configurations for different suites.

Introduction to Docker-Part1

Almost everyone of us has  heard of Docker . Actually Docker revolution started in mid 2013 and today more than 4 million Apps use Docker. Docker has revolutionised Devops movement.

Docker is  a tool/software that helps in creating containers consisting of apps and dependencies. Container is similar to what we see in real world transportation.

Containers pack apps along with dependencies together and help them deploy or transfer across development environments or developers. New team mates can easily get started with projects once they have the Docker installed on there system

The heart of Docker lies in the DockerFile.  It is simple text file with commands, ports and base image list.  It has a basic configuration for running app.

Example docker file:

Screen Shot 2018-01-01 at 7.59.38 PM 1

For building a docker image we need to run the following command at the root of the project where DockerFile resides

docker build -t mongotest .

The above command builds an image and tags it to image name mongotest

-t flag is used for tagging to image file name

Short interpretation of the above Docker File:

From mongo command pulls the image from Docker hub repository.

CMD[“mongod”] command is the default command that runs when our container is up

In above docker file we are exposing ports 27017 and 28017.

While  running above created image we need to expose these ports to the host system.

Docker is run by the following command:

docker run -p 27017:27017 -p 28017:28017 mongotest

Important note for beginners:

Dockerfile should have D in caps and should have no extension


How to set default Python version in OS X

Today I ran into the trouble as most of my scripts were failing due to version mis match. The code I had written was Python 3.x compatible but my system had by default set Python2.x as the default version. Following are the steps which i followed to fix the problem:

    • Open ITerm. ( You can use your default mac terminal also.)
    • Open your ~/.bash_profile in vim or any other text editor.
    • Add alias python='python3'
    • Save the file
    • Run source ~/.bash_profile
  • Now try running python -version to see which version is coming up

Let me know in comments if you fail to follow above steps.