Join us on :

Multiple windows

Today most of the web applications contain multiple navigation links which lead the user to face multiple tabs/windows. Those are may be advertisements or kind of information showing on popup windows such as terms & conditions, privacy policy or kind of web page itself where user has to enter information.

We can handle multiple windows in WebdriverIO using switch To methods which will allow us to switch control from one window to another window. If you are working with web applications, then you must have faced this scenario where you have to deal with multiple windows.

If you have to switch between tabs then also you have to use the same approach. Using switch To method we can also handle frames and alerts with easy methods. I will focus on multiple windows as of now.

Operating system assigns an alphanumeric id to each window as soon as the Tab/window is opened. This unique alphanumeric id is called GUID or window handle.

We can use this unique id to differentiate a window and switch control among multiple windows.

Using switch To functions we can switch control and handle frames and alerts, in similar fashion we can also control new tabs/windows.

Multiple windows in WebdriverIO

There is only one way you can get multiple windows via WebdriverIO, that is by clicking on a link which opens the page in a new browser window. WebdriverIO keeps a track of how many windows it opened during a session.

Also note that WebDriverIO object always controls only one window at a time in the current session even though multiple windows are present.

For example, opening a link in new window does not transfer control of WebDriverIO to new window. WebDriverIO will be still controlling the old window and any operations that we perform using WebdriverIO script will be forwarded to this old window.

Functions which will help us to handle multiple windows in webdriverio.

  • getWindowHandle
  • getWindowHandles
  • switchToWindow

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.

Get Window Handles in WebdriverIO

WebdriverIO 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 webdriverIO returns the current(active) browser's GU ID. It returns GU ID as string value.


										browser.getWindowHandle()
										


getWindowHandles() :
getWindowHandles method in webdriverIO returns GU ID of all the browsers present at the moment, which are opened by current browser. This method returns GU IDs as List of String.


										browser.getWindowHandles()
										


List Collection : List is one of the Collection types and it stores the values based on in memory. We can access the values based on the index.

switchToWindow() : switchToWindow() method helps user to switch between windows. switchToWindow() method switches the control from the current browser window to target browser window which has the specified "GU ID".



										browser.switchToWindow(guid);
										

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/python/windows-selenium-python


										browser.url('https://chercher.tech/webdriverio/multiple-windows')
										


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


										// get the Session id of the Parent
										var parentGUID = browser.getWindowHandle();
										


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


										// click the button to open new window
										$("#two-window").click();
										Thread.sleep(5000);
										


4. Get the GU IDs of the two windows (parent + google), using getWindowHandles() method. 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
										var allGUID = browser.getWindowHandles();
										


5. iterate the list 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(var i = 0; i< allGUID.length;i++){
											// one enter into if block if the GUID is not equal to parent window's GUID
											if( guid != parentGUID){
												//todo 
											}
										}
										


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


										// switch to the guid
										driver.switchToWindow(guid);
												
										


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


										// search on the google page
										$("[name='q']")).setValue("success");
										


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


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

Complete code for switching window may look like below


										describe('Multiple windows', () => {
											it('Handle multiple windows', () => {
												// navigate to the url
												browser.url("https://chercher.tech/python/windows-selenium-python");
												// get the Session id of the Parent
												var parentGUID = browser.getWindowHandle();
												// click the button to open new window
												$("#two-window").click();
												browser.pause(5000);
												// get the All the session id of the browsers
												var allGUID = browser.getWindowHandles();

												// pint 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(var i = 0; i< allGUID.length;i++){
													// one enter into if blobk if the GUID is not equal to parent window's GUID
													if(allGUID[i] != parentGUID){
														// switch to the guid
														browser.switchToWindow(allGUID[i]);
														// break the loop
														break;
													}
												}
												// search on the google page
												$("[name='q']").setValue("success");
												// print the title after switching
												console.log("Page title after Switching to google : "+ browser.getTitle());
												browser.pause(5000);
												// close the browser
												browser.close();
												// switch back to the parent window
												browser.switchToWindow(parentGUID);
												// print the title
												console.log("Page title after switching back to Parent: "+ browser.getTitle());
											})
										})
										
mutiple-windows-ebdriverio

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 WebdriverIO.

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 :

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

										describe('Multiple windows', () => {
											it('Handle multiple windows', () => {
												// navigate to the url
												browser.url("https://chercher.tech/python/windows-selenium-python");
												// get the Session id of the Parent
												var parentGUID = browser.getWindowHandle();
												// click the button to open new window
												$("#three-window").click();
												browser.pause(5000);
												// get the All the session id of the browsers
												var allGUID = browser.getWindowHandles();

												// print the title of the page
												console.log("Page title before Switching : "+ browser.getTitle());
												console.log("Total Windows : "+allGUID.length);
												// iterate the values in the set
												for(var i = 0; i< allGUID.length;i++){
													// one enter into if blobk if the GUID is not equal to parent window's GUID
													browser.switchToWindow(allGUID[i]);
													// switch to the guid
													if(browser.getTitle().includes("Bing")){
														// break the loop
														break;
													}
												}
												// search on the google page
												$("[name='q']").setValue("success");
												// print the title after switching
												console.log("Page title after Switching to goolge : "+ browser.getTitle());
												browser.pause(5000);
												// close the browser
												browser.close();
												// switch back to the parent window
												browser.switchToWindow(parentGUID);
												// print the title
												console.log("Page title after switching back to Parent: "+ browser.getTitle());
											})
										})
										
multiple-windows-webdriverio

About Author

Article is written by Pavan (a) KarthiQ. Well, I am serving notice period in an MNC, Bangalore. I thought to enrich every person knowledge a little, I always have a feeling, when we teach something, we will learn more than what you know. Knowledge is the only thing that doubles when you spend it.

I have also created the reporter for Protractor Jasmine. Use for your projects without any hesitation

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions