Getting Started With Protractor

Back to Blog

Getting Started With Protractor

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


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 –

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 -
    "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() {
            project: "tsconfig.json"
framework: "jasmine2",
onPrepare: function() {
        new HtmlReporter({
            baseDirectory: "reports"

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", () => {

googleSearch_po file content -

import { browser, element, by } from "protractor";
import { protractor } from "protractor/built/ptor";

export class googlePage {
    getGoogleLogoElement() {
    return element("hplogo"));

getGoogleSearchElement() {
    return element(by.css('input[name="q"]'));

verifyGoogleLogoIsPresent() {

verifyUserAbleToSearch() {
this.getGoogleSearchElement().sendKeys("devstringx technologies");


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 = {
 onPrepare: function() {
new HtmlReporter({
        baseDirectory: “reports”

Sample HTML Report
protractor html report

Share this post

Back to Blog