Handle mutiple windows in WebdriverIO

Table of content

• Multiple windows
• Multiple windows in WebdriverIO
• Get Window Handles in WebdriverIO
• Handle simple Two Browser Windows / Tabs
• More than Two Window handling

Today most web applications contain multiple navigation links which lead the user to face multiple tabs/windows. Those are maybe advertisements or kinds of information showing on popup windows such as terms & conditions, privacy policy, or kind of web page itself where the 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 switchTo method we can also handle frames and alerts with easy methods. I will focus on multiple windows as of now.

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

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

Also, note that the 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 a new window does not transfer control of WebDriverIO to a new window. WebDriverIO will be still controlling the old window and any operations that we perform using the WebdriverIO script will be forwarded to this old window.

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

• getWindowHandle
• getWindowHandles
• switchToWindow

Multiple Windows

The above image depicts multiple browser windows

• Our Application is opened on Parent/Base window, the total number of windows is one
• When clicking on a link/button our application opens two new windows along with the 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 opens 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 an operation on grandchild -1 window and we can close all windows or specific windows.

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

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 identifying them uniquely. We will be using this GU ID to handle the multiple browsers, GU ID is a 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()

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

browser.switchToWindow(guid);

Click the button to open a new window ( google.com) Please use firefox as a browser to open the link in a new window, if you use chrome the link may be opened in a new tab rather than a new window.


Steps to Handle Two Windows :
1. Open firefox browser and Navigate to https://chercher.tech/java/handle-multiple-windows-tabs-selenium-webdriver

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, the application opens a new window with a 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 the 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 the 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());
	})
})

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

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". Steps to Handle More than Two Windows :

• Open firefox browser and Navigate to https://chercher.tech/java/handle-multiple-windows-tabs-selenium-webdriver
• 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, the application opens a new window with a google page. Make the webdriverIO 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 the 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());
	})
})