• iFrames / Frames in Selenium

What is Frame ?

Frame/iFrame is nothing but another webelement in the HTML page, which displays another part of the webpage.

If you take a look at the DOM structure of a page that contains an iframe, you will never find the inner content of the iframe. And you won't be able to interact with it via the DOM. We have to switch into the frame to see the elements present in the frame.

Below frame page is present at https://chercher.tech/practice/frames
frames-example-selenium-webdriver

Difference between Frames and iFrames

Both Frame and iFrame are treated similar manner with Selenium; Selenium does not differentiate them so that we can handle both of them in the same way.

A Frame is an HTML tag and used to divide the same web page or same domain into various frames/windows. Used as <frame> tag, it specifies each frame within a frameset tag. Frames are used along with frameset; frameset contains the multiple frames.

<frameset rows = "10%,80%,10%">
	<frame id= "first" name = "top" src = "/html/top_frame.htm" />
	<frame name = "main" src = "/html/main_frame.htm" />
	<frame name = "side" src = "/html/side_frame.htm" />
</frameset>


Iframe as <iframe> is also a tag used in HTML, but it specifies an in-line frame, which means it is used to embed not only the same domain but also other webpages within the current HTML document. It is like a Television; it displays a thing which is present somewhere else.

<iframe id="ifr" name="demo" src="demo.html" height="200" width="300"></iframe>
  • Frame requires a frameset, but iframes do not requires framesets.
  • Placement of Frames is a bit difficult compared with iFrames
  • Adjusting the size and width of the Frame is difficult when compared with iFrame.
  • Frames cannot contain nested frames (frame inside the frame), but iFrames can contain nested iFrames.
  • HTML5 doesn't support Frames but supports iFrames.

Developers try to avoid using Iframes as these are external documents (webpages), so there is a chance of Phishing.

Presence of Frame in Webdriver

It is essential for the tester to check whether an element is inside an iframe/frame or just on the webpage. If the element is inside a frame, then we have to switch into the frame to access the element.

1. Right-click on the page (not on the element) which part you want to check.

2. On the right-click options, you can find This Frame Option; if this option is present then there is an iframe else there is no iframe

frame-selenium-webdriver

3. Webpage without a frame.

noframe-selenium-webdriver

How to find iframe/frame in Selenium

We can find the iframe/frame using right-click in manual testing, finding the iframe/frame in selenium is little tricky one.

Below are the ways to find the iframe/frame:

  • Using ID
  • Using Name
  • Using Element (widely used)
  • Using Index

Using ID and Name are looks similar in syntax as these two are overloaded methods, find the examples below.

Using ID :
We can find the frame using Id attribute present in the iframe/frame

<iframe id="ifr" name="demo" src="demo.html" height="200" width="300"></iframe>
// switchong to a rame which has id as 'ifr'
driver.switchTo().frame("ifr")


Using Name :
We can find the frame using name attribute present in the iframe/frame

<iframe id="ifr" name="demo" src="demo.html" height="200" width="300"></iframe>
// switching to a frame which has name='demo'
driver.switchTo().frame(arg0)


Using Element : Most of the time, there will be multiple iframe/frame, and few of them may share the same id and name, so in such scenarios; we cannot use id or name for finding the frame. To find the iframe/frame uniquely, we have to find it as an element, the way we follow for normal elements.

Here we can use locators ( except id, name, as we used already) like classname, XPath, CSS. We cannot use link text and partial link text as these two are only applicable for anchor tag <a>.

We also should refrain using a tagname locator as there are multiple frames, so we may not get the unique element.

Let's consider the below iframes, and xpath for this iframe would be :
Xpath for 1st iFrame : //iframe[@src='demo.html']
Xpath for 2nd iFrame : //iframe[@class='second']

