Table of content

• Jasmine Unit testing Framework
• it blocks (Specs / Tests) in Jasmine
• beforeEach function in Jasmine Protractor
• afterEach in jasmine
• describe Block in Jasmine Protractor
• Nested describe block in jasmine Protractor
• beforeAll block in Jasmine Protractor
• afterAll block in Jasmine Protractor
• f / x describe block in Jasmine
• Assertions in Protractor
• The Expectation of a unit testing Framework
• Feature of Javascript Framework

Jasmine is a Unit testing frameworks tool which supports behavior-driven development

Jasmine could be used for testing other frameworks like protractor using JavaScript/Typescript code. It does not depend on any other JavaScript frameworks.

This is independent of DOM, or any other javascript frameworks, this tutorial is more on using Jasmine feature along with Protractor.

As it is unit testing frameworks, it provides features to keep out test file like tests and suites(user stories)

Page Objects Model in Protractor

Jasmine provides a way for the user to create test cases in the Jasmine test logic file. All the tests in the Jasmine are formed using it blocks

Unlike functions, You cannot call a it block from some other it block

Every it block will contain two parts:

• Description : this is a description of the it block, it could be, why you are writing this it bloc or your test name, or the functionality that you are testing
• return call : this block contains function(), it may also have a variable in it; basically this variable will have some set time for to set the total time for the it block to get executed, sometimes you can use it without time as well.

it block without any variable in a function

it('Some verifications', function() {
	console.log("this is 'it block' test");
});

it block with a variable in the function; when you have a variable, you must end the variable by giving some time or without time.

it('Some verifications', function(end) {
	console.log("this is 'it block' test");
	end(); // denotes that this is end of test cases
});

Limiting the execution time :

We can specify the maximum time a it block can take if you are testing something with time.

In the below code, we have introduced a sleep of 30 seconds, but we are giving a maximum time of 5 seconds to complete the execution.

import { browser, element, by} from 'protractor'
import { protractor } from 'protractor/built/ptor';
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true;
	it('click operation', function(end) {
		setTimeout(function(){
			end();
		}, 5000)
		browser.sleep(30000)
		console.log("*************************");
	});
});

Everything in the above code gets executes, but the result is failed because of the time taken to complete the execution.

Now modify the above program like below, as I mentioned earlier it is not mandatory

import { browser, element, by} from 'protractor'
import { protractor } from 'protractor/built/ptor';
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true;
	it('click operation', function(end) {
		setTimeout(function(){
			end();
		}, 5000)
		console.log("*************************");
	});
});

You can also write Protractor Automation inside a it block

import { browser, element, by} from 'protractor'
	import { protractor } from 'protractor/built/ptor';
	describe('Protractor Typescript Demo', function() {
		browser.ignoreSynchronization = true;
		it('click operation', function() {
			setTimeout(function(){
				end();
			}, 50000); // 50 seconds
			browser.get('https://google.com/');
			browser.sleep(1000)
			element(by.partialButtonText('out')).getTagName().then(function(textValue){
				expect(textValue).toBe("About", "Actual text is not match with expected text")
			})
		});
	});

The negative part of using the setTimeout is, it will wait till the given time even if the test gets executed before time itself, so please do not use this way for normal scenarios.

Handling nested iFrame in protractor

How to skip a test in Protractor :

When we run our test cases, sometimes, we might need to skip the tests present in the spec file.

Use x prefix to a test to skip a test in the jasmine

import { browser, element, by} from 'protractor'
import { protractor } from 'protractor/built/ptor';
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true;
	// below test will be skipped as it has prefix as 'x'
	xit('click operation', function(end) {
		setTimeout(function(){
			end();
		}, 5000)
		console.log("*************************");
	});
});

How to run a particular test in Jasmine :

Sometimes you might have 20 it blocks in your spec file, but if you want to only a particular it block. Do you think it is feasible for prefixing all the 19 it blocks with x ?? Very Big NO.

Run any particular 'it block' by prefixing it with f

describe('Protractor Typescript Demo', function() {
	fit('click operation', function() {
		console.log("Iam the only one who will run");
	});
	it('ignore test 1', function() {
		console.log("they have not prefixed me with f");
	});
	it('ignore test 2', function() {
		console.log("they have not prefixed me with f");
	});
});

Handle Hidden division Pop Up / Calendar Pop up using Protractor

beforeEach method will get executed before executing an it block

beforeEach function is applicable for all the it blocks present inside a describe block.

describe('Protractor Typescript Demo', function() {
	beforeEach(function(){
		console.log("Before Each block")
	});
	it('aaa', function() {
		console.log("test One");
	});
	it('bbb', function() {
		console.log("test two");
	});
	it('ccc', function() {
		console.log("test three");
	});
});

BeforeEach block will contain all the steps which are pre-requisite and common for all the test cases like opening a browser and navigating to the URL.

Select class in protractor

afterEach block will be executed after completing a it block inside a describe block.

afterEach block is applicable for all the it blocks present in a describe block

describe('Protractor Typescript Demo', function() {
	afterEach(function(){
		console.log("After Each block")
	});
	it('aaa', function() {
		console.log("test One");
	});
	it('bbb', function() {
		console.log("test two");
	});
	it('ccc', function() {
		console.log("test three");
	});
});

afterEach block will contain steps to clean up the mess that we have created in it block; sometimes, we may write code like a close browser or log out from the application.

Scroll an element Into View using JavaScript Executor in Protractor

describe block is nothing but the test Suite, a describe block can contain multiple it blocks.

