How to identify the iframe: How do switch over the elements in iframes using Web Driver commands: Concept of Nested Frames (Frames inside Frames):
How to identify the iframe:
We cannot detect the frames by just seeing the page or by inspecting Firebug. Observe the below image, Advertisement being displayed is an Iframe, we cannot locate or recognize that by just inspecting using Firebug. So the question is how can you identify the iframe?
We can identify the frames in Selenium using methods given below:
Right click on the element, If you find the option like ‘This Frame’ then it is an iframe.(Please refer the above diagram) Right click on the page and click ‘View Page Source’ and Search with the ‘iframe’, if you can find any tag name with the ‘iframe’ then it is meaning to say the page consisting an iframe.
In above diagram, you can see that ‘This Frame‘ option is available upon right clicking, so we are now sure that it is an iframe. We can even identify total number of iframes by using below snippet.
How to switch over the elements in iframes using Web Driver commands:
Basically, we can switch over the elements and handle frames in Selenium using 3 ways.
By Index By Name or Id By Web Element
Switch to the frame by index: Index is one of the attributes for frame handling in Selenium through which we can switch to it. Index of the iframe starts with ‘0’. Suppose if there are 100 frames in page, we can switch to frame in Selenium by using index.
driver.switchTo().frame(0); driver.switchTo().frame(1);
Switch to the frame by Name or ID: Name and ID are attributes for handling frames in Selenium through which we can switch to the iframe.
driver.switchTo().frame(“iframe1”); driver.switchTo().frame(“id of the element”);
Example of Switching to iframe through ID: Let’s take an example to switch frame in Selenium displayed in the below image. Our requirement is to click the iframe. We can access this iframe through this below URL: http://demo.guru99.com/test/guru99home/
It is impossible to click iframe directly through XPath since it is an iframe. First we have to switch to the frame and then we can click using xpath. Step 1)
We initialise the Firefox driver. Navigate to the “guru99” site which consist the iframe. Maximized the window.
In this step we need to find out the id of the iframe by inspecting through Firebug. Then switch to the iframe through ID.
Step 3)
Here we need to find out the xpath of the element to be clicked. Click the element using web driver command shown above.
Here is the complete code: Output: Browser navigates to the page consisting the above iframe and clicks on the iframe. Switch to the frame by Web Element: We can even switch to the iframe using web element .
driver.switchTo().frame(WebElement);
How to switch back to the Main Frame We have to come out of the iframe. To move back to the parent frame, you can either use switchTo().parentFrame() or if you want to get back to the main (or most parent) frame, you can use switchTo().defaultContent(); How to switch over the frame, if we CANNOT switch using ID or Web Element: Suppose if there are 100 frames in the page, and there is no ID available, in this case, we just don’t know from which iframe required element is being loaded (It is the case when we do not know the index of the frame also). The solution for the above concern is, we must find the index of the iframe through which the element is being loaded and then we need to switch to the iframe through the index. Below are the steps for finding the index of the Frame by which the element is being loaded by using below snippet Step 1)
Initialise the Firefox driver. Navigate to the “guru99” site which consisting the iframe. Maximized the window.
Step 2)
The above code finds the total number of iframes present inside the page using the tagname ‘iframe’.
Objective for this step would be finding out the index of iframe. Above “forloop” iterates all the iframes in the page and it prints ‘1’ if our required iframe was found else returns ‘0’. Here is the complete code till step 3: Execute this program and output would be like below: Output: Verify the output, you can find the series of 0’s and 1’s.
Wherever you find the ‘1’ in output that is the index of Frame by which the element is being loaded. Since the index of the iframe starts with ‘0’ if you find the 1 in the 1stplace, then the index is 0. If you find 1 in 3rd place, the index is 2.
We can comment out the for loop, once we found the index. Step 4)
Once you find the index of the element, you can switch over the frame using above command. driver.switchTo().frame(index found from the Step 3);
Step 5)
The above code will clicks the iframe or element in the iframe.
So the complete code would be like below: Output: Browser navigates to the page consisting the above iframe and clicks on the iframe.
Concept of Nested Frames(Frames inside Frames):
Let’s assume that there are two frames one inside other like shown in below image and our requirement is printing the text in the outer frame and inner frame. In the case of nested frames,
At first we must switch to the outer frame by either Index or ID of the iframe Once we switch to the outer frame we can find the total number of iframes inside the outer frame, and We can switch to the inner frame by any of the known methods.
While exiting out of the frame, we must exit out in the same order as we entered into it from the inner frame first and then outer frame.
The Html code for the above nested frame is as shown below.
The above HTML code clearly explains the iframe tag (highlighted in green) within another iframe tag, indicating presence of nested iframes. Below are the steps for switching to outer frame and printing the text on outer frames: Step 1)
Switch to the outer Frame. Prints the text on outer frame.
Once we switch to the outer frame, we should know whether any inner frame present inside the outer frame Step 2)
Finds the total number of iframes inside outer frame. If size was found ‘0’ then there is no inner frame inside the frame.
Step 3)
Switch to the inner frame Prints the text on the inner frame.
Here is the complete code: Output: The output of the above code would print the text in the Inner frame and Outer frame.
