Selenium WebDriver - Handling IFrames

Quiz

Selenium Webdriver can be used to handle iframes on a webpage. The iframes (as referred to as inline frames) are basically an html tag incorporated in HTML 5. An iframe tag is used to include an HTML document within another HTML document.

There is a fine difference between frame and iframe tags in HTML. A frame tag can divide a webpage in a vertical and horizontal direction, while an iframe tag is used to incorporate an HTML document within another. However, the concept of frame is no longer used from HTML 5 version onwards.

Identification of IFrames on a Web Page

Open the Chrome browser, right click on the webpage, and click on the Inspect button. Then, the complete HTML code for the entire page is accessible now. For investigating an iframe on a page, click on the left upward arrow, available to the top of the visible HTML as shown below.

Once we had clicked and pointed the arrow to Selenium - Automation Practice Form below Iframe 1, its HTML code was visible, displaying the fact that the text Selenium- Automation Practice Form is inside an iframe tagname.

And text Selenium- Automation Practice Form appeared within the header tag(referred to as h1 and enclosed in <>).

<h1>Selenium - Automation Practice Form</h1>

In the above page, we would fetch the text Selenium - Automation Practice Form which is within an iframe. We had observed that text appeared inside the first iframe on the page, hence its index would be 0.

In order to access the web elements that are inside an iframe tag in html, the webdriver should be able to first locate all the iframes inside a page, and then locate the items inside them. To achieve the above purpose, we have to switch the driver context from the main browser to the iframe inside.

Basic Methods to Handle IFrames in Selenium

The basic overloaded methods to handle iframes are listed below −

switchTo.frame(args)

The iframe index number is put as an argument to the method. The starting index of the iframe is 0. The driver switches to the iframe number passed to the method.

Syntax

driver.switchTo.frame(0), switching to the first iframe.

switchTo.frame(args)

The iframe id or name is put as an argument to the method. The driver switches to the iframe id or name passed to the method.

Syntax

driver.switchTo.frame(id), switching to the 
   iframe having id or name value as id.

switchTo.frame("args")

The iframe webelement is put as an argument to the method. The driver switches to the iframe webelement passed to the method.

Syntax

driver.switchTo.frame("id"), switching to the 
   iframe having webelement value as id.

driver.switchTo.defaultContent()

To switch driver context from the iframe to the main web page.

Example 1

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class Iframe {
   public static void main(String[] args) throws InterruptedException {
   
      //Initiate the Webdriver
      WebDriver driver = new ChromeDriver();
      
      //adding implicit wait of 12 secs
      driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);
      
      //Opening the webpage where we will access iframes
      driver.get("https://www.tutorialspoint.com/selenium/practice/frames.php");
      
      //switch to an iframe with first iframe index
      driver.switchTo().frame(0) ;
      
      // identify the text inside the iframe and retrieve with getText() 
      String text = driver.findElement(By.tagName("h1")).getText() ;
      System.out.println(" Text is: " + text);
      
      //switch back the driver out of the iframe to the main page
      driver.switchTo().defaultContent();
      
      //quitting the browser
      driver.quit();
   }
}

Output

Text is: Selenium - Automation Practice Form

Process finished with exit code 0

In the above example,we had identified the iframe tag available on the web page, and switched the driver context from the main page to that iframe. Once that has been achieved, we have accessed the text available within that iframe with the message in the console as - Text is: Selenium - Automation Practice Form.

Finally, the message Process finished with exit code 0 was received, signifying successful execution of the code.

Thus we were able to identify an iframe within a web page. Along with that we had implemented how to switch the context of the driver from the main page to the iframe with the help of the switchTo method available with Selenium webdriver.

Example 2

Let us take the example of the page below, where there are two iframes. We would be able to count total numbers of iframes on a web page, by identifying elements having tagname as iframe and using it with the findElements(By.tagname()) method. This would return a list of iframes on a page. Finally, the size of the list would help us to count the total number of iframes.

Code Implementation

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.List;
import java.util.concurrent.TimeUnit;

public class CountIframe {
   public static void main(String[] args) throws InterruptedException {

      //Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      //adding implicit wait of 12 secs
      driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);

      //Opening the webpage where we will access iframes
      driver.get("https://www.tutorialspoint.com/selenium/practice/frames.php");

      // count total iframes
      List<WebElement> f = driver.findElements(By.tagName("iframe"));
      int total = f.size();
      System.out.println("Total iframes: " + total);

      //quitting the browser
      driver.quit();
   }
}

Output

Total iframes: 2

In the above example, we had counted the total number of iframes on the page with the message in the console as - Total iframes: 2.

Conclusion

This concludes our comprehensive take on the tutorial on Selenium Webdriver Handling IFrames. Weve started with describing identification of iframes on a web page, basic methods to handle iframes in Selenium, and walked through examples on how to handle iframes with Selenium Webdriver. This equips you with in-depth knowledge of the Selenium Webdriver Handling IFrames. It is wise to keep practicing what youve learned and exploring others relevant to Selenium to deepen your understanding and expand your horizons.

Print Page