Handling iFrames

Identifying iFrame

Identifications of frames can be done using the methods given below:

• Right-click on the element, If you find the option like ‘This Frame’, then it is an iframe. (Please refer to the below diagram)
• Right-click on the page and then click ‘View Page Source’ and Search with the ‘iframe’. If any tag name with the ‘iframe’ is found, then it means to say the page is consisting an iframe.
   

 

As we can see in above diagram ‘This Frame‘ option is available upon right-clicking, so we are now sure it is an iframe.

We can even validate if a web page has any iframes by just looking at the source code and searching the tag <iframe> in the source code. Now for test automation perspective, we can find if any web page has any iframes by searching using the tag iframe as shown below.

List<WebElements> iframes = driver.findElements(By.tagName(“iframe”));

We can even identify a total number of iframes by using the below code snippet.

int size = driver.findElements(By.tagName("iframe")).size();

Methods to handle iFrame in Selenium Webdriver

Selenium provides the following already built-in methods to switch in between iframes.

• switchTo.frame(string frameName)
• switch To.frame(int frameNumber)
• switchTo.frame(WebElement frameNumber)
• switchTo().defaultContent()

switchTo.frame(int frameNumber)

• This method allows the users to switch to a particular frame using frame id.
• The frame number is a zero-based index value which means the first frame of the web page has an index of 0, the second frame has an index of 1, the third frame has an index of 3, and so on.
• Frame number can also be identified using the Frame ID of the element. And this can be done by Right click to Inspect element and search for iFrame. Now, validate if any of the iFrames have an ID attribute.

Sample iframe element on the source code would look as shown below.

Once the id of the iFrame is found, we can use the same to switch to the frame as below.

Examples:

driver.switchTo.frame(“a077aa5e”);
driver.switchTo.frame(0);

 

• This method throws NoSuchFrameException when the required frame is not found on the current web page.

switchTo.frame(string frameName)

In the code mentioned above, both frame ID and frame name hold the same value.

Switch to the frame can be accomplished using the frame name as below:

driver.switchTo.frame(“a077aa5e”);

switchTo.frame(WebElement frameElement)

• This method allows the users to switch to a frame based on the location of the Web Element.
• This method throws the NoSuchFrameException when the required frame is not present on the web page and StaleElementReferenceException if the frame displayed on a web page is not active.

Example:

WebElement frameElement = driver.findElement(By.id(“a077aa5e”));
driver.switchTo.frame(frameElement);

switchTo().defaultContent()

• Switching between iframes and parent page can be achieved using driver.switchTo().defaultContent() method.
• There is also a similar method in Selenium to switch between frames that is named driver.switchTo().parentFrame() method.
• The main difference between driver.switchTo().defaultContent() and driver.switchTo().parentFrame() is that the first method switches the control to main web page regardless of the number of frames within the web page. In contrast, the second method switches the control to parent frame of current frame.

Example:

Let's suppose there are three frames named if1,if2, and if3 within the parent web page p1. Frames if1, if2, and if3 are dependant on each other, which means one frame will be the parent of the other.

Using driver.switchTo().defaultContent() method on frame if3, web driver control moves to parent page, p1. 

While driver.switchTo().parentFrame() method on frame if3 switches the control back to frame if2 and so on.

Switching Elements in iFrames

We can switch over the elements and handle frames in Selenium Web Driver using three ways : 

• Index
• Name or Id
• Web Element

Switch to the frame by index

An index is one of the attributes for frame handling in Selenium through which we can switch to it.

The index of iFrame starts with ‘0’.

Suppose if there are 20 frames in page, we can switch to the frame in Selenium by using index. For example:

• driver.switchTo().frame(1);
• driver.switchTo().frame(0);

Switch to the frame by ID or Name

ID and Name are the attributes for handling frames in Selenium through which we can switch to the iFrame.

• driver.switchTo().frame(“iframe1”);
• driver.switchTo().frame(“id of the element”);

Example:
Let’s consider an example of switching frames in Selenium. We require to click the iframe. You have chosen a website of your choice that contains iFrame.

It is impossible to click an iframe directly through the XPath since it is an iframe. First, we have to switch to frame, and then we can click using XPath.

Step 1: 

• Initialise the FireFox : WebDriver driver = new FirefoxDriver();
• Navigate to the URL of webpage containing iFrame : driver.det(“Webpage URL”);
• Maximise the window : driver.manage().window().maximize();
   

Step 2: First, find out the id of the iFrame by inspecting it through Firebug and then switch to the iframe through ID.
driver.switchTo().frame("a077aa5e");

Step 3: 

• Find the XPath of the element to be clicked. 
• Click the element using the web driver command: diver.findElement(By.xpath("html/body/a/img")).click();

Complete Program

public class SwitchToFrame_ID {
	public static void main(String[] args) {

		//navigates to the Firefox Browser
		WebDriver newDriver = new FirefoxDriver(); 
		newDriver .get("Webpage URL"); 

        // navigates to the page consisting an iframe
        newDriver.manage().window().maximize();

		//switching the frame by ID
        newDriver.switchTo().frame("a077aa5e"); 

		System.out.println("~*~*~*~*~*~We have switched to the iframe~*~*~*~*~*~");
      	newDriver.findElement(By.xpath("html/body/a/img")).click();

		//Clicks the iframe       
   		System.out.println("~*~*~*~*~*~We are done~*~*~*~*~*~");
    }
}

Output

The browser will navigate to the page consisting of the iFrame and click on the iFrame.

Switch to the Frame by Web Element

We can also switch to the iFrame using web element using command:

• driver.switchTo().frame(WebElement);

Switch Back to Main Frame

To switch back to main frame, we have to come out of the iFrame first.

Now to move back to the parent frame, we can either use switchTo().parentFrame() or if we want to get back to the main (or most parent) frame, we can use switchTo().defaultContent();

• driver.switchTo().parentFrame();
• driver.switchTo().defaultContent();

Switch over the Frame without using ID or Web Element

Suppose there are 50 frames on the page, and there is no ID available, hence here we don’t know from which iframe the required element is being loaded (This is the case when we don't know the index of the frame).

The solution for the above problem is that we must find the index of the iframe through which element is being loaded, and then we have to switch to the iframe through that index.

Below are some steps for finding the index of the Frame by which the element is being loaded by using the below snippet

Step 1: 

• Initialise the FireFox : WebDriver driver = new FirefoxDriver();
• Navigate to the URL of webpage containing iFrame : driver.det(“Webpage URL”);
• Maximise the window : driver.manage().window().maximize();

Step 2: Find the total number of iframes present inside the page using the tagname ‘iframe’.
int size = driver.findElements(By.tagName("iframe")).size();

Step 3: Finding the index of the iFrame. Below “for loop” iterates all the iframes on the page, and it prints ‘1’ if our required iframe was found, else returns ‘0’. 

//code for finding the index of element
for(int i = 0; i <= size; i++) {
	driver.switchTo().frame(i);
	int total =  newDriver .findElements(By.xpath("html/body/a/img")).size();
	System.out.println(total);

	//switching back from the iframe
	newDriver .switchTo().defaultContent(); 
}  

Program

Code Till now looks like : 

public class IndexOfIframe {
	public static void main(String[] args) {
     	//Initialise the FireFox
		WebDriver newDriver = new FirefoxDriver();


		//Navigate to the URL of webpage containing iFrame
		newDriver .get("Webpage URL containing iFrame");


		//Maximising the window
		newDriver .manage().window().maximize();


		//Getting size of the element by tagname iFrame
		int size = newDriver .findElements(By.tagName("iframe")).size();

		//code for finding the index of element
		for(int i = 0; i <= size; i++) {
     		driver.switchTo().frame(i);
     		int total =  newDriver .findElements(By.xpath("html/body/a/img")).size();
			System.out.println(total);

			//switching back from the iframe
     		newDriver .switchTo().defaultContent(); 
		}  
	}
}

Output

Verify the output, and you can find the series of 0’s and 1’s.

• Wherever you find the ‘1’ in output, the Frame's index by which the element is being loaded.
• Since the index of iframe starts with ‘0’ if you find the 1 in the 1stplace, then the index is 0.
• If you find 1 in 3rd place, the index is 2.

We can also comment out the for loop once we find the index.

Step 4: After finding the element's index, we can switch over the frame using the command: driver.switchTo().frame(“index of the frame”);

Step 5: Clicking the iFrame or element in the iFrame.

driver.findElement(By.xpath(“html/body/a/img”)).click();

Complete Program

The complete code will look like this: 

public class SwitchToIframe{
	public static void main(String[] args) throws NoSuchElementException{

		//Initialise the FireFox
		WebDriver newDriver = new FirefoxDriver();

		//Navigate to the URL of webpage containing iFrame
		newDriver .get("Webpage URL containing iFrame");

		//Maximising the window
		newDriver .manage().window().maximize();

		//Getting size of the element by tagname iFrame
		int size = newDriver .findElements(By.tagName("iframe")).size();

		//Commenting the code for finding the index of element
		/*for(int i = 0; i <= size; i++) {
    	 	newDriver .switchTo().frame(i);
	     	int total =  newDriver .findElements(By.xpath("html/body/a/img")).size();
		 	System.out.println(total);

			//switching back from the iframe
	     	newDriver .switchTo().defaultContent(); 
		}*/    

		//Switching to the frame
		newDriver .switchTo().frame(0); 
		System.out.println(“~*~*~*~*~*~*~We have switched to the iFrame~*~*~*~*~*~*~");

		//Clicking element in line with the Advertisement
		newDriver .findElement(By.xpath("html/body/a/img")).click();

    	System.out.println("~*~*~*~*~*~*~We are Done~*~*~*~*~*~*~");
    }
}

Output

The browser will navigate to the page consisting of the above iFrame and click on the iFrame.

FAQs

1. What is the full form of iFrame?
   The full form of iFrame is inline Frame.
    
2. What is the purpose of iFrame?
   An iFrame is an HTML element that loads another HTML page within the document. It essentially puts another webpage within the parent page. 
    
3. What is an alternative for the iFrame tag in HTML?
   The object tag is an alternative for iFrame in HTML
    
4. What is the difference between an iFrame and a frame?
   An iFrame is used to embed the content of the external websites into the web page to avoid cross-site scripting issues.while, a frame divides a page into different sections, with new content on each section.

Conclusion

In this blog, we talked about iFrames on a webpage and different identification methods using Selenium Web Driver. We also discussed the various techniques of Handling iFrames in Selenium Web Driver. Then we studied different ways of Switching elements in iFrames with the help of examples.

We hope this blog helped you enhance your knowledge regarding iFrames in Selenium WebDriver. 

You may also want to learn about Selenium Webdriver and iFrames in HTML.

Learning never stops, and to learn more and become more skilled, head over to our practice platform Coding Ninjas Studio, practice top problems, attempt Mock Tests, and read informative blogs and interview experiences. Do upvote our blog to help other ninjas grow. 

Happy Learning!