An iFrame is commonly known as an inline frame which is nothing but an HTML document embedded inside another HTML document. iFrames are a simpler way to embed a web page inside another web page. iFrames are mostly used to display external information on the webpage like displaying advertisements and videos from third party sources.

iFrame is basically a tag used in HTML5 like <iframe></iframe>. For example, let’s have a look at the below screenshot where the Customer Chat Service pop up has been aligned by pCloudy on a web page as a iFrame.

pCloudy

As a point to highlight, there’s a difference between iFrame and Frame in Selenium. While the iFrames are used to embed content from external sources, the frames leverage developers to split the web page vertically or horizontally with the frameset tags.

How To Identify iFrames on a Web Page?

Looking at the web page and identifying the iframes is definitely not possible. So the question is, how to identify whether an element is on an iframe or not? You just have to right click on the suspected element and check whether you are getting an option such as : ‘This Frame’, ‘View Frame Source’ or ‘Reload Frame’. After right clicking on an element, if you get an option related to frames, that simply means, the element you are trying to locate is aligned on an iframe.

pCloudy iFrames in Selenium

In the above screenshot, after right clicking on the Customer Chat pop up, we see the options to ‘view frame source’ and ‘reload frame’, hence we can be sure that the targeted element is on an iframe.

There might be a possibility that a parent web page embeds multiple iframes. In such a case, you can open the browser dev tools and checkout the required iframe by searching the keyword ‘iframe’ under ‘Elements’ tab of dev tools. With Selenium based test automation, you can also get the count of iframes on a particular web page with a below code snippet :

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

How to Switch Selenium Webdriver to Elements over iFrame?

To switch over the elements and handle the web iframes in selenium, the Selenium framework offers 3 common ways:

  • Switch To iFrame By Index : Switching to iframe using index is probably used when there are multiple iframes present on a single web page. Index of iframe starts with 0 and the index gets increasing with the number of iframes embedded. If there are 2 iframes present on a web page, you can use below code snippet to switch to iframes in Selenium :
driver.switchTo().frame(0);
driver.switchTo().frame(1);
  • Switch To iFrame By Name or ID : Name and ID attribute is the most common way of switching to iframe using Selenium. You can easily fetch either the name or ID of the iframe from the browser dev tools.
pCloudy iFrame

In the above screenshot of a pCloudy homepage, you can find an iframe with both name and id in the browser dev tool. To locate targeted element over iframe using name or id, the below code snippet can be used :

driver.switchTo().frame("iFrameID");
OR
driver.switchTo().frame("iFrameName");
  • Switch To iFrame By Web Element : Another way of switching to iframe using Selenium is to use the Web Element in the switchTo() command. Here the idea is to get the iframe element from browser dev tools and pass it to the switch method. To locate targeted element over iframe using web element, the below code snippet can be used :
WebElement iframeElement = driver.findElement(By.id("webElementID"));    
driver.switchTo().frame(iframeElement);

How to Switch the Selenium Webdriver Back to the Main Frame?

Not all elements of the web page are aligned on an iframe. As discussed earlier, iframes are majorly used to display external applications, videos or advertisements. As a part of Web test automation, you may find a scenario where all the major operations are being performed on a parent web page, but to just click on another specific element you have to switch to the targeted frame and switch back to the parent frame so that the webdriver can continue its operation on the main webpage.

To switch back the Selenium Webdriver to the main frame, Selenium offers two in-built methods :

  1. parentFrame()
  2. defaultContent()

Code snippet :

driver.switchTo().parentFrame();
driver.switchTo().defaultContent();

Switching over the iFrame when iFrame ID, Name and Web Element doesn’t work or isn’t present

The common questioned scenario : how to handle iframes in Selenium when iframe ID, Name and Web Element doesn’t work or isn’t present?

Let’s imagine that there are 100 iframes embedded on a single web page and there is no iframe id or name available. In the case of 100 iframes, suspecting the index of iframe is also a complex task. Hence, we have to adopt some strategy that could identify the iframe of the targeted element.

As a resolution to the above scenario, it is important to fetch out the index of the iframe on which the targeted element is being loaded and then we can switch to the iframe using it’s index. Let’s have a look at the below script and code walkthrough to automate such scenarios.

public class SeleniumIframe {
public static void main(String[] args) {
 
        WebDriver driver = new ChromeDriver();
    driver.get("URL"); 
    driver.manage().window().maximize();

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

    for(int i=0; i<=iFrameSize; i++){
  driver.switchTo().frame(i);
  int elementSize = driver.findElements(By.xpath("html/body/a/advertVideo")).size();
  System.out.println(elementSize);
    driver.switchTo().defaultContent();
  }
  }
}

Code Walk through :

Since there are multiple iframes embedded on a single web page, we have used a tagName Selenium locator to get the total number of iframes present. Once we are aware of the actual iframe count, we have started a loop till the size of the iframe. And in a running loop, we are switching to each iframe present on the web page and fetching the size of the targeted element. Whenever the loop gets executed for the correct iframe, we would get the element size as 1 else size of the web element would remain 0.

This way, we could extract the index of the iframe. Once we get the exact index of the iframe, we can then comment the loop to avoid running against every iframe embedded on the web page.

Handling Nested iFrames in Selenium Test Automation

Let’s assume that the targeted element is on an iframe aligned on another iframe, this kind of structure is known as nested iframes.

iFrames in Selenium

Looking at the above image, there are two frames, one iframe inside another iframe. The targeted element is aligned under iframe 2. This means, in selenium test automation, we first have to interact with the iframe1, then with the iframe 2 to perform operation on the targeted web element. Below is the HTML structure of nested iframe where the second iframe tag is embedded in the first iframe tag.

<div class="iframe">
<div style="overclow:auto;">
  <div id="iframewrapper" class="iframewrapper">
<iframe id="iframeResult" frameborder="0">
<html>
  <head>
  <body>
<iframe width="200" height="200" src="demo_iframe.htm">
</body>
</head>
</html>

In the test automation scenario of nested iframes, the mandate steps that needs to be followed are:

  • Firstly, we need to switch to the outer frame, either by name, ID or index
  • After switching to the outer iframe, we can fetch the count of inner iframes in selenium
  • We can then switch to the inner frame with any of the available type i.e ID, name or index
  • Lastly, we can interact with the targeted element.

Conclusion

Understanding how iframes work will help in accurately targeting the right web elements we want to test using Selenium automation. We have discussed various ways by which we can use iframes in the selenium test automation. We have also added an additional resource you can download from the link below.

iFrames in Selenium