<iframe id="ifr" name="demo" src="demo.html" height="200" width="300"></iframe>
<iframe id="ifr" name="demo" class='second' src="width.html" height="200" width="300"></iframe>
<iframe id="ifr" name="demo" src="width.html" height="200" width="300"></iframe>
// switch to 1st frame
driver.switchTo().frame("//iframe[@src='demo.html']")


Using Index : Selenium assigns an index to every frame present in the page, using index is the least preferred way to find the frame because in future frame position may change when development introduce another frame in between

<iframe id="ifr" name="demo" src="demo.html" height="200" width="300"></iframe>
<iframe id="ifr" name="demo" class='second' src="width.html" height="200" width="300"></iframe>
<iframe id="ifr" name="demo" src="width.html" height="200" width="300"></iframe>
// switch to 1st frame
driver.switchTo().frame(1)

Handle single iFrame in selenium

If we want to access any element inside an iframe in webdriver, we must find and switch to that iframe and access the element. Webdriver throws NoSuchElementFound Exception unless we switch to the iframe.
single-frame-example-selenium-webdriver

Scenario : Fetch the value from the Topic (page level) and write it to topic text bar present in iframe 1

Page Url : https://chercher.tech/practice/frames
single-frame-source-selenium-webdriver

Steps to solve the scenario : 1. Open the browser and navigate to : https://chercher.tech/practice/frames

// set the geckodriver.exe property
System.setProperty("webdriver.gecko.driver", "C:/PATH/geckodriver.exe");
// open firefox
WebDriver driver = new FirefoxDriver();
driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
// open webpage
driver.get("https://chercher.tech/practice/frames");


2. Get the text from the Topic element and store it in a string.

// store the text value
String textValue = driver.findElement(By.xpath("//label/span")).getText();


3. Switch to the Frame1; the frame has attribute id='frame1' and which is unique so we can use id way switching to the frame.

// switch to frame1
driver.switchTo().frame("frame1");


4. Find the Text bar in the frame1 and enter the stored text.

// set the value of the textbar to the value stored
driver.findElement(By.xpath("//input[@type='text']")).sendKeys(textValue);


The Complete program for single frame handling

public class FramesInWebdriver {
	public static void main(String[] args) throws Exception {
		// set the geckodriver.exe property
		System.setProperty("webdriver.gecko.driver", "C:/PATH/geckodriver.exe");
		// open firefox
		WebDriver driver = new FirefoxDriver();
		driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
		// open webpage
		driver.get("https://chercher.tech/practice/frames");
		// store the text value
		String textValue = driver.findElement(By.xpath("//label/span")).getText();
		// switch to frame1
		driver.switchTo().frame("frame1");
		// set the value of the textbar to the value stored
		driver.findElement(By.xpath("//input[@type='text']")).sendKeys(textValue);
  }
}

Handling nested iFrame in selenium

Sometimes we will have multiple and nested iframes on a webpage if we have nested iframes, we have to switch to iframe inside the frame.

We can access only the content of the frame when we are inside a frame; we cannot access outside the frame or inside any other frame.

Scenario : Check the checkbox present in the iframe 3, iframe 3 is present inside iframe 1.

Page Url : https://chercher.tech/practice/frames
nested-frame-selenium-webdriver

The solution to the scenario : Ignoring routine steps (open browser, page, wait)
1. Find the iframe1 and store it as webelement.

//find the frame1 and store it in webelement
WebElement frame1 = driver.findElement(By.id("frame1"));


2. Switch to iframe 1 using switchTo().frame() command

// switch to iframe1
driver.switchTo().frame(frame1);


3. Find the iframe 3 and switch to it.

// find the frame 3
WebElement frame3 = driver.findElement(By.xpath("//iframe[@id='frame3']"));
// switch to frame 3
driver.switchTo().frame(frame3);


4. Find the Checkbox and click it if it is not already checked.

// find the checkbox
WebElement checkbox = driver.findElement(By.xpath("//input[@type='checkbox']"));
// if checkbox is not selected then  click  the checkbox
if(! checkbox.isSelected()){
	checkbox.click();
}


