Handling Multiple Windows With Protractor For Selenium Testing
Handling Multiple Windows With Protractor For Selenium Testing
Learn how to handle multiple browser windows and tabs in Protractor framework for Selenium with examples in this complete guide. Read Now!
Jun. 05, 20 · Performance Zone ·
Comment (0)
Join the DZone community and get the full member experience.
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 Selenium Protractor 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 Selenium 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.
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 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:
1. 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.
// this property is used to assign an implicit wait time to 20 seconds for automated browser testing //browser.manage().timeouts().implicitlyWait(20000); // this functions redirects to the url in the browser for automated browser testing //browser.get(" https://www.lambdatest.com ");2. Then by using Protractor’s getWindowHandle() function, I’ll get the GUID of the currently active window and store it into a variable.
xxxxxxxxxx// it fetches the unique identifier for the first window for automated browser testing // browser.getWindowHandle().then(function(firstGUID){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.
browser.manage().timeouts().implicitlyWait(20000);0
browser.manage().timeouts().implicitlyWait(20000);1
browser.manage().timeouts().implicitlyWait(20000);2
browser.manage().timeouts().implicitlyWait(20000);3
browser.manage().timeouts().implicitlyWait(20000);4
browser.manage().timeouts().implicitlyWait(20000);5
browser.manage().timeouts().implicitlyWait(20000);6
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 guide values for both windows in a collection Set.
browser.manage().timeouts().implicitlyWait(20000);7
browser.manage().timeouts().implicitlyWait(20000);8
browser.manage().timeouts().implicitlyWait(20000);9
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.
0
1
2
3
4
5
6
7
6. Now, I’ll switch to the new window by using the switch().window() function and pass the GUID of the new window as an argument to this function.
8
9
// this functions redirects to the url in the browser for automated browser testing //0
// this functions redirects to the url in the browser for automated browser testing //1
// this functions redirects to the url in the browser for automated browser testing //2
// this functions redirects to the url in the browser for automated browser testing //3
7. Finally, let’s perform a search query on Google, after this, I’ll close the window and return to the previous window.
// this functions redirects to the url in the browser for automated browser testing //4
// this functions redirects to the url in the browser for automated browser testing //5
// this functions redirects to the url in the browser for automated browser testing //6
// this functions redirects to the url in the browser for automated browser testing //7
// this functions redirects to the url in the browser for automated browser testing //8
// this functions redirects to the url in the browser for automated browser testing //9
browser.get(" https://www.lambdatest.com ");0
browser.get(" https://www.lambdatest.com ");1
browser.get(" https://www.lambdatest.com ");2
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.
test_config.js
This is the configuration file used by Protractor to manage any config parameter, used globally within the application.
browser.get(" https://www.lambdatest.com ");3
browser.get(" https://www.lambdatest.com ");4
browser.get(" https://www.lambdatest.com ");5
browser.get(" https://www.lambdatest.com ");6
browser.get(" https://www.lambdatest.com ");7
browser.get(" https://www.lambdatest.com ");8
browser.get(" https://www.lambdatest.com ");9
0
1
2
3
4
5
6
7
8
9
xxxxxxxxxx0
xxxxxxxxxx1
xxxxxxxxxx2
xxxxxxxxxx3
xxxxxxxxxx4
xxxxxxxxxx5
xxxxxxxxxx6
xxxxxxxxxx7
xxxxxxxxxx8
xxxxxxxxxx9
// it fetches the unique identifier for the first window for automated browser testing //0
// it fetches the unique identifier for the first window for automated browser testing //1
// it fetches the unique identifier for the first window for automated browser testing //2
// it fetches the unique identifier for the first window for automated browser testing //3
// it fetches the unique identifier for the first window for automated browser testing //4
// it fetches the unique identifier for the first window for automated browser testing //5
// it fetches the unique identifier for the first window for automated browser testing //6
// it fetches the unique identifier for the first window for automated browser testing //7
// it fetches the unique identifier for the first window for automated browser testing //8
// it fetches the unique identifier for the first window for automated browser testing //9
0
1
2
3
4
5
6
7
8
9
browser.getWindowHandle().then(function(firstGUID){0
browser.getWindowHandle().then(function(firstGUID){1
browser.getWindowHandle().then(function(firstGUID){2
browser.getWindowHandle().then(function(firstGUID){3
browser.getWindowHandle().then(function(firstGUID){4
browser.getWindowHandle().then(function(firstGUID){5
browser.getWindowHandle().then(function(firstGUID){6
browser.getWindowHandle().then(function(firstGUID){7
browser.getWindowHandle().then(function(firstGUID){8
browser.getWindowHandle().then(function(firstGUID){9
browser.manage().timeouts().implicitlyWait(20000);00
browser.manage().timeouts().implicitlyWait(20000);01
browser.manage().timeouts().implicitlyWait(20000);02
browser.manage().timeouts().implicitlyWait(20000);03
browser.manage().timeouts().implicitlyWait(20000);04
browser.manage().timeouts().implicitlyWait(20000);05
browser.manage().timeouts().implicitlyWait(20000);06
browser.manage().timeouts().implicitlyWait(20000);07
browser.manage().timeouts().implicitlyWait(20000);08
browser.manage().timeouts().implicitlyWait(20000);09
browser.manage().timeouts().implicitlyWait(20000);10
browser.manage().timeouts().implicitlyWait(20000);11
browser.manage().timeouts().implicitlyWait(20000);12
browser.manage().timeouts().implicitlyWait(20000);13
browser.manage().timeouts().implicitlyWait(20000);14
browser.manage().timeouts().implicitlyWait(20000);15
browser.manage().timeouts().implicitlyWait(20000);16
browser.manage().timeouts().implicitlyWait(20000);17
browser.manage().timeouts().implicitlyWait(20000);18
browser.manage().timeouts().implicitlyWait(20000);19
browser.manage().timeouts().implicitlyWait(20000);20
browser.manage().timeouts().implicitlyWait(20000);21
browser.manage().timeouts().implicitlyWait(20000);22
browser.manage().timeouts().implicitlyWait(20000);23
browser.manage().timeouts().implicitlyWait(20000);24
browser.manage().timeouts().implicitlyWait(20000);25
browser.manage().timeouts().implicitlyWait(20000);26
browser.manage().timeouts().implicitlyWait(20000);27
browser.manage().timeouts().implicitlyWait(20000);28
browser.manage().timeouts().implicitlyWait(20000);29
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 and 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.
browser.manage().timeouts().implicitlyWait(20000);30
browser.manage().timeouts().implicitlyWait(20000);31
browser.manage().timeouts().implicitlyWait(20000);32
browser.manage().timeouts().implicitlyWait(20000);33
browser.manage().timeouts().implicitlyWait(20000);34
browser.manage().timeouts().implicitlyWait(20000);35
browser.manage().timeouts().implicitlyWait(20000);36
browser.manage().timeouts().implicitlyWait(20000);37
browser.manage().timeouts().implicitlyWait(20000);38
browser.manage().timeouts().implicitlyWait(20000);39
browser.manage().timeouts().implicitlyWait(20000);40
browser.manage().timeouts().implicitlyWait(20000);41
browser.manage().timeouts().implicitlyWait(20000);42
browser.manage().timeouts().implicitlyWait(20000);43
browser.manage().timeouts().implicitlyWait(20000);44
browser.manage().timeouts().implicitlyWait(20000);45
browser.manage().timeouts().implicitlyWait(20000);46
browser.manage().timeouts().implicitlyWait(20000);47
browser.manage().timeouts().implicitlyWait(20000);48
browser.manage().timeouts().implicitlyWait(20000);49
browser.manage().timeouts().implicitlyWait(20000);50
browser.manage().timeouts().implicitlyWait(20000);51
browser.manage().timeouts().implicitlyWait(20000);52
browser.manage().timeouts().implicitlyWait(20000);53
browser.manage().timeouts().implicitlyWait(20000);54
browser.manage().timeouts().implicitlyWait(20000);55
browser.manage().timeouts().implicitlyWait(20000);56
browser.manage().timeouts().implicitlyWait(20000);57
browser.manage().timeouts().implicitlyWait(20000);58
browser.manage().timeouts().implicitlyWait(20000);59
browser.manage().timeouts().implicitlyWait(20000);60
browser.manage().timeouts().implicitlyWait(20000);61
browser.manage().timeouts().implicitlyWait(20000);62
browser.manage().timeouts().implicitlyWait(20000);63
browser.manage().timeouts().implicitlyWait(20000);64
browser.manage().timeouts().implicitlyWait(20000);65
browser.manage().timeouts().implicitlyWait(20000);66
browser.manage().timeouts().implicitlyWait(20000);67
browser.manage().timeouts().implicitlyWait(20000);68
browser.manage().timeouts().implicitlyWait(20000);69
browser.manage().timeouts().implicitlyWait(20000);70
browser.manage().timeouts().implicitlyWait(20000);71
browser.manage().timeouts().implicitlyWait(20000);72
browser.manage().timeouts().implicitlyWait(20000);73
browser.manage().timeouts().implicitlyWait(20000);74
browser.manage().timeouts().implicitlyWait(20000);75
browser.manage().timeouts().implicitlyWait(20000);76
browser.manage().timeouts().implicitlyWait(20000);77
browser.manage().timeouts().implicitlyWait(20000);78
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 :
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.
browser.manage().timeouts().implicitlyWait(20000);79
browser.manage().timeouts().implicitlyWait(20000);80
browser.manage().timeouts().implicitlyWait(20000);81
2. Next, we will create an object of the action class to invoke certain events on the hyperlink.
browser.manage().timeouts().implicitlyWait(20000);82
browser.manage().timeouts().implicitlyWait(20000);83
browser.manage().timeouts().implicitlyWait(20000);84
browser.manage().timeouts().implicitlyWait(20000);85
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.
browser.manage().timeouts().implicitlyWait(20000);86
browser.manage().timeouts().implicitlyWait(20000);87
browser.manage().timeouts().implicitlyWait(20000);88
browser.manage().timeouts().implicitlyWait(20000);89
browser.manage().timeouts().implicitlyWait(20000);90
Below is the complete script that demonstrates how Protractor forcefully launches the link in a new browser window.
browser.manage().timeouts().implicitlyWait(20000);91
browser.manage().timeouts().implicitlyWait(20000);92
browser.manage().timeouts().implicitlyWait(20000);93
browser.manage().timeouts().implicitlyWait(20000);94
browser.manage().timeouts().implicitlyWait(20000);95
browser.manage().timeouts().implicitlyWait(20000);96
browser.manage().timeouts().implicitlyWait(20000);97
browser.manage().timeouts().implicitlyWait(20000);98
browser.manage().timeouts().implicitlyWait(20000);99
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
Enable Hyperlink to Open in A New Window
Usually, while clicking a hyperlink opens on the same window by default.
20
21
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.
22
23
24
25
26
27
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
test_config.js
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
test_script.js
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
// this functions redirects to the url in the browser for automated browser testing //00
// this functions redirects to the url in the browser for automated browser testing //01
// this functions redirects to the url in the browser for automated browser testing //02
// this functions redirects to the url in the browser for automated browser testing //03
// this functions redirects to the url in the browser for automated browser testing //04
// this functions redirects to the url in the browser for automated browser testing //05
// this functions redirects to the url in the browser for automated browser testing //06
// this functions redirects to the url in the browser for automated browser testing //07
// this functions redirects to the url in the browser for automated browser testing //08
// this functions redirects to the url in the browser for automated browser testing //09
// this functions redirects to the url in the browser for automated browser testing //10
// this functions redirects to the url in the browser for automated browser testing //11
// this functions redirects to the url in the browser for automated browser testing //12
// this functions redirects to the url in the browser for automated browser testing //13
// this functions redirects to the url in the browser for automated browser testing //14
// this functions redirects to the url in the browser for automated browser testing //15
// this functions redirects to the url in the browser for automated browser testing //16
// this functions redirects to the url in the browser for automated browser testing //17
// this functions redirects to the url in the browser for automated browser testing //18
// this functions redirects to the url in the browser for automated browser testing //19
// this functions redirects to the url in the browser for automated browser testing //20
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 the 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:
To know more about how to handle mouse action and keyboard events in Protractor, refer to our blog on the topic.
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, debug protractor tests and handling alerts and popups. 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 handling multiple browsers, do share this blog with them.
That’s all for now!
Happy Testing.
Comment (0)
Published at DZone with permission of Aditya Dwivedi . See the original article here.
Opinions expressed by DZone contributors are their own.
Performance Partner Resources
ABOUT US
CONTRIBUTE ON DZONE
LEGAL
CONTACT US
- 600 Park Offices Drive
- Suite 150
- Research Triangle Park, NC 27709
- support@dzone.com
- +1 (919) 678-0300
- {{ node.blurb }}
{{ editionName }}
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}