Multiple Windows in Protractor

There will be times when you will required to perform some testing, where the testing operations open a new browser window /tab, testcase may require you to perform some tasks on the newly opened browser window/tab and return back to original window to perform the remaining tasks.

Even if the window/tab is currently on focus but still it is not an active window, so to perform some tasks you need to switch to new browser window/tab in protractor.

Commands will have effect on base window unless we switch our control to new window/tab.

Previously tab and Windows are two different items, as tabs doesnot had any GU iD. Now developers made tab and windows to have GUIDs, so tabs and windows are treated as same in protractor

Situations when we are likely to deal with multiple windows:

  • Filling forms may require selecting the date from a separately opened window
  • Clicking on some link/button can open another window
  • Handling Advertisement windows

Multiple Windows


multiple-windows-handling-selenium-webdriver Above image depicts multiple browser windows

  • Our Application is opened on Parent/Base window, total number of windows is one
  • When clicking on a link/button our application opens two new windows along with base window, now the total number of windows present is Three (base + child-1 + child-2)
  • Now move to Child-1 window and perform click on a button/link which open another one more window along with child-window, now the total number of windows is 4 (base + child-1 + child-2 + grand child-1)
  • We can perform operation on grand child -1 window and we can close all windows or specific windows.

If we perform above operation manually, we may not find difficulty, but handling above scenario is tricky in protractor

Send emails in protractor

Get Window Handles in protractor

protractor provides few methods to handle the multiple windows, let's see what are the methods and their uses.

GU ID:
GU ID abbreviation of Globally Unique Identifier, Every OS generates GU ID for application to identify them uniquely. We will be using this GU ID to handle the multiple browsers, GU ID is numeric string value.


										8589934593
										


getWindowHandle() :
getWindowHandle method in protractor returns the current(active) browser's GU ID. It returns GU ID as string value.


										browser.getWindowHandle();
										


getWindowHandle() :
getWindowHandles method in protractor returns GU ID of all the browsers present at the moment, which are opened by current driver. This method returns GU IDs as Set of String.


										browser.getWindowHandles();
										


List Collection in Typescript : List is one of the Collection type and it stores the values at sequential places in memory.

We can access the values based on the index as List stores values in sequential places ( this is one of the major difference between List and Set).

We must not should access the windows based on the index because you might not know which windows is stored at what place, because protractor adds window ID based on what time they appeared. So accessing windows based on the index may give wrong window

switchTo().window() : switchTo() method in protractor helps user to switch between windows, frames, elements, alerts.

switchTo().window(GU ID) method switches the control from the current browser window to target browser window which has the specified "GU ID".


										browser.switchTo().window(guid);
										

Javascript to select dropdown option

Handle simple Two Browser Windows / Tabs

Click the button to Open a new window ( google.com)

Please use firefox as browser to open the link in new window, if you use chrome the link may be opened in new tab rather than new window.

two-windows-example-selenium-webdriver Steps to Handle Two Windows :
1. Open firefox browser and Navigate to https://chercher.tech/protractor/handle-browser-windows-protractor


										// set implicit time to 30 seconds
										browser.manage().timeouts().implicitlyWait(30000);
										// navigate to the url
										browser.get("https://chercher.tech/protractor/handle-browser-windows-protractor");
										


