Table of content

• Browser Commands in protractor
• Window class in Protractor
• Webpage Properties in protractor
• Navigation in Protractor

In this tutorial, we are going to discuss various browser commands that we would be using in our day to day life in testing.

Opening and closing a browser is the very first thing in protractor, a tester would like to do. The commands refer to what protractor has to do.

Set browser :

Protractor supports various browsers which includes

• Chrome
• Firefox
• IE
• Safari
• Edge

We do not need to open the browser or close browser in protractor because protractor takes care of opening and closing browsers.

The Only thing that we have to configure is what browser you want to invoke for the test execution. If we do not mention any browser, then the protractor automatically considers that the user may be want to open the Chrome browser, and it opens the chrome browser.

To set the browser as Firefox, use the following code in the conf file.

capabilities: {
  'browserName': 'firefox'
}

To set IE Browser

capabilities: {
  'browserName': 'internet explorer'
}

We will discuss more on capabilities in the conf file chapter.

We can make any browser as headless browser using arguments to the browser; we need to add a headless argument to make any browser to lose its UI.

capabilities: {
  browserName: 'chrome',
  chromeOptions: {
	 args: [ "--headless"]
   }
}

Make Firefox as headless browser; this option is available only after 55+ versions

capabilities: {
  browserName: 'firefox',
  'moz:firefoxOptions': {
	 args: [ "--headless" ]
   }
}

Open Webpage :

We open webpages, and we will perform all operations in the spec file, spec file is nothing but file where we write out user stories and test cases inside the user stories.

To Open web pages, we have to use get() method present in the browser, We will discuss, what describe and it block are in out jasmine tutorial.

import { browser} from 'protractor'
describe('Protractor Typescript Demo', function() {
	it('title verifications', function() {
	  browser.get('https://angularjs.org/');
	});
});

Protractor Interview Questions

Window class in protractor handles the browser-window related operations and provides functionalities like maximizing the browser, resize the browser, get and set browser window position and size of the browser window

Maximize Browser Window :

When we open firefox or chrome, they usually open in resized mode only, but sometimes we may want to use the browser window in maximized mode.

Protractor provides a method called maximize(), which helps the user to maximize the browser window.

import { browser} from 'protractor'
describe('Protractor Typescript Demo', function() {
	it('title verifications', function() {
		browser.get('https://angularjs.org/');
		browser.manage().window().maximize();
	});
});

Set Window Size :

setSize() method in protractor helps the user to resize the window according to the need of the user; this method will be helpful when you want to test the responsive website.

setSize() method accepts two parameter 1. Width, and 2. Height of the browser both parameters must be in number type.

import { browser} from 'protractor'
describe('Protractor Typescript Demo', function() {
	it('title verifications', function() {
		browser.get('https://angularjs.org/');
		browser.manage().window().setSize(200, 300);
	});
});

get Window Size :

getSize() method provides the details of the browser dimension, and this method returns a Promise [headache in protractor, and this why people prefer Protractor].

The promise contains ISize Interface; we have to retrieve the values from the ISize interface after resolving the promise.

I have dedicated a full chapter for promises in protractor; please do visit promise chapter, then block is used to resolve the promise

import { browser} from 'protractor'
describe('Protractor Typescript Demo', function() {
	it('title verifications', function() {
		browser.get('https://angularjs.org/');
		browser.manage().window().getSize().then(function(windowSize){
			// promise resolving block
			console.log("Browser Width : " +windowSize.width);
			console.log("Browser Height : " +windowSize.height);
		})
	});
});

Output of the getsize program, Along with output you can see a green dot, the Green dot denotes that test got passed if the test fails then there will be 'F' character in the place of the green dot.

Set Window Position :

setPosition() method in protractor, places the browser window in a particular position. considering the top-left corner of your computer screen as origin(0, 0) position.

import { browser} from 'protractor'
describe('Protractor Typescript Demo', function() {
	it('title verifications', function() {
		browser.get('https://angularjs.org/');
		browser.manage().window().setPosition(200, 300);
	});
});

Sendkeys for selecting a value in Dropdowns

