2. Introduction
Protractor, formally known as E2E testing framework, 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. The Protractor automation tool is also recommended by AngularJS for scenario testing.
For an angular app functional automation framework to automate the UI and functionality of the web application, we zeroed
in on the Protractor automation tool.
3. Features
Built on the top of WebdriverJS and Selenium server
Introduced new simple syntax to write tests
Allows running tests targeting remote addresses
Can take advantage of Selenium grid to run multiple browsers at once
Can use Jasmine or Mocha to write test suites
4. Benefits
Protractor is a wrapper (built on the top) around Selenium WebDriver, so it contains every feature that is available in the
Selenium WebDriver. 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.
5. Installation
Pre Requisite:
Download and install NodeJS. http://nodejs.org/download/. After installation make sure its path is configured correctly, so
that command execution can find Node.
6. Installation…
Open the command prompt and type in the following command to install protractor globally.
- npm install –g protractor
Install Protractor Locally
You can install protractor locally in your project directory. Go to your project directory and type in the following command in the command
prompt:
- npm install protractor
Verify Installation
To verify your installation, please type in the command
- Protractor –version
If Protractor is installed successfully then the system will display the installed version. Otherwise you will have to recheck the installation.
If you don’t have the Selenium server on your machine, then download the latest version onto your machine. If you want to run tests on different
browsers, then please download the respective drivers as well. For example, Chrome driver will come in handy to run tests on the Chrome browser.
7. Architecture of Framework
Pages : Contains pages and elements(Locators)
CommonUtils: Contains common methods or operations used for UI and API automation
TestData : Contains constant value and payload in case of API automation
Specs: Contains scenario - test cases
Conf : Contains configuration and capabilities
Reports : Allure reporting - screenshots and reports
TestLogs : Contains logs
8. Pages Example
"use strict";
//Importing required files
var data = require('../TestData/TestData.json');
var commonCode = require('../CommonUtils/CommonCode.js')
var elementsPage = require('../CommonUtils/ElementsPage.js');
var log4js = require('log4js');
var logger = log4js.getLogger();
var XYZPage = function () {
var EC = protractor.ExpectedConditions;
// Login to the application
this.loginInToTheApplication = async function (userNameElement,userName,passwordElement, password) {
try {
commonCode.wait_tillVisible(elementsPage.adminEmailTextbox);
commonCode.sendDataToTextBox(userNameElement,userName);
commonCode.sendDataToTextBox(passwordElement, password);
commonCode.clickAction(elementsPage.loginButton);
commonCode.wait_tillVisible(elementsPage.someTitle);
expect(elementsPage.someTitle.isDisplayed()).toBe(true);
} catch (e) {
logger.error('Error while Logging in to the application' + e.message);
}
};
};
module.exports = new XYZPage();
It is used for UI automation.
9. Common Code Example
// To perform Click operation
this.clickAction = async function (element) {
try {
this.wait_tillClickable(element);
this.highlightElement(element);
element.click();
} catch (e) {
logger.error('Error while clicking on the web element' +
e.message);
}
};
For UI
10. Common Code Example
// Get method with cookie
this.getMethodWithCookie = async function (IP, PATH,
COOKIE) {
const expect = chai.expect;
const chaiHttp1 = chai.request(IP);
const response = await chaiHttp1.get(PATH).set(COOKIE);
return response;
};
For API
11. Elements File Example
"use strict";
var ElementsPage = function () {
//landingPage
this.xyz_button = element.all(by.css('input[value*="xyz"]')).get(0);
this.emailTextbox = element(by.css('input[placeholder*="E-mail
Address"]'));
this.passwordTextbox = element(by.css('input[placeholder*="Password"]'));
this.loginButton = element(by.css('button[class*="btn-login-btn"]'));
};
module.exports = new ElementsPage();
13. Specs File Example
"use strict";
//Importing required files
var data = require('../TestData/TestData.json');
var commonCode = require('../CommonUtils/CommonCode.js')
var elementsPage = require('../CommonUtils/ElementsPage.js');
var landingPage = require('../Pages/LandingPage.js');
//* Login scenario for XYZ automation
describe("Login for XYZ - ", function () {
beforeAll(function () {
commonCode.appInitialization(data["url"]);
});
it("Login to the portal", async function () {
abcPage.loginInToTheApplication(elementsPage.emailTextbox,data["username"],elementsPage.passwordTextbox,data
["password"]);
});
});
For UI
14. Specs File Example
"use strict";
// Importing necessary plugins and required files
var chai = require('chai'),
chaiHttp = require('chai-http');
chai.use(chaiHttp);
var data = require('../TestData/TestData.json');
var commonCode = require('../CommonUtils/CommonCode.js')
var elementsPage = require('../CommonUtils/ElementsPage.js');
// Sample API scenarios
describe("Sample Api test cases - ", function () {
beforeAll(function () {
commonCode.appInitialization(data["adminURL"]);
commonCode.getCookie();
browser.sleep(10000);
});
// Get method with cookie sample
it("GET method with cookie", async function () {
const expect = chai.expect;
await commonCode.getMethodWithCookie(IP, Path, global.cookie).then(function (response) {
console.log(JSON.stringify(response));
console.log(response.status);
console.log(JSON.stringify(response.body));
global.DataOne = response.body.dataOne;
console.log('dataOne : ', response.body.dataOne);
expect(response).to.have.status(data.successStatusCode);
});
});
});
For API
17. Allure Reporting
For Windows, Allure is available from the Scoop commandline-installer.
To install Allure, download and install Scoop and then execute in the Powershell:
- scoop install allure
Also Scoop is capable of updating Allure distribution installations. To do so navigate to the Scoop installation directory and
execute
bincheckver.ps1 allure -u
This will check for newer versions of Allure, and update the manifest file. Then execute
- scoop update allure
18. Alternate commands….
Using Allure Command Line Tool
Add the allure-commandline dependency in your current project by running the below command.
- npm install allure-commandline --save-dev
19. Some Useful NPM commands
Installing node modules : npm install
Downgrade npm to specific version: npm install –g npm@2
Check npm version: npm –version
Install package locally: npm install package_name
Install package locally and make an entry in package.json as dependency : npm install package_name --save
List installed packages: npm ls
Update npm: npm update
Clean npm cache: npm cache clean –f
………….