Handle Frames / IFrames In Selenium WebDriver

The frame is a widely used Html web element in web page design. It’s purpose is to include other web pages into the current web page. There are two kinds of Html frame tags. One is <frame> which is used to add a fixed size and position frame, the other is <iframe> which is used to add a floating and resizable frame. But how to manipulate them in selenium webdriver automation testing scripts? Please read on.

1. Html Files In This Example.

  1. TestFramePage.html
    <html>
    <head>
    <meta charset="UTF-8">
    <title>This is TestFramePage.html</title>
    </head>
    <frameset cols="50%,50%">
      <frame name="leftFrame" src="TestChildFramePage.html" />
      <frame id="rightFrame" src="TestIFramePage.html" />
    </frameset>
    </html>

    The above Html page contains two fixed size and position Html frame. Each one occupies fifty percent of the width. You should include them in the Html frameset tag, and Html body tag can not exist on the page.

  2. TestChildFramePage.html
    <html>
    <head>
    <meta charset="UTF-8">
    <title>This is TestChildFramePage.html</title>
    </head>
    <frameset rows="30%,70%">
      <frame name="upFrame" src="pageUpFrame.html" />
      <frame id="downFrame" src="pageDownFrame.html" />
    </frameset>
    </html>

    This is the first frame web page in TestFramePage.html. It also includes two fixed frame. The upFrame includes web page pageUpFrame.html which includes one line text and an input button, the downFrame includes web page pageDownFrame.html which only includes one-line text.

  3. TestIFramePage.html
    <html>
    <head>
    <meta charset="UTF-8">
    <title>This page include two iframe</title>
    </head>
    <body>
    <iframe src="pageIFrame1.html" height="300" width="600"></iframe>
    
    <iframe src="pageIFrame2.html" height="300" width="500"></iframe>
    
    </body>
    </html>

    This is the second frame web page in TestFramePage.html. It includes two floating iframes. The first iframe includes web page pageIFrame1.html, the second iframe includes web page pageIFrame2.html which includes an input text box and a button.

  4. When you use the Firefox browser to open TestFramePage.html, it will show a web page like below.
    example-web-page-with-frame-and-iframe
  5. Below are the source files used in the above example.
    C:\WORKSPACE\WORK\DEV2QA.COM-EXAMPLE-CODE\JAVACOREEXAMPLEPROJECT\SRC\COM\DEV2QA\WEBDRIVER\FRAME
        pageDownFrame.html
        pageIFrame1.html
        pageIFrame2.html
        pageUpFrame.html
        TestChildFramePage.html
        TestFramePage.html
        TestHtmlFrame.java
        TestIFramePage.html

2. How To Switch To The Frame/IFrame Use Selenium WebDriver.

WebDriver’s switchTo() method returns a TargetLocator object, this locator provides the below method.

  1. The common method used in this example to verify the switch action success.
    public static int getTotalFrameCountInCurrentPage(WebDriver driver)
    {
    	int ret = 0;
    	
    	By byFrameTag = By.tagName("frame");
    	List<WebElement> frameList = driver.findElements(byFrameTag);
    	int frameSize = frameList.size();
    	
    	System.out.println("There are " + frameSize + " frame in current web page.");
    	
    	By byIFrameTag = By.tagName("iframe");
    	List<WebElement> iframeList = driver.findElements(byIFrameTag);
    	int iframeSize = iframeList.size();
    	
    	System.out.println("There are " + iframeSize + " iframe in current web page.");
    	
    	ret = frameSize + iframeSize;
    			
    	return ret;
    }
  2. Switch to by the frame index with the method switchTo().frame(int frameNumber).
    The frames in a web page are stored in an array start with index 0.

    public static void getFrameByIndex(WebDriver driver, int frameIndex)
    {
    	// Switch to by index.
    	driver.switchTo().frame(frameIndex);
    	
    	// Check whether the switch action successfully or not.
    	int totalFrameCount = TestHtmlFrame.getTotalFrameCountInCurrentPage(driver);
    	
    	System.out.println("There are totaly " + totalFrameCount + " frames exist in current frame which index is " + frameIndex);
    }
  3. Switch to by the frame name with the method switchTo().frame(string frameName).

    public static void getFrameByName(WebDriver driver, String frameName)
    {
    	driver.switchTo().frame(frameName);
    	
    	int totalFrameCount = TestHtmlFrame.getTotalFrameCountInCurrentPage(driver);
    	
    	System.out.println("There are totaly " + totalFrameCount + " frames exist in current frame with name " + frameName);
    }
  4. Switch to by the frame id with the method switchTo().frame(string frameId).
    public static void getFrameById(WebDriver driver, String frameId)
    {
    	driver.switchTo().frame(frameId);
    	
    	int totalFrameCount = TestHtmlFrame.getTotalFrameCountInCurrentPage(driver);
    	
    	System.out.println("There are totaly " + totalFrameCount + " frames exist in current frame with id " + frameId);
    }
  5. Switch to by the frame web element with the method switchTo.frame(WebElement frameElement).
    If the id or name does not exist or changed dynamically, you can use this method. You can get the frame web element via a lot of methods, such as by XPath, by CSS selector, etc.

    public static void getFrameByXpath(WebDriver driver, String xpath)
    {
    	By byXPath = By.xpath(xpath);
    	
    	// Get all web elements by xpath.
    	List<WebElement> iframeList = driver.findElements(byXPath);
    	
    	if(iframeList.size()>0)
    	{
    		// Get the first web element.
    		WebElement iframeElement1 = iframeList.get(0);
    		
    		// Switch to it.
    		driver.switchTo().frame(iframeElement1);
    		
    		int totalFrameCount = TestHtmlFrame.getTotalFrameCountInCurrentPage(driver);
    		
    		System.out.println("There are totaly " + totalFrameCount + " frames exist in current frame with xpath " + xpath);
    	}else
    	{
    		System.out.println("Do not find any web element with xpath " + xpath);
    	}
    }
  6. Switch back to top web page with the method switchTo().defaultContent().
    After the switch, if you want to interact with other web elements outside the current frame, you can use this method to go to the top web page.

    /* Return back to top web page.*/
    public static void returnToTopWebPage(WebDriver driver)
    { 
    	driver.switchTo().defaultContent();
    }

