_edited_edited.png)
In this article we will learn how to handle iframe in selenium and switch between the frames along with examples.
What is IFrame in Selenium Webdriver?
An IFrame is a HTML document embedded inside another HTML document. It is also known as Inline Frame.
IFrame is defined by an <iframe></iframe> tag in HTML. The iframes are commonly used in websites that include external content like advertisement, webpage or video from YouTube.
iFrames are independent of other parts of the page, and the content inside it can be reloaded without the need to load the content of the complete page.
Difference between Frames and IFrames
The frame separates a page into many pieces, each containing new content. By using the frameset tag, the frame allows a developer to split the screen either horizontally or vertically.
Iframe as <iframe> is also a tag used in HTML, but it specifies an in-line frame, which means it is used to embed not only the same domain but also other webpages within the current HTML document.
How to identify a Frames on a Page?
We can identify the frames in Selenium using methods given below:
1. Right-click on the specific element and check all the options. If you find an option like This Frame, view Frame source or Reload Frame, the page includes frames. Consider the image below as an example.
2. Similar to the first step, right-click on the page and click on View Page Source. On the page source, search for “iframe-tags”. If you find any iframe tags, it means the page includes iframes.
Ways to handle frames in selenium
We use driver.switchTo().frame() method to identify and perform actions on frames.
There are multiple ways to switch over to iframe:
By using Name/ Id
By using Index
By using WebElement
Switch to IFrame using Name/ID
The name and Id attribute are used to switch to the iframe and perform actions on it.
driver.switchTo().frame("frame1"); //Using name
driver.switchTo().frame("asdef0"); //Using IDSwitch to iframe using Index
Index is one of the attributes for frame handling in Selenium. We can switch to frame by using index value.
The count of the iframes inside the webpage can be accessed using selenium findElements.
Switch to frame using WebElement
When there is no name/Id attribute like mentioned below , we can use WebElement to switch to the particular frame.
Switching using a WebElement is the most flexible option. You can find the frame using your preferred selector and switch to it.
Switching back from frame to main page
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();
driver.switchTo().parentFrame() switches the control to the parent frame of the current frame.
driver.switchTo().defaultContent() switches the control to the main web page regardless the number of frames within a page.
Handling Single iframe in selenium
If we want to access any element inside an iframe in webdriver, we must find and switch to that iframe and access the element. Webdriver throws NoSuchElementFound Exception unless we switch to the iframe.
For example Switch to the frame1 using attribute id='singleframe'. Find the text box and entered the text.
Handling Nested IFrames in Selenium
The iFrame can be nested, which means an Iframe can hold another completely valid iFrame.
In below example, we have a three frames. There are two frames one inside the other (Iframe3 is mentioned inside the iframe 1) . We can access the content of the frame when we are inside the frame.
In 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 switch to the inner frame by any of the known methods
To click on the checkbox inside iframe3, we first need to switchto iframe1 and then to iframe3 .
Again switch back to parent frame (iframe 1) to enter the text in the textbox.
Now again switch back to main page as
driver.switchTo().defaultContent();
To access the iframe2 and select the dropdown value as needed,
The final output of the nested iframe as follows:
Handling Dynamic frames in selenium
In some web pages, frame properties such as frame id and frame name can change dynamically on a web page, but the frame position will remain the same. We can use the frame index in such a case to uniquely identify the frame based on the frame position.
In some cases, frame id value changes every time when the page is loaded, but with a static text that does not change. Consider the below code for iframes.
<iframe id = ‘frame_1234’>…</iframe>
In the above example, the text ‘frame_’ remains constant while the numeric value changes with each page load.
We can identify the above frame using the below XPath
//iframe[contains(@id,’frame’)]
Advantages of iFrame
The iFrame can load any third-party resources without any additional configurations.
The iFrame can be nested, which means you can have iFrame inside another iFrame.
The complete webpage can be embedded using the iFrame.
Conclusion
Testing any kind of iframe is possible in selenium.
In Selenium test automation, by using the SwitchTo() command, you can perform automated browser testing of websites that use pop-up windows, nested frames (or iFrames), and browser windows.
I hope you enjoyed reading this article on how to handle frames .