The Complete program to handle nested text bar.

public class NestedFrame {
	public static void main(String[] args) throws Exception {
		// set the geckodriver.exe property
		System.setProperty("webdriver.gecko.driver", "C:/PATH/geckodriver.exe");
		// open firefox
		WebDriver driver = new FirefoxDriver();
		driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
		// open webpage
		driver.get("https://chercher.tech/practice/frames");
		//find the frame1 and store it in webelement
		WebElement frame1 = driver.findElement(By.id("frame1"));
		// switch to frame1
		driver.switchTo().frame(frame1);
		// find the frame 3
		WebElement frame3 = driver.findElement(By.xpath("//iframe[@id='frame3']"));
		// switch to frame 3
		driver.switchTo().frame(frame3);
		// find the checkbox
		WebElement checkbox = driver.findElement(By.xpath("//input[@type='checkbox']"));
		// if checkbox is not selected then click the checkbox
		if(! checkbox.isSelected()){
			checkbox.click();
		}
	}
}

Switch to Parent Frame : switchTo().parentFrame() method in selenium switches the control to outer position(one place) in the web page, the outer position could be a frame or page level.

In simple terms, the parentFrame() method exits the current frame.

After performing a particular task, we have moved out of the frame; otherwise, we cannot access the elements outside the frame.

Selenium provides driver.switchTo().parentFrame() method to move out of the current frame, once we move out of the frame, we can access the elements outside that frame, but we cannot access the elements inside that frame

Scenario :

  • 1. Check the checkbox present in the iframe 3; iframe 3 is present inside iframe 1
  • 2. After checking the checkbox, move back to iframe 1 and enter "selenium" text in the topic text bar
  • 3. Now move back to page level and compare the topic(header) text is not equal to "selenium webdriver"

Page Url : https://chercher.tech/practice/frames
parent-frame-exampe-selenium-webdriver

The solution to the Scenario : skipping a few steps that were covered in the previous scenario.

1. Switch to iframe 1 and switch to iframe 3, check the checkbox

2. Now we have to navigate back to frame 1 by using driver.switchTo().parentFrame() method

// navigate to parent frame, which is iframe 1
driver.switchTo().parentFrame();


3. Find the text bar and enter the "selenium" text" in it.

// set the value of the textbar to the value stored
driver.findElement(By.xpath("//input[@type='text']")).sendKeys("selenium");


4. Now we have to navigate back to page by using driver.switchTo().parentFrame() method

// navigate to parent, which is page
driver.switchTo().parentFrame();


5. Find the topic header element and fetch the text.

// store the text value
String textValue = driver.findElement(By.xpath("//label/span")).getText();


6. Compare the topic text with expected value "selenium webdriver"

if(textValue.equals("selenium webdriver")){
	System.out.println("Topic value is equal to 'selenium webdriver'");
}


The complete program to use the parent frame method

public class ParentFrame {
	public static void main(String[] args) throws Exception {
		// set the geckodriver.exe property
		System.setProperty("webdriver.gecko.driver", "C:/PATH/geckodriver.exe");
		// open firefox
		WebDriver driver = new FirefoxDriver();
		driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
		// open webpage
		driver.get("https://chercher.tech/practice/frames");
		//find the frame1 and store it in webelement
		WebElement frame1 = driver.findElement(By.id("frame1"));
		// switch to frame1
		driver.switchTo().frame(frame1);
		// find the frame 3
		WebElement frame3 = driver.findElement(By.xpath("//iframe[@id='frame3']"));
		// switch to frame 3
		driver.switchTo().frame(frame3);
		// find the checkbox
		WebElement checkbox = driver.findElement(By.xpath("//input[@type='checkbox']"));
		// if checkbox is not selected then click the checkbox
		if(! checkbox.isSelected()){
			checkbox.click();
		}
		// navigate to parent frame, which is frame 1
		driver.switchTo().parentFrame();
		// set the value of the textbar to the value stored
		driver.findElement(By.xpath("//input[@type='text']")).sendKeys("selenium");
		// navigate to parent, which is page
		driver.switchTo().parentFrame();
		// store the text value
		String textValue = driver.findElement(By.xpath("//label/span")).getText();
		//verify the value matches or not
		if(textValue.equals("selenium webdriver")){
			System.out.println("Topic value is equal to 'selenium webdriver'");
		}
	}
}

