Handling iFrames Using Selenium WebDriver & Example? 2024

What We Are Learn:

Handling iFrames Using Selenium WebDriver: In our previous post, we shared many important topics about Selenium WebDriver for experienced and Freshers Testers. But in this post, we will discuss one more important question: Frame. So, before going into more depth, let’s understand a frame. This is an HTML tag by which we can embed an external webpage on our web page.

How do you find a frame inside a web page?

Make web pages look more user-friendly and improve the user experience. Now, most web pages are implementing the Frame feature on their website. So far, we will discuss how we can identify whether an element is present inside the frame. There are a few tips to find the frame below:

Open the website in a browser and right-click on the element. If you find the option “This Frame,” that means the element is inside the frame.
We can also find the frame by right-clicking on the web page and choosing view page source; after that, you will get the page source of that web page, and in that, if you find any <iframe> tag, that means in that page frame used.

Handling Iframe Using Selenium WebDriver

To deal with these, iframe Selenium WebDriver provides multiple methods. Depending on the needs, we need to choose different ways to handle those iframes. To handle those frames, you can use the methods below

switchTo.frame(int frame number): Pass the frame index, then webdriver will automatically switch to that specified index frame.
switchTo.frame(string frameNameOrId): Pass the name or ID of that frame to change into that frame
switchTo.frame(WebElement frameElement): pass the web element, and the driver will switch to that frame

Before using these three methods, you have to know the following things:

What is the frame index?
How to find out the total number of frames on the web page?

How do you find the total number of iFrames on a webpage?

We can get the total number of frames available on the web page by using JavaScript, or the other way is by using the iframe tag. Let’s understand how we can calculate the frame using a simple program.

WebDriver driver = new FirefoxDriver();
driver.get("http://toolsqa.com/iframe-practice-page/");

//By executing a java script
JavascriptExecutor exe = (JavascriptExecutor) driver;
Integer numberOfFrames = Integer.parseInt(exe.executeScript("return window.length").toString());
System.out.println("Number of iframes on the page are " + numberOfFrames);

//By finding all the web elements using iframe tag
List<WebElement> iframeElements = driver.findElements(By.tagName("iframe"));
System.out.println("The total number of iframes are " + iframeElements.size());

Switch to Frames by Using Index

We can find the total number of frames used on the page using the above program. and with the use of the number, we can switch the frames. the index always starts from 0; when we mention the index as 0, it will select the first frame, and similarly, 1 means the second frame of the page. So the code snippet will look like below:

driver.switchTo().frame(0);

Once this statement is executed, the webdriver sends all options to that frame, and the webdriver focus moves to the selected frame. In that case, if you have any operation, you will get an element not found as an exception. If you have passed an index and on that index value, there is no frame, then you will also get a NoSuchFrameException exception.

public static void main(String[] args) throws InterruptedException
{
WebDriver driver = new FirefoxDriver();
driver.get("http://toolsqa.com/iframe-practice-page/");

//Switch by Index
driver.switchTo().frame(0);
driver.quit();
}

Switch to Frames by Using Name

If you see the dev console, sometimes, you find the iframe tag is associated with a name attribute, and by using that, we can switch the driver focus to a specified frame. you can discover how we can change by following the below code:

WebDriver driver = new FirefoxDriver();
driver.get("http://toolsqa.com/iframe-practice-page/");

//Switch by frame name
driver.switchTo().frame("iframe1");
driver.quit();

Switch to iFrames by Using ID

Similarly to the Name attribute, we can use the ID attribute to locate a frame and switch the driver to a specified frame. For this switch, you must pass the ID in the frame method. You can get the example program below:

WebDriver driver = new FirefoxDriver();
driver.get("http://toolsqa.com/iframe-practice-page/");

//Switch by frame ID
driver.switchTo().frame("IF1");
driver.quit();

Switch to iFrames by WebElement

We have looked at how to switch to a frame using index, name, and ID. But now we will learn how to change to a frame with the help of using a web element. So, to do this, first, we have to find the frame using any of the locator strategies, and then we need to pass that element in the switchTo command. Below, you can get the example:

WebDriver driver = new FirefoxDriver();
driver.get("http://toolsqa.com/iframe-practice-page/");
//First find the element using any of locator strategy
WebElement iframeElement = driver.findElement(By.id("IF1"));

//Now use the switch command
driver.switchTo().frame(iframeElement);
driver.quit();

Concept of Nested iFrames

In some web applications, you can find that some frames are placed inside a frame. To handle such a scenario, you have to switch from the parent frame to that frame, which has a nested frame. After that, we need to change to the nested frames again by using any of the ways like index, name, id, or web element.

public class FramesInsideFrames {
public static void main(String[] args) {
WebDriver driver=new FirefoxDriver();
driver.get("Url");
driver.manage().window().maximize();
driver.manage().timeouts().implicitlyWait(2, TimeUnit.SECONDS);

int size = driver.findElements(By.tagName("iframe")).size();
System.out.println("Total Frames --" + size);

// prints the total number of frames
driver.switchTo().frame(0); // Switching the Outer Frame
System.out.println (driver.findElement(By.xpath("xpath of the outer element ")).getText());

//Printing the text in outer frame
size = driver.findElements(By.tagName("iframe")).size();
// prints the total number of frames inside outer frame

System.out.println("Total Frames --" + size);
driver.switchTo().frame(0); // Switching to innerframe
System.out.println(driver.findElement(By.xpath("xpath of the inner element ")).getText());

//Printing the text in inner frame
driver.switchTo().defaultContent();
}
}

SwitchTo The Parent frame

If you are in a child frame and want to switch to the parent frame, you can do that by using the code below.

driver.switchTo().parentFrame();

And sometimes, you want to switch to the parent page of a frame. After performing all the operations, you want to switch back to the parent page, and for that, you have to use the defaultContent() method, which passes the driver object from frame to webdriver.

WebDriver driver = new FirefoxDriver();
driver.get("http://toolsqa.com/iframe-practice-page/");
//First find the element using any of locator stratedgy
WebElement iframeElement = driver.findElement(By.id("IF1"));

//now use the switch command
driver.switchTo().frame(0);

//Do all the required tasks in the frame 0
//Switch back to the main window
driver.switchTo().defaultContent();
driver.quit();

Handling iFrames Using Selenium WebDriver