3. Example To Get Child Frame In Parent.

  1. Now we want to get the username input text box and input text into it in pageIFrame2.html, which is located in the right down iframe. We should follow the below steps.
  2. Switch to the parent frame.
  3. Switch to the child iframe.
  4. Get the input text box web element.
  5. Use the sendKeys(String text) method to input text in it.
    public static void getChildFrameByXPath(WebDriver driver, String parentFrameXPath, String childFrameXPath)
    {
    	// First switch to parent
    	TestHtmlFrame.getFrameByXpath(driver, parentFrameXPath);
    	
    	// Then switch to child iframe in parent.
    	TestHtmlFrame.getFrameByXpath(driver, childFrameXPath);
    		
    	// Check current web page content to verify the switch action success.
    	By byUserName = By.name("userName");
    	List<WebElement> eleList = driver.findElements(byUserName);
    	if(eleList.size()>0)
    	{
    		WebElement element = eleList.get(0);
    		
    		element.sendKeys("dev2qa.com");
    		
    		System.out.println("Find web element in current child web page, parent page xpath : " + parentFrameXPath + " , child page xpath : " + childFrameXPath);
    		
    		System.out.println("Found web element tage : " + element.getTagName() + " , value : " + element.getText());
    	}
    	
    }

4. Java Main And Test Method.

  1. Below is the java main and test method for this example.
    public static void main(String[] args) throws InterruptedException {
    		
    	String filePath = "file:///C:/WorkSpace/dev2qa.com/Code/src/com/dev2qa/webdriver/frame/TestFramePage.html";
    	WebDriver ffDriver = new FirefoxDriver();
    		
    	ffDriver.get(filePath);
    		
    	//TestHtmlFrame.getTotalFrameCountInCurrentPage(ffDriver);
    		
    	TestHtmlFrame.testGetFrame(ffDriver);
    		
    	Thread.sleep(3000);
    	ffDriver.close();	
    }	
    
    
    public static void testGetFrame(WebDriver driver)
    {
    	TestHtmlFrame.getFrameByIndex(driver, 0);
    	TestHtmlFrame.returnToTopWebPage(driver);
    		
    	TestHtmlFrame.getFrameById(driver, "rightFrame");
    	TestHtmlFrame.returnToTopWebPage(driver);
    		
    	TestHtmlFrame.getFrameByName(driver, "leftFrame");
    	TestHtmlFrame.returnToTopWebPage(driver);
    		
    	TestHtmlFrame.getFrameByXpath(driver, "//frame[@id=\"rightFrame\"]");
    	TestHtmlFrame.returnToTopWebPage(driver);
    		
    	TestHtmlFrame.getChildFrameByXPath(driver, "//frame[@id=\"rightFrame\"]","//iframe[@src=\"pageIFrame2.html\"]");
    	TestHtmlFrame.returnToTopWebPage(driver);
    }

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.