Default Content

Default Content : switchTo().defaultContent() method exits all the iframes and the places the selenium control at the page level where as parentFrame() method exits the current iframe.

Once we reach the page level, we cannot access any elements inside the iframe unless we switch to it.
frames-example-selenium-webdriver

Scenario : Check the checkbox(frame 3), and select the 'Avatar' option from the Animals dropdown(frame 2).

Page Url : https://chercher.tech/practice/frames
default-content-frames-selenium-webdriver

The solution to the scenario :
1. Switch to frame 1 and switch to frame 3
2. Check the checkbox
3. Now exit from all the frames using switchTo().defaultContent()

// navigate to page level
driver.switchTo().defaultContent();


4. Switch to iframe 2

//switch to frame2
driver.switchTo().frame("frame2");


5. Find the Animals dropdown and store it in the WebElement type variable.

//find the dropdown
WebElement dropdown = driver.findElement(By.tagName("select"));


6. Create object for select class, and call selectByVisibleText() method from the Select Class object.

//Create object for select class
Select sel = new Select(dropdown);
//select the 'avatar' option
sel.selectByVisibleText("Avatar");


The complete program for default content in selenium

public class DefaultContent {
	public static void main(String[] args) throws Exception {
		// set the geckodriver.exe property
		System.setProperty("webdriver.gecko.driver", "C:/PATH/geckodriver.exe");
		// open firefox
		WebDriver driver = new FirefoxDriver();
		driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
		// open webpage
		driver.get("https://chercher.tech/practice/frames");
		//find the frame1 and store it in webelement
		WebElement frame1 = driver.findElement(By.id("frame1"));
		// switch to frame1
		driver.switchTo().frame(frame1);
		// find the frame 3
		WebElement frame3 = driver.findElement(By.xpath("//iframe[@id='frame3']"));
		// switch to frame 3
		driver.switchTo().frame(frame3);
		// find the checkbox
		WebElement checkbox = driver.findElement(By.xpath("//input[@type='checkbox']"));
		// if checkbox is not selected then click the checkbox
		if(! checkbox.isSelected()){
			checkbox.click();
		}
		// navigate to page level
		driver.switchTo().defaultContent();
		//switch to frame2
		driver.switchTo().frame("frame2");
		//find the dropdown
		WebElement dropdown = driver.findElement(By.tagName("select"));
		//Create object for select class
		Select sel = new Select(dropdown);
		//select the 'avatar' option
		sel.selectByVisibleText("Avatar");
	}
}

We can write the above program in the switch to parent Frame way as well

public class PageLevelParent {
	public static void main(String[] args) throws Exception {
		// set the geckodriver.exe property
		System.setProperty("webdriver.gecko.driver", "C:/PATH/geckodriver.exe");
		// open firefox
		WebDriver driver = new FirefoxDriver();
		driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
		// open webpage
		driver.get("https://chercher.tech/practice/frames");
		//find the frame1 and store it in webelement
		WebElement frame1 = driver.findElement(By.id("frame1"));
		// switch to frame1
		driver.switchTo().frame(frame1);
		// find the frame 3
		WebElement frame3 = driver.findElement(By.xpath("//iframe[@id='frame3']"));
		// switch to frame 3
		driver.switchTo().frame(frame3);
		// find the checkbox
		WebElement checkbox = driver.findElement(By.xpath("//input[@type='checkbox']"));
		// if checkbox is not selected then click the checkbox
		if(! checkbox.isSelected()){
			checkbox.click();
		}
		// navigate to parent frame, which is frame 1
		driver.switchTo().parentFrame();
		// set the value of the textbar to the value stored
		driver.findElement(By.xpath("//input[@type='text']")).sendKeys("selenium");
		// navigate to parent, which is page
		driver.switchTo().parentFrame();
		// store the text value
		String textValue = driver.findElement(By.xpath("//label/span")).getText();
		if(textValue.equals("selenium webdriver")){
			System.out.println("Topic value is equal to 'selenium webdriver'");
		}
		//switch to frame2
		driver.switchTo().frame("frame2");
		//find the dropdown
		WebElement dropdown = driver.findElement(By.tagName("select"));
		//Create object for select class
		Select sel = new Select(dropdown);
		//select the 'avatar' option
		sel.selectByVisibleText("Avatar");
	}
}

