Handle Multiple Browser and tabs in Selenium C#

In this tutorial, we will learn how to handle multiple browser windows in Selenium C#.

What is a Multiple Browser Window

It’s a quite common situation that while running our Test Case we will encounter multiple browser windows.

For example-

if I have opened a browser window this is my parent window, inside this if I will click on any button so it will launch one more browser window which will be the child window.  So if I try to perform any action on the child window so it will fail the reason behind it, is that my driver object is still pointing to the parent browser window.

So let’s understand it with an example-

So in our Visual Studio in TestScript we will add one more directory called MultipleBrowser inside this we are going to add a class called TestMultipleBrowserWindow, we are going to make this class public and the attribute with this class is [TestClass].

Inside this, we will create a public method TestMultipleBrowserWindow() and the attribute with this is [TestMethod].

[TestClass]
public class TestMultipleBrowserWindow
{
[TestMethod]
public void TestMultipleBrowserWindow()
{
NavigationHelper.NavigateYoUrl("http://www.w3schools.com/js/js popup.asp");
ButtonHelper.ClickButton(By.XPath("//div[@id='main']/descendant::a[position ()=3"));
ButtonHelper.ClickButton(By.XPath("//div[@class='textarea']/descendant::button"));
}
}

Explanation of code:

First of all, we are navigating to the “w3schools” webpage. After that, we will click on that button which will launch the child window.

So we can see there this particular element is the descendant of our current node and here we have 8 matching nodes so we will use the position().

So when we will click on this button it will launch one more child window.

 

This is our current node <div class "textarea"> which we are going to use for refresh purposes and this particular button node is the descendant of this node.

Now put a breakpoint on the first ButtonHelper line and build the solution and run the script in debug mode.

Output: so it has hit the debug point as soon as we do stepover it will click on that button which will give rise to the child window.

Now again we will do a stepover so as we can see there this particular action is still waiting because this element is not present on the webpage. That’s why still it is waiting for the element to appear so that it can perform the action.

But if we look at it here the particular button is present inside the child window and our driver object is still pointing to the parent window. This particular script will fail with ‘NoSuchElementException’.

Handling Multiple Browser in Selenium C#

We can handle multiple browser windows with the help of some methods and properties in Selenium C#.

“WindowHandles” property

As we can see here we are getting ‘NoSuchElementException’ and the reason is the same it is trying to locate that element inside the parent window. So there should be some mechanism by which we can switch the parent window to the child window. For that, we will use the property “WindowHandles”.

So whenever there are multiple browser windows every browser window has its own Id, based on the Id the WebDriver is able to determine which is the parent window and which is the current window.

With the help of the WindowHandles property first, we will get all the IDs of the window then using the method called "SwitchTo().window(<window Id>)". We are going to switch from the parent window to the child window or the window whose Id we are going to pass inside the method.

This method is present inside the ITargetLocator interface. In our Visual Studio if we go inside the IWebDriver Interface so there we have a method called “WindowHandles” and it is going to return us the ReadOnlyCollection of string type.

So all the IDs will be stored in the form of string data type. So when we call this method it is going to return us the ITargetLocator interface type and inside this, we have a method called Window(string, WindowName); where we supply the Id.

So the calling mechanism of this method is the same first we need to call the SwitchTo() method and then we need to call the Window() method. So here in the TestMultipleBrowserWindow() first. We need to get all the IDs, so after the first ButtonHelper line we will write.

[TestClass] 
public class TestMultipleBrowserWindow 
{ 
[TestMethod] 
public void TestMultipleBrowserWindow() 
{ NavigationHelper.NavigateYoUrl("http://www.w3schools.com/js/js popup.asp"); ButtonHelper.ClickButton(By.XPath("//div[@id='main']/descendant::a[position ()=3")); 
ReadOnlyCollection<string> window=ObjectRepository.Driver.WindowHandles;
ObjectRepository.Driver.SwitchTo().Window(windows[1]);
//[0]-parent Id, [1]-child window Id
ButtonHelper.ClickButton(By.XPath("//div[@class='textarea']/descendant::button")); 
} 
}

Explanation of code:

Here we are giving ReadOnlyCollection<string> window=ObjectRepository.Driver.WindowHandles; because it is going to return us ReadOnlyCollection of string.

Then we are switching from the parent window to the child window which is why we have given index [1] in the argument

This property will return us the ReadOnlyCollection or ReadOnlyList in which the parent window at the [0] index and child window at [1]. Now again we will build our solution and run our script in debug mode.

Output: so it has hit the debug point if we do a stepover so it is going to launch the child window. Again we do a stepover so as we can see here in the collection we have two Ids one for the parent and one for the child and here we can see their data type as a string.

So using this method our parent window will switch to the child window.

So if we do a stepover so now our driver property is pointing to the child browser window if we do stepover again so as we can see here it has performed the click action.

Switching Between More Than Two Windows

Now we are going to run one more scenario here after switching to the child window we will repeat the action again, now, in this case, we will have three browser windows.

So when we call this property that is WindowHandles so here at the [0] index present the parent Id and after that, it will become the parent when we switch to the child window.

So at the index [1], we have a child Id which will become a parent when we switch from parent to child and at the [2] index we will have a child Id. Now again we are going to switch to the last browser window so here the index will be [2].

Now build our solution and run the script in debug mode.

[TestClass] 
public class TestMultipleBrowserWindow 
{ 
[TestMethod] 
public void TestMultipleBrowserWindow() 
{ NavigationHelper.NavigateYoUrl("http://www.w3schools.com/js/js popup.asp"); ButtonHelper.ClickButton(By.XPath("//div[@id='main']/descendant::a[position ()=3")); 
ReadOnlyCollection<string> window=ObjectRepository.Driver.WindowHandles; 
//[0]-Parent Id, [1]-Child Id
ObjectRepository.Driver.SwitchTo().Window(windows[1]); 
NavigationHelper.NavigateYoUrl("http://www.w3schools.com/js/js popup.asp"); ButtonHelper.ClickButton(By.XPath("//div[@id='main']/descendant::a[position ()=3")); 
ReadOnlyCollection<string> window=ObjectRepository.Driver.WindowHandles;
//[0]-Parent Id, [1]-Child Id, Parent Id, [2]-Child Id 
ObjectRepository.Driver.SwitchTo().Window(windows[2]); ButtonHelper.ClickButton(By.XPath("//div[@class='textarea']/descendant::button")); 
} 
}

Output: It has hit the breakpoint. If we do stepover it will click on that button which will give the child window,

now we have two window Ids in our collection. One for the parent and one for the child window.

Now we are going to switch to the child window and if we do stepover again it is going to open this webpage inside the child window. Again we are going to click on that button which will give us one more child window.

Now we have 3 browser windows first one is a parent and the second one is his child when we switch to the second window and open the third window then the second one becomes the parent and the third one is his child window.

Here we will have three browser window Ids in our collection, and our driver object point to that particular window when we do stepover at last it will perform the click action and continue its execution.

So in this manner, we can handle multiple browser windows with the help of the WindowHandles property and with the help of the SwitchTo() method for switching to any particular window.