IFrames

An IFrame is a web page which is embedded in another web page. The IFrame is primarily used for inserting content from another source, such as an advertisement, into a Web page. A Web designer can change an IFrame’s content without making them reload the complete website. A website can have multiple frames on a single page. And a frame can also have inner frames (Frame inside a Frame). The IFrame is defined by the tag

<html>
  <body>
    <div class="Test">
      <iframe name="iframe1" id="IFRAME1" height="800" width="200" src="http://hugelearning.com"></iframe>
    </div>
   </body>
</html>

Here, we have created one IFrame test page like: IFrame Test page
In this tutorial we will discuss below points:

  • How to verify IFrames on a webpage
  • How to switch on a particular IFrame
  • How to handle IFrames inside IFrames(Nested IFrames)

1. How to verify IFrames on a webpage
We can identify the IFrames using multiple ways such as:

  • Right click on the web element, If we find the options like ‘View frame source’ or ‘Reload frame’ then it represents that it is an IFrame.
  • Right click on the page and click ‘View Page Source’ and Search with the ‘IFrame’ tags, if you can find any tag name with the ‘IFrame’ then it means our page consist the IFrame(s).

We can also get the size or number of IFrames on the page using below code.

int noOfIFrames = driver.findElements(By.tagName("iframe")).size();

2. How to switch on a particular IFrame
We have different ways to handle or switch on the IFrames. Below are three ways:

  • By using Index
  • By using Name or Id
  • By using Web Element

1. By using Index
An index is one of the attributes for the Iframe through which we can switch to it. Index of the iframes starts with ‘0’. For example, if we have 20 frames in a webpage, we can switch to the frame by using an index.

driver.switchTo().frame(0);
driver.switchTo().frame(5);

Note: If the frame is not found then it throws NoSuchFrameException.

2. By using Name or Id
Name and ID are attributes of the IFrame through which we can switch to it.

driver.switchTo().frame(“iframe1”); // Using name
driver.switchTo().frame(“id of the element”); // Using ID

3. By using Web Element:

We can even switch to the IFrame using the Web element.
driver.switchTo().frame(WebElement);

Switch back to the Main Frame
During multi iframes environment we can come back to the parent frame, we can either use driver.switchTo().parentFrame() or if you want to get back to the main (or most parent) frame, we can use driver.switchTo().defaultContent().

3. Nested Frames(Frames inside Frames):
Nested Frames means we have IFrame(s) inside the IFrame and we need to perform an action like 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 or web element 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. Also while exiting out of the IFrames, we must exit out in the same order as we entered into it from the inner IFrame first and then outer IFrame.