2. Get the GU ID of the current (parent) window using getWindowHandle() method present in the protractor and store the value in a String


										// get the Session id of the Parent
										browser.getWindowHandle().then(function(parentGUID){
										


3. Click on the Open New Window button, application open new window with google page. Make the protractor to sleep for 5 seconds, otherwise it may not find the newly opened tab.


										// click the button to open new window
										element(by.id("two-window")).click();
										browser.sleep(5000);
										


4. Get the GU IDs of the two windows (parent + google), using getWindowHandles() method present in the Protractor. Store the GU IDs in a Set Collection, this Set will have GU IDs of both parent and Child Browsers


										// get the All the session id of the browsers
										browser.getAllWindowHandles().then(function(allGUID){
										


5. iterate the Set of GUID values, and if the value is parent value skip it if not switch to the new window


										// iterate the values in the set
										for(let guid of allGUID){
											// one enter into if block if the GUID is not equal to parent window's GUID
											if(guid !=parentGUID){
												
											}
										}
										


6. Switch to window using switchTo().window() method present in protractor, pass the GU ID of the child browser to this method.


										// switch to the guid
										browser.switchTo().window(guid);
										// break the loop
										break;
												
										


7. Find the search bar in Google.com and search for "success"


										// search on the google page
										element(by.name("q")).sendKeys("success");
										


Close the Google tab/Window and return to parent tab/browser window


										// close the browser
										browser.close();
										// switch back to the parent window
										browser.switchTo().window(parentGUID);
										

Complete code for switching window may look like below


										import { browser, element, by, ExpectedConditions, protractor} from 'protractor'
										import { Alert } from 'selenium-webdriver';
										describe('Protractor Typescript Demo', function() {
											browser.ignoreSynchronization = true; // for non-angular websites
											it('Browser Window Operation', function() {
												// set implicit time to 30 seconds
												browser.manage().timeouts().implicitlyWait(30000);
												// navigate to the url
												browser.get("https://chercher.tech/protractor/handle-browser-windows-protractor");
												// get the Session id of the Parent
												browser.getWindowHandle().then(function(parentGUID){
													// click the button to open new window
													element(by.id("two-window")).click();
													browser.sleep(5000);
													// get the All the session id of the browsers
													browser.getAllWindowHandles().then(function(allGUID){
														// print the title of th epage
														console.log("Page title before Switching : "+ browser.getTitle());
														console.log("Total Windows : "+allGUID.length);
														// iterate the values in the set
														for(let guid of allGUID){
															// one enter into if blobk if the GUID is not equal to parent window's GUID
															if(guid !=parentGUID){
																// switch to the guid
																browser.switchTo().window(guid);
																// break the loop
																break;
															}
														}
														// search on the google page
														element(by.name("q")).sendKeys("success");
														// print the title after switching
														browser.sleep(5000).then(function(){
															console.log("Page title after Switching to goolge : "+ browser.getTitle());
														})
														// close the browser
														browser.close();
														// switch back to the parent window
														browser.switchTo().window(parentGUID);
														// print the title
														browser.sleep(5000).then(function(){
															console.log("Page title after switching back to Parent: "+ browser.getTitle());
														})
													})
												})
											});
										});
										


I have not resolved the promises of the getTitle(), so you might see the manage promise message instead of text output-two-window-selenium-webdriver

Json format Logging using winston in Protractor

More than Two Window handling

We have handled the two windows in above tutorial by comparing GUID but when we have more than two window we cannot use the same approach. To access the exact page we may need title of the page, based on the title of the page we can differentiate the browser windows in selenium.

Tip : We can use title, url, element reference while switching into new window to ensure that we are switching to the required window. I prefer Tile, url than element



Scenario : Click on the Open 3 New Windows button, it will open three more windows (bing, google, yahoo), now switch to bing and search for "gates". four-windows-example-selenium-webdriver Steps to Handle More than Two Windows :

  • 1. Open firefox browser and Navigate to https://chercher.tech/protractor/handle-browser-windows-protractor
  • 2. Get the GU ID of the current (parent) window using getWindowHandle() method present in the protractor and store the value in a String
  • 3. Click on the Open 3 New Window button, application open new window with google page. Make the protractorto sleep for 5 seconds, otherwise it may not find the newly opened tab.
  • 4. Get the GU IDs of the two windows (parent + google + bing + yahoo), using getWindowHandles() method present in the Selenium webdriver. Store the GU IDs in a Set Collection, this Set will have GU IDs of both parent and Child Browsers
  • 5. Now iterate through the List, and switch to first GUID in Set and check the page title contains the keyword "bing".
Complete program for switching multiple windows in protractor

										import { browser, element, by, ExpectedConditions, protractor} from 'protractor'
										import { Alert } from 'selenium-webdriver';
										describe('Protractor Typescript Demo', function() {
											browser.ignoreSynchronization = true; // for non-angular websites
											it('Browser Window Operation', function() {
												// set implicit time to 30 seconds
												browser.manage().timeouts().implicitlyWait(30000);
												// navigate to the url
												browser.get("https://chercher.tech/protractor/handle-browser-windows-protractor");
												// get the Session id of the Parent
												browser.getWindowHandle().then(function(parentGUID){
													// click the button to open new window
													element(by.id("three-window")).click();
													browser.sleep(5000);
													// get the All the session id of the browsers
													browser.getAllWindowHandles().then(function(allGUID){
														// print the title of th epage
														console.log("Page title before Switching : "+ browser.getTitle());
														console.log("Total Windows : "+allGUID.length);
														
														// iterate the values in the set
														for(let guid of allGUID){
															// check the title of the page to match with "bing"
															browser.switchTo().window(guid);
															browser.getTitle().then(function(title){
																if(title == "Google"){
																	element(by.name("q")).sendKeys("gates");
																	browser.sleep(5000);
																
																}	
															})	
														}
														browser.quit()
													})
												})
											});
										});
										

How do developer make the link to open in New Window

Developer can make the link to open in new window using target keyword present in anchor tag <a>, when developer set this value to "_blank", the link will be opened in new windows when user clicks the link.


											// button is nested inside a link
											<a id='two-window' href='https://google.com' target='_blank'><input type='button' value="Open New Window"></a>
											// plain link
											<a id='two-window' href='https://google.com' target='_blank'>Click me</a>
										


If developer avoids to use target='_blank', browser opens such links in same window. It is recommended not to open the link in new window


										<a id='two-window' href='https://google.com'>Click me</a>
										

Force to open in new Window rather than Tab

There will be situations where we have to open a link in new Window, but later browser donot support opening a url in new window as it is not recommended ( phishing is easy with new windows ).

During such scenarios we can use action class to open the link in new window, by pressing Shift key and to click the link, it opens the link in new window in protractor.

Steps to open link in a new Window :

  • Open firefox browser and Navigate to https://chercher.tech/protractor/handle-browser-windows-protractor
  • 2. Find the above link using id force-new-window and store it in a variable of WebElement type
    
    										// store the element
    										let ele:WebElement = element(By.id("force-new-window")).getWebElement();
    										
  • 3. Create a object for Actions class
    
    										// create object for Actions class
    										browser.actions()
    										
  • 4. Call keyDown() method from the Actions class object, and pass Keys.SHIFT as parameter
  • 5. Call Click() method from the Actions class object, pass stored web element as parameter to this method
  • 6. Use perform() method from Actions class object to bind the keyDown() and click() methods and to perform the operations.
    
    										browser.actions().keyDown(protractor.Key.SHIFT)
    														.click(ele)
    														.perform()
    										

Complete program for opening a link in new window in protractor.


										import { browser, element, by, ExpectedConditions, protractor} from 'protractor'
										import { Alert, WebElement } from 'selenium-webdriver';
										describe('Protractor Typescript Demo', function() {
											browser.ignoreSynchronization = true; // for non-angular websites
											it('Browser Window operation', function() {
												// set implicit time to 30 seconds
												browser.manage().timeouts().implicitlyWait(30000);
												// navigate to the url
												browser.get("https://chercher.tech/protractor/handle-browser-windows-protractor.php");
												// get the Session id of the Parent
												browser.getWindowHandle().then(function(parentGUID){
													// store the element
													let ele:WebElement = element(by.id("force-new-window"));
													// create object for Actions class
													browser.actions().keyDown(protractor.Key.SHIFT)
																	.click(ele)
																	.perform()
												});
											});
										});
										

Protractor Interview Questions

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.

Share this Article Facebook
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions

Copyright © CherCher Tech