What is Frame ?

We can handle frames/iframes present in the webpage using driver.switchTo() command in selenium webdriver. Frame/iFrame is nothing but another webelement in html page, which displays another part of webpage.

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

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

Difference between Frames and iFrames

Both Frame and iFrame are treated similar manner with Selenium webdriver, Selenium doesnot differentiate them, so e can handle both of them in same way.

Frame is a 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 inline frame which means it is used to embed not only 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 donot requires framesets.

Placement of Frames are bit difficult comapared with iFrames

Adjusting the size and width of the Frame is difficult when compared with iFrame.

Frames cannot contains nested frames (frame inside frame) but iFrames can contain nested iFrames.

HTML5 doesnot support Frames, but supports iFrames.

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

Presence of Frame in Selenium Webdriver

It is important for tester to check whether an element is inside a iframe/frame or just on webpage. If element is inside a frame then we have to switch into 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 a iframe else there is no iframe frame-selenium-webdriver 3. Webpage without frame. noframe-selenium-webdriver

How to find iframe/frame in Selenium webdriver

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 fnd 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 same id and name, so in such scenarios we cannot use id or name for finding the frame. So find the iframe/frame uniquely we have to find it as a 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 tagname locator as there are multiple frame so we may not get the unique element.

Lets 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 webdriver assigns index to every frame present in the page, using index is the least preffered way of find the frame as 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)
							


selectByVisibleText()

Handle single iFrame in selenium webdriver

If we want to access any element inside a iframe in selenium webdriver, we must find and switch to that iframe and access the element. Selenium 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 textbar present in iframe 1

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

Steps to solve scenario : 1. Open browser and navigate to : http://chercher.tech/practice/frames-example-selenium-webdriver


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


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, frame have 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);
								


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:/Users/user/Pictures/geckodriver.exe");
										// open firefox
										WebDriver driver = new FirefoxDriver();
										driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
										// open webpage
										driver.get("http://chercher.tech/practice/frames-example-selenium-webdriver");
										// 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 webdriver

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

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

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

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

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 swicth 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 Check box and click it if it is not already checked.


							// find the checkbox
							WebElement checkbox = driver.findElement(By.xpath("//input[@type='checkbox']"));

							// if check box is not selected then click the checkbox
							if(! checkbox.isSelected()){
								checkbox.click();
							}
							


Complete programe 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:/Users/user/Pictures/geckodriver.exe");
									// open firefox
									WebDriver driver = new FirefoxDriver();
									driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
									// open webpage
									driver.get("http://chercher.tech/practice/frames-example-selenium-webdriver");
									//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 check box is not selected then click the checkbox
									if(! checkbox.isSelected()){
										checkbox.click();
									}
								}
							}
							

Navigate to Parent Frame


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

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

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

Selenium Webdriver 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 check box present in the iframe 3, iframe 3 is present inside iframe 1
  • 2. After checking the check box, move back to iframe 1 and enter "selenium" text in the topic textbar
  • 3. Now move back to page level and compare the topic(header) text is not equal to "selenium webdriver"

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

Solution to Scenario : skipping few steps which were covered in 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 textbar 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'");
							}
							


Complete program to use 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:/Users/user/Pictures/geckodriver.exe");
									// open firefox
									WebDriver driver = new FirefoxDriver();
									driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
									// open webpage
									driver.get("http://chercher.tech/practice/frames-example-selenium-webdriver");
									//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 check box 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 page level we cannot access any elements inside the iframe unless we switch to it.

frames-example-selenium-webdriver

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

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

Solution to the scenario :
1. Swicth 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 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");
										


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:/Users/user/Pictures/geckodriver.exe");
												// open firefox
												WebDriver driver = new FirefoxDriver();
												driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
												// open webpage
												driver.get("http://chercher.tech/practice/frames-example-selenium-webdriver");
												//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 check box 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 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:/Users/user/Pictures/geckodriver.exe");
												// open firefox
												WebDriver driver = new FirefoxDriver();
												driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
												// open webpage
												driver.get("http://chercher.tech/practice/frames-example-selenium-webdriver");
												//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 check box 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'");
												}
												//swicth 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

Below images expains the possible routes of the iFrame navigation. possible-routes-selenium-webdriver

 
Join My Facebook Group
Join Group
 

About Author

Myself KarthiQ, I am the author of this blog, I know ways to write a good article but some how I donot have the skills to make it to reach people, would you like help me to reach more people By sharing this Article in the social media.

Share this Article Facebook
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions
 
Selenium-Webdriver.Com [Group]
Facebook Group · 801 members
Join Group
Learn Selenium Webdriver Concepts and Interview Questions Learn and code
 
Copyright © CherCher Tech