Complete Guide To Handle Multiple Windows With Selenium & Protractor | LambdaTest
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 of handling 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 and tabs. 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 involving multiple windows/tabs 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 Automation tests on Protractor, I’ve already covered it in our previous Protractor tutorial.
Working with Browser Window Handles In Selenium With Protractor
Before we handle browser windows, 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, additionally, Protractor provides useful methods that can be used to handle windows. So, let’s have a look at these methods.
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();
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() method enables easy management of windows , 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);
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 the browser.
For ease of understanding, I will start by handling two windows..
Steps To Handle Two Windows In The Browser:
- First ,let’s open the window and launch the url https://www.lambdatest.com in the browser, to handle multiple windows in Selenium for automated browser testing .
2. Then by using 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 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.
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 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 automation test 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 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:
- Start with performing Step 1 to Step 3 from the previous test case.
- 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.
- 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.
- 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”.
- 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.
Additional Features to Handle Multiple Browser Windows In Selenium With Protractor
The 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 Protractor’s action class.
Below are the steps by step approach to open the link in such a use case :
- 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();
2. Next, we will create an object of the action class to invoke certain events on the hyperlink.
// create object for Actions class
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.
<a id=’two-window’ href=’https://google.com'>Click me</a>
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 ink, it launches in the new window.
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.
Wrapping it Up!
This is just the end of the beginning! You now know how to handle multiple browser windows. 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 browser windows and tabs in the Protractor framework to perform Selenium Automation Testing. 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 cross 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.
Originally published at LambdaTest
Author Aditya Dwivedi