Like it block, describe block also will have two parameters in the syntax, 1. Description of the suite, 2. function.

describe('I hold multiple it blocks, because I'm describe block', function() {
	beforeEach(function(){
		console.log("Before Each block")
	});
	it('aaa', function() {
		console.log("test One");
	});
	it('bbb', function() {
		console.log("test two");
	});
	it('ccc', function() {
		console.log("test three");
	});
	afterEach(function(){
		console.log("After Each block")
	});
});

Timeouts in protractor

We can write one describe block inside another describe block; this structure is called a nested describe block.

describe('Outer Describe block', function() {
	afterEach(function(){
		console.log("After Each block of top describe block")
	})
	it('aaa', function() {
		console.log("test One in top describe block");
	});
	describe('inner describe block one', function() {
		afterEach(function(){
			console.log("After Each block in inner describe block one")
		})
		it('aaa', function() {
			console.log("test One in inner describe block one");
		});
	});
});

Are you able to see the strange outline in the above image, the afterEach block in the Top describe block executed twice, but we have only one it block in top describe block ?

Yes, Your guess is right.

before/afterEach will be executed not only for it block present in the describe block but also for describe block present inside that describe block.

Database Connection

The beforeAll block will be executed before executing any it or describe block inside a describe block.

beforeAll block will be executed only once per respective describe block.

describe('Outer Describe block', function() {
	beforeAll(function(){
		console.log("Before All in top describe block")
	})
	it('it block in top describe block', function() {
		console.log("test One in top describe block");
	});
	describe('inner describe block one', function() {
		beforeAll(function(){
			console.log("Before All block in inner describe block one")
		})
		it('inner it block', function() {
			console.log("test One in inner describe block one");
		});
	});
});

JSON File handling

afterAll block will be executed after executing all the it & describe blocks present in the describe block.

afterAll block will be executed only once per respective describe block.

describe('Outer Describe block', function() {
	afterAll(function(){
		console.log("After All in top describe block")
	})
	it('first it block in top describe block', function() {
		console.log("test One in top describe block");
	});
	it('second it block in top describe block', function() {
		console.log("test two in top describe block");
	});
	describe('inner describe block one', function() {
		beforeAll(function(){
			console.log("Before All block in inner describe block one")
		})
		it('inner it block', function() {
			console.log("test One in inner describe block one");
		});
	});
});

Protractor Interview Questions

We can focus(run only), or x the describe block for skipping the describe in a similar way to a it block

xdescribe('First Describe block', function() {
	it('test in First describe', function() {
		console.log("test 1");
	});
});
fdescribe('Second Describe block', function() {
	it('test in Second describe', function() {
		console.log("test 2");
	});
});

Protractor Error Structure

I hope you might have seen a few expected statements in the script, which are nothing but the assertions in protractor.

expect statement will contain an actual value, and the second part of the expected statement should be the expected values.

• toBe() : passed if the actual value is of the same type and value as that of the expected value. It compares with === operator
• toEqual() : works for simple literals and variables; should work for objects too
• toMatch() : to check whether a value matches a string or a regular expression
• toBeDefined() : to ensure that a property or a value is defined
• toBeUndefined() : to ensure that a property or a value is undefined
• toBeNull() : to ensure that a property or a value is null.
• toBeTruthy() : to ensure that a property or a value is true
• toBeFalsy() : to ensure that a property or a value is false
• toContain() : to check whether a string or array contains a substring or an item.
• toBeLessThan() : for mathematical comparisons of less than
• toBeGreaterThan() : for mathematical comparisons of greater than
• toBeCloseTo() : for precision math comparison
• toThrow() : for testing if a function throws an exception
• toThrowError() : for testing a specific thrown exception
• not : we can invert above expectations using not keyword

import { browser, element, by} from 'protractor'
import { protractor } from 'protractor/built/ptor';
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true;
	it('click operation', function() {
		browser.get('https://google.com/');
		browser.sleep(1000)
		element(by.partialButtonText('out')).getTagName().then(function(textValue){
			expect(textValue).toBe("About", "Actual text is not match with expected text")
			expect(textValue).not.toBe("Bingo", "we are using mot keyword")
		})
	});
});

drag And Drop in protractor

Any given unit testing framework should have the below properties:

• A Good framework should not be tied to any browser, framework, platform, or host language.
• Should have idiomatic and unsurprising syntax.
• A Framework should work anywhere JavaScript can run, including browsers, servers, phones, etc.
• shouldn't intrude in your application's territory
• should play well with IDEs (e.g., test code should pass static analysis).

Upload Pop in Protractor

• Behavior-driven development framework for testing JavaScript and Typescript code.
• Jasmine does not require a DOM
• Jasmine runs on any JavaScript-enabled platform
• Jasmine is influenced by other unit testing frameworks, such as ScrewUnit, JSSpec, JSpec, and RSpec.
• A Suite represents a bunch of tests that are related. Each suite, in turn, contains a set of Expectations that compare the results of the test - called the actual - with the expected value
• A Suite is defined by calling the describe() function. It takes two parameters: the name of the Suite, and the function which contains the calls to the expectation methods called Specs

JavascriptExecutor

Protractor Interview Questions

Recommended Readings

• Conf JS file in Protractor
• Protractor restartBrowserBetweenTests
• Waits in Protractor
• TimeOuts in Protractor
• ElementFinder / WebElement in Protractor
• Css Selector in Protractor
• XPath in Protractor
• Protractor Locators

I am Pavankumar, Having 8.5 years of experience currently working in Video/Live Analytics project.