Learn Protractor & Jasmine Framework for End to End Testing | Chapter 1 | Getting Started

Protractor (Source) is a Node.js program built over WebDriverJS. It is an end to end Testing framework for Angular & AngularJS applications. It can also be used to test Non-Angular applications.

Prerequisites: Node and NPM should be Installed on your machine (Download Link)

Setup:

Open Command Prompt, and type below commands:

> npm -v //check installed npm version

> node -v //check installed node version

> npm install -g protractor

> protractor --version //To check installed version

Now Download Visual Studio Code as an editor.

Important Commands:

> npm root -g // To know path of Protractor

> webdriver_manager update //Update Webdriver after Node Installation

> webdriver_manager start //Start Webdriver

What is Jasmine?

Jasmine is a Behavior-Driven Developement i.e. BDD Framework for testing JavaScript based applications. It's fast with low overhead and has no external dependencies.

Few JavaScript Concepts for working on Protractor with JS:

1. Variables

Variables are JS containers for storing data values.

"var" keyword is used to declare variables.

Valid variable names can start with _ or $

JS variables are loosely coupled i.e. it doesn't require a datatype to be mentioned for variable decleration.

2. Data types

a) Primitive Data Types:

• Number

//Number Example

console.log("Hello World");

var a = 20;

console.log(a);

• String

//String Example

var str = "Welcome";

var str1 = 'hey';

console.log(str);

console.log(str1);

• Boolean

//Boolean Example

var flag = true;

console.log(flag);

var x = 2;

var y = 3;

console.log(x == y);

• Undefined

//Undefined Example

var z;

console.log(z);

• Null

//Null Example

var n = null;

console.log(n);

b) Reference Data Types:

• Objects

//Object Example

var user ={

    Name : "Ishan Dev Shukl",

    Age: 30,

    Place: "Dehradun"

}

console.log(user.Name);

console.log(user.Age);

• Arrays

//Array Example

var arr = new Array(3);

arr[0]="Ishan";

arr[1]="30";

arr[2]=20.20;

console.log(arr.length);

console.log(arr[0]);

console.log(arr[1]);

console.log(arr[2]);

var arr1 = ["Ishan Dev Shukl",40,40.40,"Dehradun"];

console.log(arr1.length);

console.log(arr1[0]);

console.log(arr1[1]);

console.log(arr1[2]);

//Join in Array Example

var fruits = ["Grapes","Apple","Banana"];

console.log(fruits.join("*"));

//Sort in Array Example

var numbers = [5,8,6,2,4,8,5];

console.log(numbers.sort());

• Functions

//Functions in JS Example

function sum(val1,val2)

{

    return(val1+val2);

}

console.log(sum(1,2));

console.log(sum(5,8));

3. Operators

• + Addition
• - Substraction
• * Multiplication
• / Division
• % Remainder
• ** Exponentiation

// Dynamic Variable Example | Same variable can be modified Example

var var1 = "Ishan";

var1 = 2020;

var1 = false;

console.log(var1);

//Constants Example

const pi = 3.14;

console.log(pi);

//pi = 2.35;

Logical Operators:

• && AND
  
• || OR
  
• ! NOT
  

== Abstract Equality; Compares after Type Conversion.

=== Strict Equality; Data & Type should be the same.

//Abstract Equality Vs Strict Equality Example

console.log(3==3); //true

console.log(3=="3"); //true

console.log(3===3); //true

console.log(3==="3"); //false

// Type of null in JS  example

console.log(typeof null); //object

console.log(typeof user); //object

console.log(typeof undefined); //undefined

Below are few examples of few basic String functions you should be aware of as a JS Automation Tester:

//String Immutability

var strs = new String("Test");

var strs1 = "Test";

console.log(strs);

console.log(strs1);

strs.concat("1234");

strs1.concat("1234");

console.log(strs);

console.log(strs1);

//To perform any changes

strs = strs.concat("1234");

strs1 = strs1.concat("1234");

console.log(strs);

console.log(strs1);

// String methods

var a= 10;

var b= 20;

var str1 = "Hello";

var str2 = "World";

console.log(a+b); //30

console.log(str1+str2); //HelloWorld

console.log(str1+str2+a+b); //HelloWorld1020

console.log(a+b+str1+str2); //30HelloWorld

var s1 = "Hey You can call me \"Ishan!\"";

console.log(s1);

var s1 = 'Hey You can call me "Ishan!"';

console.log(s1);

// String bracket Notation[]:

var firstName = "Ishan";

console.log(firstName[0]); //I

// charAt()

console.log(firstName.charAt(4)); //n

var str1 = "Welcome to Learn Automation";

var str2= "On both Web and API";

console.log(str1.charAt(8)); //Space is also included

// charCodeAt()

console.log(str1.charCodeAt(8));

console.log(str1.concat(" ").concat(str2));

// endsWith()

console.log(str1.endsWith("ion")); //true

console.log(str1.endsWith("abc")); //false

// includes()

console.log(str1.includes("Learn"));

//indexOf()

console.log(str1.indexOf("Learn"));

//match()

var str3 = "End to End Testing End";

console.log(str3.match(/End/g));

//repeat()

console.log(str3.repeat(3));

//search()

console.log(str1.search("to")); //gives result of 1st occurence >>> 8

//slice()

console.log(str3.slice(3)); //to End Testing End

console.log(str3.slice(2,6));

//substr()

console.log(str3.substr(3)); //to End Testing End

console.log(str3.substr(2,6));

//trim()

var str = "          Hi! I'm Ishan           ";

console.log(str.trim());