How to handle iframe in Selenium Webdriver

Reading Time: 4 minutes

What is iframe ?

An iframe is also known as the inline frame. It is a tag used in HTML5 to embed an HTML document within a parent HTML document. An iframe tag is defined using <iframe></iframe> tags. An iFrame is an inline frame used inside a webpage to load another HTML document inside it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser.

You can see iframes commonly used on websites that need to include external content like a Google map , an advertisement displayed on a web page or a video from YouTube.

Iframe support browsers :

How to Identify a Frame or iframe on a Page

There are two ways to identify iframe on web page :

1. Right-click on the web page and click on View Page Source and search for “iframe-tags”. If find any iframe tags, it means the web page includes iframes.
2. 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, it means the web page includes frames. The below image as an example of iframe present or not on webpage.

There are three ways to switch over the elements and handle frames in selenium

we need to use the SwitchTo().frame method. This method enables the browser to switch between multiple frames. This method throws NoSuchFrameException when the frame is not found on the current web page. We can handle in 3 ways:

• Index.
• Name or Id.
• Web Element.

We can even identify total number of iframes present on the webpage by using below line of code.

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

By Index :

Index is one of the attributes for frame handling in Selenium through which we can switch to it.Suppose if there are 50 frames in page, we can switch to frame in Selenium by using index. Index of the iframe starts with ‘0’ value.We can switch to particular iframe using index value.

Example :

• driver.switchTo().frame(0);
• driver.switchTo().frame(1);

public static void main(String[] args) throws InterruptedException{
WebDriver driver = new ChromeDriver(); 
driver.get("/URL having iframes/");   
driver.switchTo().frame(0);  //Switch by Index 
driver.quit();
 }

By Name or id :

A name and Id attribute is always link with the iframe tag in the below image represents a page source of a sample web page containing iframes. The iframe tag have id and name.This method allows users to switch to a particular frame using the developer-defined name of the frame using id or name.

Example :

• driver.switchTo().frame(“name of the element”);
• driver.switchTo().frame(“id of the element”);

To switch between an iframe  using the name attribute we pass iframe properties name in the method.In the below code you can see “iframeResult” is the name of iframe tag and passed in the switchTo() method .

WebDriver driver = new ChromeDriver();
driver.get("URL”/"); 
driver.switchTo().frame("iframeResult"); //BY frame name
driver.quit();

To switch between an iframe  using the id attribute we pass iframe properties id in the method.In the below code you can see “iframeResult” is the id of iframe tag and passed in the switchTo() method .

WebDriver driver = new ChromeDriver();
driver.get("URL”/"); 
driver.switchTo().frame("iframeResult");// Switch By ID 
driver.quit();

By Web Element :

Another way to switch between frames in selenium is to pass the WebElement to the switchTo(). Here the primary step is to find the iframe element and then pass it to the switch method.

Example:

WebElement frameElement = driver.findElement(By.id(“iframeResult”));

driver.switchTo.frame(frameElement);

WebDriver driver = new ChromeDriver();
driver.get("URL”); URL OF WEBPAGE HAVING FRAMES
WebElement iframeElement = driver.findElement(By.id("iframeResult")); //BY frame Xpath.
driver.switchTo().frame(iframeElement);
driver.quit();

How to switch back one frame to parent page:

• Switching back and forth between iframes and parent page can be achieved using driver.switchTo().defaultContent() method.There is a similar method in Selenium to switch between frames named driver.switchTo().parentFrame () method.
• The difference between driver.switchTo().defaultContent() and driver.switchTo().parentFrame() is that the first method switches the control to the main web page regardless of the number of frames within the web page, while the second method switches the control to the parent frame of the current frame.

Example:

Suppose there are 3 frames named i1,i2 and i3 within the parent web page P1. Frames i1, i2, and i3 are dependant on each other which means one frame will be the parent of another.

While using driver.switchTo().defaultContent() method on frame i3, web driver control moves to the parent page P1. While driver.switchTo().parentFrame() method on frame i3 switches the control back to frame i2 and so on.

How to handle dynamic frame in selenium :

• In some cases frame properties such as frame id and name can change dynamically on a web page, however, the frame position will remain the same. In such a case, we can’t rely on the frame id or name to uniquely identify a frame.
• 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.In the below code you can see.

<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 uniquely using the below XPath.

//iframe[contains(@id,’frame)].

Reference

https://www.browserstack.com/guide/handling-frames-in-selenium

Other Blog