Table of content

• Open Webpage
• Open Webpage
• Window class
• Set Window Size
• get Window Size
• Set Window Position
• Get Window Position
• Webpage Properties
• Get Title of WebPage
• Get Source Code of a Webpage
• 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 what we have to configure is what browser you want to invoke for the test execution. If we do not mention any browser then protractor automatically considers that user may be want to open Chrome browser and it opens chrome browser.

Selenium vs Protractor

									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 testcases 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 maximize the browser, resize the browser, get and set browser window position and size of the browser window Subscribe to my youtube channel :

Maximize Browser Window :

When we open firefox or chrome they normally 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 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);
											});
										});		
										

Protractor Architecture

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 test fails then there will be 'F' character in the place of green dot.

Set Window Position :

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

									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 value

Get Window Position :

Sometimes not only setting a browser size is required, we may 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)
											})
										});
									});		
									

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

Get Url of Page :

We can fetch the url of the page using 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 an 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

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. Subscribe to my youtube channel :

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 explicit method for back() method, so you may not get it on suggestion but if you write it will not throw 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 back() method on the bing page, the selenium navigates the page to the google page.

To use 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 trying to use back() method.

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

forward() :

forward() help user to navigate forward when already is moved back, using 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 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 Reading

• Scroll an element Into View in Javascript Executor
• handle Two Browser Windows in Protractor
• Integrate Protractor with VSCode
• Package.json with Protractor
• Steps to send eMail
• Handling nested iFrame
• Value selected or not in dropdown
• check element displayed or not in protractor