Protractor

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: “”,
    user:””,
    password:””,
    Status:””,
    }

    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.

Advertisements
Protractor

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.

Steps:

  • 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

Protractor

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.

Installation:

Pre-requisites:

Install Java/JDK:

Follow https://www3.ntu.edu.sg/home/ehchua/programming/howto/JDK_Howto.html

To Verify Java is installed on your system run :

Java -version command on your terminal

Install NodeJs and NPM:

Follow https://www.taniarascia.com/how-to-install-and-use-node-js-and-npm-mac-and-windows/

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 () {

browser.get(‘https://angularjs.org/’);

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.