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.
Protractor supports various browsers which includes
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" ]
}
}
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/');
});
});
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
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();
});
});
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);
});
});
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.
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
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)
})
});
});
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.
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
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 )
})
});
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.
Unfortunately, protractors support only refresh method explicitly
it('title verifications', function() {
browser.get('https://angularjs.org/');
browser.navigate().refresh();
});
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() 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() 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")
});
Remove that complete import line manually ...it works without any error
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] please correct that headache in protractor, and this why people prefer....
Really nice tutorial and article
ohoo, thanks Deva
please add blog on how to intigrate protractor in jenkins
Hi Nitin, We would be adding the Protractor with jenkins topic very soon.