Browser Commands
In this tutorial, we are going to discuss about 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 donot need to open browser or close browser in protractor because protractor takes care of opening and closing browsers.
Only thing what we have to configure is what browser you want to invoke for the test execution. If we donot mention any browser then protractor automatically considers that user may be want to open Chrome browser and it opens chrome browser.
To set the browser as Firefox, use following code in conf file.
capabilities: {
'browserName': 'firefox'
}
To set IE Browser
capabilities: {
'browserName': 'internet explorer'
}
We will discuss more about capabilities in conf file chapter.
We can make any browser as headless browser using arguments to the browser; we need to add
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/');
});
});
Window class in Protractor
Window class in protractor handles the browser window related operations and provides functionalities like maximize browser, resize browser, get and set browser window position and size of the browser window
Maximize Browser Window :
When we open firefox or chrome they normally open in resized mode only, but sometimes we may ant 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);
});
});
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 chapater 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);
});
});
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 getPosition() method to retrieve the position of the window. This method returns a promise containing ILocation interface with x and y value. We have 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 :
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 )
})
});
});
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 donot want to find a particular text using FindElements methods, you can use the source code to whether 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 )
})
});
Navigation in Protractor
Navigation commands are some which enables the user to navigate through 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 below image.
refresh() :
Unfotunately protractors supports only refresh method explicitly
it('title verifications', function() {
browser.get('https://angularjs.org/');
browser.navigate().refresh();
});
back() :
protractor doesnot 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 atleast moved from one page to another page atleast 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
});
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("http://yahoo.com")
});
Recommended Reading
About Author
Myself KarthiQ, I am the author of this blog, I know ways to write a good article but some how I donot have the skills to make it to reach people, would you like help me to reach more people By sharing this Article in the social media.
Read/Write JSON files in Protractor Added tutorials on How to work with Json files in Protractor, and how to convert map into JSON file