Possible Routes of iFrame Navigation

The below image explains the possible routes of the iFrame navigation.

possible-routes-selenium-webdriver

Interview Questions on iframes in selenium

  • what are iframes in selenium
  • how to handle iframes in selenium
  • how to identify iframes in selenium
  • how to switch iframe in selenium
  • how to handle iframe in selenium java
  • how to automate iframe in selenium
  • how to close iframe in selenium
  • frames and iframes in selenium
  • handling frames and iframes in selenium
  • how to handle multiple iframes in selenium
Recommended Readings

About Author :

I am Pavankumar, Having 8.5 years of experience currently working in Video/Live Analytics project.

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions
  • Nidhi 
    How do you navigate from Frame 3 then Page and then Frame 2, shouldn't the flow be like Frame 3 to Frame1 to Page and then Frame???
    Reply
  • Reply
  • Siva 
    I tried "Navigate to Parent Frame" on one of the example that you have given. while executing there  is notification pop up occurred. i tried with disabling in my chrome browser, but still i got the popup. so i google it and tried with "chrome options". there i got the following error could you please help me to resolve it.
"Exception in thread "main" java.lang.NoSuchMethodError: org.openqa.selenium.chrome.ChromeOptions.addArguments([Ljava/lang/String;)Lorg/openqa/selenium/chrome/ChromeOptions; at ParentFrame.main(ParentFrame.java:14)"
Note: Kindly provide a option to upload error screenshots in the comments section. it will easy to resolve a comment.
    Reply
    • Kiran Gaikwad 
      Awesome its worked for me Thank you so much
package SmallPrograms;
import javax.xml.bind.annotation.adapters.XmlJavaTypeAdapter.DEFAULT;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;
import org.testng.annotations.Test;
public class Iframe {
@Test
public static void main ()
{
	System.setProperty("webdriver.chrome.driver","F:\Selenium\Browser\chromedriver.exe");
	WebDriver dr = new ChromeDriver();
	dr.get("https://chercher.tech/practice/frames-example-selenium-webdriver");
	dr.switchTo().frame("frame1");	
	WebElement textBox= dr.findElement(By.xpath("//input[@type='text']"));
	textBox.sendKeys("kiran");
	dr.switchTo().frame("frame3");
	WebElement checkBox = dr.findElement(By.xpath("//input[@id='a']"));
	checkBox.click();
	dr.switchTo().parentFrame();
	WebElement textBox1= dr.findElement(By.xpath("//input[@type='text']"));
	textBox1.sendKeys("kiranNew");
	dr.switchTo().defaultContent();
	dr.switchTo().frame("frame2");
	WebElement DropDown = dr.findElement(By.xpath("//select[@class='col-lg-3']"));
	Select select = new Select(DropDown);
	select.selectByIndex(2);
	dr.quit();
//	dr.switchTo().frame("frame3");
//	WebElement checkBox1 = dr.findElement(By.xpath("//input[@id='a']"));
//	checkBox1.click();
//	dr.switchTo().parentFrame();
}
}

      Reply
    •