Handling iFrames Using Selenium WebDriver: In our previous post, we have shared so many important topics about Selenium WebDriver for Experience and Freshers Testers. But in this post, we are going to discuss one more important question, which is Frame. So before going more in-depth, let’s understand what a frame is? This is nothing but an HTML tag by which we can embed an external webpage on our web page.
Must read: Complete Selenium Tutorial
How to Find A Frame Inside a Web Page?
Make web page looks more user-friendly and improve the user experience now most of the web pages are implementing the Frame feature on their website. So far, we are going to discuss how we can identify that an element is present inside the frame or not. There are few tips to find the frame, here are below:
- Open the website in a browser and right-click on the element, and if you found an option “This Frame,” then that means the element inside the frame.
- We can also find the frame by right click on the web page and choose view page source after that, then you will get the page source of that web page, and in that, if you find any <iframe> tag, then that means in that page frame used.
Handling Iframe Using Selenium WebDriver
To deal with these, iframe Selenium WebDriver provides multiple methods. We need to choose those different ways to handle those iframes, depending on the needs. For handle those frames you can use the below methods
- 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 driver will switch to that frame
Before using these three methods, you have to know the below things like:
- What is the frame index?
- How to find out the total numbers of frames on the web page?
How to 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 by 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
By using the above program, we can able to find the total number of frames are used on the page. and with the use of the number, we can switch the frames. the index always starts from the 0; that means 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 executed the webdriver send all option to that frame and also the webdriver focus moves to the selected frame. In that case, if you have any operation, then you will get an element not found an exception. and 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, like Name attribute, we can use the ID attribute to locate a frame and switch the driver to a specified frame. For this switch, you need to 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
Till now, we have looked at how to switch to a frame using index, name, and ID. But now we are going to learn how we can 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 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 type of scenario, you have to switch from the parent frame to that frame, which has a nested frame. After that, we need to again change to the nested frames 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 you want to switch to the parent frame, then you can do that by using the below code
driver.switchTo().parentFrame();
And sometimes you want to switch to the parent page of a frame. Because after performing all the operation, 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();
Leave a Reply