Selenium Webdriver - Handling IFrames

---

---

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.

Let us now discuss the identification of an iframe tag and access the contents within that iframe for a web page shown in the below image. First, we would need to right click on the webpage, and then click on the Inspect button in the Chrome browser. Then, the corresponding HTML code for the whole page would be visible. For investigating a single element on a page, we would need to click on the left upward arrow, available to the top of the visible HTML code as highlighted below.

Once, we had clicked and pointed the arrow to the text Selenium- Automation Practice Form below Iframe 1, its HTML code was visible, reflecting the fact that the text appeared inside an iframe tagname (referred to as 'iframe' and enclosed in <>).

<iframe src="new-tab-sample.php" width="100%" height="150px"></iframe>

And the text appeared within the header tag (referred to as 'h1' and enclosed in <>).

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

Let us take an example of the above page, where we would fetch the text Selenium- Automation Practice Form which is within an iframe. We 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 to the iframe using the below funtion overloaded methods −

switchTo.frame("index number")

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("id")

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("webelement")

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.

Syntax

Webdriver driver = new ChromeDriver();

//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();

Example

Code Implementation on Iframe.java class file.

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();
   }
}

Maven dependencies added to pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
   http://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>

   <groupId>org.example</groupId>
   <artifactId>SeleniumJava</artifactId>
   <version>1.0-SNAPSHOT</version>

   <properties>
      <maven.compiler.source>16</maven.compiler.source>
      <maven.compiler.target>16</maven.compiler.target>
      <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
   </properties>
   
   <!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java -->
   <dependencies>
      <dependency>
         <groupId>org.seleniumhq.selenium</groupId>
         <artifactId>selenium-java</artifactId>
         <version>4.11.0</version>
      </dependency>
   </dependencies>
</project>

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.

Let us take the example of the above page, where there were 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.

Syntax

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

Example

Code Implementation on CountIframe.java class file.

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

Process finished with exit code 0

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.

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

With the above examples in this tutorial, we had illustrated handling frames and iframes using Selenium Webdriver.