Get Window Position :

Sometimes not only setting a browser size is required, but we may also need to get the size as well to perform some operations based on the size of the window.

We can use the getPosition() method to retrieve the position of the window. This method returns a promise containing ILocation interface with x and y value. We have to resolve the promise to get the values.

import { browser} from 'protractor'
describe('Protractor Typescript Demo', function() {
	it('position verifications', function() {
		browser.get('https://angularjs.org/');
		browser.manage().window().getPosition().then(function(windowLocation){
			console.log("Browser x postion : " +windowLocation.x)
			console.log("Browser y postion : " +windowLocation.y)
		})
	});
});

Install Protractor in Visual Studio Code

Webpage properties are like URL, Page title, page source code; you can use these values for the assertion. We can use protractor methods to retrieve the webpage properties.

Get Url of Page :

We can fetch the URL of the page using the getCurrentUrl() method in protractor.

import { browser} from 'protractor'
describe('Protractor Typescript Demo', function() {
	it('url verifications', function() {
		browser.get('https://angularjs.org/');
		browser.getCurrentUrl().then(function(url){
			console.log("Web page url is : " +url )
		})
	});
});

Install Jasmine for Protractor

Get Title of WebPage :

getTitle() method used to get the title of a web page in protractor, some webpages may or may not have titles.

it('title verifications', function() {
	browser.get('https://angularjs.org/');
	browser.getTitle().then(function(title){
		console.log("Web page title is : " +title )
	})
});

Get Source Code of a Webpage :

getPageSource() method will give the details about the source code; fetching source code will be useful when you are not able to find something using element.

When you do not want to find a particular text using element.all methods, you can use the source code to whether a particular text is present or not.

it('title verifications', function() {
	browser.get('https://angularjs.org/');
	browser.getPageSource().then(function(pageSurce){
		console.log("Web page pageSurce is : " +pageSurce )
	})
});

Learn to handle Upload Pop in Protractor

Subscribe to my youtube channel :

Navigation commands enable the user to navigate through the history of the browser like back, forth, refresh using Protractor.

Basically, these navigation commands are nothing but the browser navigation buttons; We can use these commands only when these buttons are enabled. Buttons are shown in the below image.

refresh() :

Unfortunately, protractors support only refresh method explicitly

it('title verifications', function() {
	browser.get('https://angularjs.org/');
	browser.navigate().refresh();
});

back() :

protractor does not give an explicit method for the back() method, so you may not get it on the suggestion, but if you write, it will not throw an error.

When user back(), forward() methods, the protractor falls back into WebdriverJS and executes those methods and performs the expected operations

back() method navigates the user back to the last page, For example, you navigate from Google to bing, and if you use the back() method on the bing page, the selenium navigates the page to the google page.

To use the back() method, you must at least moved from one page to another page at least once; this method will not work if you have not opened any page, but you are trying to use the back() method.

it('title verifications', function() {
	browser.get('https://angularjs.org/');
	browser.navigate().back(); // goes back to blank page
});

forward() :

forward() help the user to navigate forward when already is moved back; using the back() method is must before using forward() method; otherwise, there is no use.

it('title verifications', function() {
	browser.get('https://angularjs.org/');
	browser.navigate().back(); // goes back to blank page
	browser.navigate().forward() // navigates to angular page
});

Headless Chrome with Protractor

to() :

to() method is similar to our get() method in protractor, this method also navigates the user to a specific URL.

If you have a question of why we have to(), get() method, then the answer is, "They will remove the to() method like in selenium python."

it('title verifications', function() {
	browser.get('https://angularjs.org/');
	browser.navigate().back(); // goes back to blank page
	browser.navigate().forward() // navigates to angular page
	browser.navigate().to("https://yahoo.com")
});

protractor-interview-questions

Recommended Readings

• Headless Browser in protractor
• Protractor Promise
• Protractor Locators
• XPath in Protractor
• Install Protractor + Jasmine + Typescript + VSCode + NodeJs [Free Tools]
• Best IDE for Protractor
• Protractor Architecture
• Protractor vs Selenium

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