Getting Started With Protractor | Devstringx Technologies

3 min readMay 31, 2019

About Protractor

Protractor is a test automation framework which is used for automating web applications testing. It combines technologies such as Jasmine, Selenium Web driver and Node.js. Using protractor, we can automate both Angular and non-Angular applications.

Some Features

Supports simple syntax to write tests
Supports Behaviour Driven Development (BDD) framework like Cucumber
Provides additional locator strategies for Angular based applications
Protractor executes the command only once the action on webpage is completed thereby reduce test failure due to sync issues

Protractor Setup

Pre-requisites

Download and Install JDK : https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
Download and Install NodeJS : https://nodejs.org/en/

Install Protractor

For Windows OS

Install protractor globally using command : npm install -g protractor
Verify installation with command : protractor –version
Download browsers driver using command : webdriver-manager update
Start the selenium server using command : webdriver-manager start
Check selenium server status by opening below url in browser http://localhost:4444/wd/hub

Create and Run Test

As our setup is done so let’s see protractor in action by creating simple test to automate google search.

Note — We have used typescript to create tests and jasmine framework as our test framework.

In this example we will be having below files in our project directory -

Create directory with any name for example googlesearch and create below files under this

package.json : It contains all the dependencies required
tsconfig.json : It provides instructions to which files to convert TypeScript to JavaScript via the tsc (TypeScript compiler)
conf.js : Here we mention configurations
spec.ts : This file will contain our test
googleSearch_po.ts : Page objects and functions will be created in this file

package.json file content -  { "name": "googlesearchdemo", "version": "1.0.0", "description": "test code", "main": "index.js", "dependencies": { "@types/jest": "^24.0.13", "@types/selenium-webdriver": "^4.0.0", "jasmine": "^3.4.0", "protractor": "^6.0.0", "protractor-beautiful-reporter": "^1.2.7", "protractor-html-reporter": "^1.3.2", "protractor-html-reporter-2": "^1.0.4", "ts-node": "^8.1.1", "typescript": "^3.4.5" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "@types/jasmine": "^3.3.12", "@types/jasminewd2": "^2.0.6", "jasmine-reporters": "^2.3.2" }}

NOTE : Install node modules by executing command : npm install

tsconfig file content - { "compilerOptions": { "module": "commonjs", "target": "es6" } }
conf file content - var jasmineReporters = require("jasmine-reporters"); var HtmlReporter = require("protractor-beautiful-reporter"); exports.config = { seleniumAddress: "http://localhost:4444/wd/hub", specs: ["./*.spec.ts"], capabilities: { browserName: "chrome", chromeOptions: { args: ["--no-sandbox"] } }, directConnect: true, beforeLaunch: function() { require("ts-node").register({ project: "tsconfig.json" }); }, framework: "jasmine2", onPrepare: function() { jasmine.getEnv().addReporter( new HtmlReporter({ baseDirectory: "reports" }).getJasmine2Reporter() ); } };
spec file content - import { browser, element, by, ElementFinder } from "protractor"; import { googlePage } from "./googleSearch_po"; const googlepage: googlePage = new googlePage(); describe(" Protractor Demo On Google Search ", () => { it("Google Seearch", () => { browser.waitForAngularEnabled(false); browser.get("https://www.google.com/"); googlepage.verifyGoogleLogoIsPresent(); googlepage.verifyUserAbleToSearch(); }); });
googleSearch_po file content - import { browser, element, by } from "protractor"; import { protractor } from "protractor/built/ptor"; export class googlePage { getGoogleLogoElement() { return element(by.id("hplogo")); } getGoogleSearchElement() { return element(by.css('input[name="q"]')); } verifyGoogleLogoIsPresent() { expect(this.getGoogleLogoElement().isPresent()).toBeTruthy(); } verifyUserAbleToSearch() { this.getGoogleSearchElement().sendKeys("devstringx technologies"); browser .actions() .sendKeys(protractor.Key.ARROW_DOWN) .perform(); browser .actions() .sendKeys(protractor.Key.ENTER) .perform(); } }

Run tests using command : protractor conf.js

Generate HTML Reports

Above code will generate the html report under reports directory. For generation of html report for our execution, we have used ‘ Jasmine-Beautiful-Reporter ‘. This will generate the html report as well as takes the screenshots for the failure test cases.

To configure this reporter with our framework, we have added below configuration in the conf.js file.

var HtmlReporter = require(“protractor-beautiful-reporter”);

exports.config = { baseDirectory: “reports” }).getJasmine2Reporter()
onPrepare: function() {
jasmine.getEnv().addReporter(
new HtmlReporter({
);}};

Sample HTML Report

Originally published at https://www.devstringx.com on May 31, 2019.