Installing and running Protractor AngularJS with Jasmine Webdriver and Astrolabe

Installing and running Protractor AngularJS with Jasmine Webdriver and Astrolabe

Before you start anythink you will have to first install NodeJS.

You can download and install NodeJS. http://nodejs.org/download/. After installation make sure its path is configured correctly, so that command execution can find Node.

Once you have installed NodeJS open the command prompt and type in the following command to install protractor globally.

npm install –g protractor

Now create a new folder called Protractor and install Protractor under c:\Protractor

npm install protractor

Once you have installed Protractor verify the installation by typing the following command

Protractor –version

The Protractor version that I have installed is Version 0.15.0

Next install jasmine-node. Use the following command:

npm install jasmine-node -g

install webdriver-manager. Use the following command:

npm install -g webdriver-manager

Download selenium server. Use the following command:

webdriver-manager update

Start the selenium server. Use the following command:

webdriver-manager start

Download chromedriver and save the file on your local
http://chromedriver.storage.googleapis.com/index.html

Add the location of chromedriver.exe in the Environment Variables PATH
The variable name should be PATH and not path.

Install Astrolabe (Astrolabe is an extension for protractor that adds page objects to your functional/e2e tests.)
npm install astrolabe

Create a folder called TestCases under Protractor

Create the following files

commonFunction.js

var Page = require('astrolabe').Page;

module.exports = Page.create({

url: { value: 'http://www.yourwebsite.com' },

username: { get: function() { return this.findElement(this.by.name('username')); } },
password: { get: function() { return this.findElement(this.by.name('password')); } },
submit: { get: function() { return this.findElement(this.by.xpath("//button[.='Log in']")); } },
searchIdentifier: { get: function() { return this.findElement(this.by.model('search.identifier')); } },
searchName: { get: function() { return this.findElement(this.by.model('search.name')); } },
// Adds a logIn method to the page object.
logIn: { value: function(username, password) {

var page = this;

page.go();

page.username.sendKeys(username);
page.password.sendKeys(password);

page.submit.click();

} },
selectLink:{ value: function (linkName)
{
var returnedObject = "//option[contains(text(),'"+linkName+"')]";
return returnedObject;
}}
});

clickALink.js

describe('When the username and password is entered', function() {
var cf = require('./commonFunction');
it('The user should be logged in', function() {
cf.logIn('username','password'); // username and password values
},30000);
it('Element should be displayed', function() {
expect(element(by.xpath("//a[contains(text(),'Element')]")).isPresent()).toBe(true);
},30000);
it('the user will be able to click on the link', function() {
cf.searchIdentifier.sendKeys("001445343");
element(by.xpath(cf.selectLink('LINK'))).click(); // Link value
cf.searchName.sendKeys("NAME"); // Name value
},30000);
});

conf.js

exports.config = {

//The address of a running selenium server.
seleniumAddress: 'http://localhost:4444/wd/hub',

//Capabilities to be passed to the webdriver instance.
capabilities: {
'browserName': 'chrome'
},

specs: ['clickALink.js'],

//Options to be passed to Jasmine-node.
jasmineNodeOpts: {
onComplete: null,
isVerbose: false,
showColors: true,
includeStackTrace: true
}
};

To to the folder c:\Protractor\TestCases and run the following command to execute the test

protractor conf.js

Useful links

https://github.com/stuplum/astrolabe

https://github.com/juliemr/protractor