Complete Guide To Handle Multiple Windows With Selenium & Protractor

Every day is a challenge for newbie automation testers! Just when you learned how to perform automated browser testing on a single window, you now come across the challenge to handle multiple windows. Isn’t this a nightmare! Well, no need to worry, I’ve got you covered.

While performing automated browser testing, at times you might end up in situations where you would need to handle multiple windows in Selenium. Your test cases might need you to open a new tab and then switch back to the last window to complete the other pending activities.

Let’s say you want to check if all the There might be a certain situation when you might come across a situation where the current browser tab is not active. Hence, to find these issues before they hamper your user’s experience, you need to make sure you include all the test cases to handle multiple windows in Selenium with Protractor.

In this tutorial, I’ll show you how to handle multiple windows in Selenium with Protractor. If you are not familiar with writing Selenium test automation on Protractor, I’ve already covered it in our previous Protractor tutorial. If you are preparing for an interview you can learn more through Protractor Interview Questions.

Working with Browser Window Handles In Selenium With Protractor

Before we handle multiple windows in Selenium Protractor, we need to know how to identify different browser windows and tabs. It’s pretty straightforward, every browser or tab instance has a Global Unique Identifier(GUID), which makes it pretty easy to access them. GUID identifiers help to handle multiple windows in Selenium Protractor, additionally, Protractor provides useful methods that can be used to handle multiple windows in Selenium Protractor for automated browser testing. So, let’s have a look at these methods.

getWindowHandle()

The getWindowHandle() function in the Protractor returns the string GUID for the current active window in the browser. This is invoked on the browser object as – browser.getWindowHandle();

getWindowHandles()

The getWindowHandles() function returns the GUID’s for all the windows and tabs opened on the active browser windows. This is called via the framework as browser.getWindowHandles();

switchTo()

switchTo() method enables easy way to handle multiple windows in Selenium Protractor, tabs and switch between the two. It shifts the control from the current window to the target windows. The GUID is passed as an argument to indicate the Protractor about the target window or tabs. i.e. browser.switchTo().window(guid);

RUN YOUR PROTRACTOR SCRIPT ON SELENIUM GRID

2000+ Browsers AND OS

FREE SIGNUP

How to Handle Multiple Browser Windows And Tabs In Selenium with Protractor?

Now that you know how to get the GUID of the browser windows and the methods to handle them, you should be fine. So, let’s look at this issue in more detail with a step by step approach to handle multiple windows in Selenium Protractor.

For ease of understanding, I will start by handling two windows in Selenium.

You can take this certification as proof of expertise in the field of test automation with JavaScript to empower yourself and boost your career.

Here’s a short glimpse of the Selenium JavaScript 101 certification from LambdaTest:

Steps To Handle Two Windows In The Browser:

1. First ,let’s open the window and launch the url https://www.lambdatest.com in the browser, to handle multiple windows in Selenium Protractor for automated browser testing .
2. Then by using Selenium Protractor’s getWindowHandle() function, I’ll get the GUID of the currently active window and store it into a variable.
3. Similarly, you can open a new tab/window and navigate to a new URL e.g. https://www.google.com . Further, by using the sleep method, I can indicate to the Selenium Protractor to wait for some time, let’s say 4 seconds, to allow the new tab to load the URL completely. You can even use implicit and explicit wait commands depending on the requirement.

Using Implicit Wait in Selenium C#

4. Next, I’ll get the GUIDs for both the windows i.e . the first window (parent windows) as well as the seconds window ( newly opened windows ), using the Selenium Protractor’s getWindowHandles() function, which stores the guid values for both windows in a collection Set .
5. Next, let’s perform an iteration over this collection of GUID, and switch to the new window only after encountering a new GUID, to add to the collection.
6. Now, I’ll switch to the new window by using the switchTo().window() function and pass the GUID of the new window as an argument to this function.
7. Finally, let’s perform a search query on Google, after this, I’ll close the window and return to the previous window.

In the Selenium test automation script below, I’ve taken a test case to show you how to handle and switch between two windows in a browser.

This is the configuration file used by Selenium Protractor to manage any config parameter, used globally within the application.

Now let’s take a scenario, where you have to handle more than two windows for automated browser testing. This approach is slightly different, I’ll use three windows for Selenium test automation in this case. You can repeat the same process for any number of browsers you want to work with.

Steps to Handle More Than Two Windows In the Browser With Selenium & Protractor:

1. Start with performing Step 1 to Step 3 from the previous test case.
2. Now, you already have two tabs, open the third tab, let’s open https://www.selenium.dev, and use the sleep function for 4 seconds to wait for the new tab to load completely.
3. Now we will store the GUID values for all the three windows in the collection Set including the value of the newly opened windows using the Protractor’s getWindowHandles() function.
4. Finally , I’ll iterate through the collection and switch to the second tab i.e. https://www.lambdatest.com using the switchTo() method, and then I’ll verify the title of the web page to be “Cross Browser Testing Tools”.
5. You can now perform any action on the tab and then close the window to return to the last opened window or tab.

Below is the Selenium test automation script to demonstrate how to handle and switch between more than two windows in a browser in Selenium with Protractor.

You can also refer to the below video tutorial on how to handle Windows and Frames in selenium.

Additional Features to Handle Multiple Browser Windows In Selenium With Protractor

The Selenium Protractor framework is so robust that it provides various customized utilities that allow us to perform certain actions, by calling its inbuilt classes and functions on the browser object. For instance, imagine a scenario where there is a requirement to open a link in the new window but as a standard protocol, the browser does not allow to open the link in the new window by default. In such a case, we need to force open the link in the new window, using Selenium Protractor’s action class.

Below are the steps by step approach to open the link in such a use case :

1. We need to specify the url we would want to launch ( https:// www.google.com ) and store the element id “force-new-window” for the above link to a variable of type WebElement.
   
   // store the element WebElement ele = element(By.id("force-new-window")).getWebElement();

   1 2	// store the element WebElement ele = element(By.id("force-new-window")).getWebElement();

2. Next, we will create an object of the action class to invoke certain events on the hyperlink.
   
   // create object for Actions class browser.actions()

   1 2	// create object for Actions class browser.actions()

3. Then, we will call various methods on the action class object
   • Invoke the keyDown () function and pass the Shift key as an argument.
   • Invoke the click () function and pass the web element from above as an argument.
   • Finally, we will bind these two methods to the action class using the perform function and our task gets executed. Now we can see the website launched in a new window.

Below is the complete script that demonstrates how Protractor forcefully launches the link in a new browser window.

Enable Hyperlink to Open in A New Window

Usually, while clicking a hyperlink opens on the same window by default.

But there are certain scenarios when you need the flexibility to open the link in the new windows rather than the same window or tab. This can be done simply by using the anchor tag and setting the value of the target keyword as “_blank”. This ensures that whenever a user clicks on the link, it launches in the new window.

Read More: Protractor Vs Selenium: A Detailed Difference

Execute Automation Scripts on Online Selenium Grid Platform With Protractor

You can execute the same Selenium test automation in the cloud Selenium grid platform with minimal configuration changes that are required to build the driver and connect to the LambdaTest hub. Below is the updated script with the required changes.

You can execute the Selenium test automation scripts on the cloud, just by adding the desired capability to your code, to connect to the LambdaTest platform. To perform automated browser testing on LambdaTest cloud Selenium Grid, you need to generate the desired capability matrix to specify the environment you want to execute our Selenium test automation on. Here is the link to visit LambdaTest Selenium desired capabilities generator.

Below is the output on running the Selenium test automation:

Well, it’s a success mate, our Selenium test automation script ran successfully on the Cloud Selenium Grid.

Also Read:

Guide To Selenium Locators In Protractor

Wrapping it Up!

This is just the end of the beginning! You now know how to handle multiple browser windows in Selenium. Go ahead, and handle the heck out of these browser windows. They might have been a nightmare before, but between you and me, we now know that it’s just a piece of cake! You now know how to handle multiple windows and tabs in the Protractor framework for Selenium test automation. The framework is robust, flexible and provides various inbuilt classes and functions.

In case, you want to learn more about using Protractor with Selenium, do subscribe to our blog. And, I’d keep you posted about new blogs. This is certainly not the last blog on Protractor, there’s more to come! If you haven’t checked out our previous blogs on automated browser testing with a protractor, and Selenium locators with a protractor, I’d urge you to do so, as these topics are essential for automated browser testing. Also, If you’d like to help your peers learn about handing multiple browsers, do share this blog with them. That’s all for now! Happy Testing.

Aditya Dwivedi

Aditya is a test automation enthusiast at LambdaTest who is always fascinated about new testing frameworks and programming languages.

See author's profile