How to Handle IFrame / IFrames with Selenium WebDriver

iFrame is a HTML document embedded inside an HTML document. iFrame is defined by an <iframe></iframe> tag in HTML. With this tag you can identify an iFrame while inspecting the HTML tree.
Here is an sample HTML code of a HTML page which contains two iFrames.

<html>
  <body>
    <div class="box">
      <iframe name="iframe1" id="IF1" height="600" width="400" src="http://www.selenium-venkat.blogspot.com"></iframe>
    </div>
    <div class="box">
      <iframe name="iframe2" id="IF2" height="600" width="400"    align="left" src="http://www.facebook.com"></iframe>
    </div>
   </body>
</html>

To Switch between iFrames we have to use the driver’s switchTo().frame command. We can use the switchTo().frame() in three ways:

·         switchTo.frame(int frameNumber)Pass the frame index and driver will switch to that frame.

·         switchTo.frame(string frameNameOrId)Pass the frame element Name or ID and driver will switch to that frame.

·         switchTo.frame(WebElement frameElement)Pass the frame web element and driver will switch to that frame.

 

WebDriver driver = new FirefoxDriver();

driver.get("www.selenium-venkat.blogspot.com");

//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());


here are two ways to find total number of iFrames in a web page. First by executing a JavaScript and second is by finding total number of web elements with a tag name of iFrame. Here is the code using both these methods:

Switch to Frames by Index

Index of an iFrame is the position at which it occurs in the HTML page. In the above example we have found total number of iFrames. In the sample page we have two IFrames, index of iFrame starts from 0. So there are two iFrames on the page with index 0 and 1. Index 0 will be the iFrame which exists earlier in the HTML page.

To switch to 0th iframe we can simple write driver.switchTo().frame(0). Here is the sample code:

            public static void main(String[] args) throws InterruptedException {
                        WebDriver driver = new FirefoxDriver();
                        driver.get("http://selenium-venkat.blogspot.com");
                        //Switch by Index
                        driver.switchTo().frame(0);
                        driver.quit();
            }


Switch to Frames by Name

Now if you take a look at the HTMLcode of iFrame you will find that it has Nameattribute. Name attribute has a value iframe1. We can switch to the iFrame using the name by using the command driver.switchTo().frame(“iframe1”). Here is the sample code

                        WebDriver driver = new FirefoxDriver();
                        driver.get("http://selenium-venkat.blogspot.com");
                        //Switch by frame name
                        driver.switchTo().frame("iframe1");
                        driver.quit();

Switch to Frame by ID

Similar to the name attribute in the iFrame tag we also have the ID attribute. We can use that also to switch to the frame. All we have to do is pass the id to the switchTo command like this driver.SwitchTo().frame(“IF1”). Here is the sample code:

            WebDriver driver = new FirefoxDriver(); 
            driver.get("http://selenium-venkat.blogspot.com");
            //Switch by frame ID
            driver.switchTo().frame("IF1");
            driver.quit();

Switching back to Main page from Frame

There is one very important command that will help us to get back to the main page. Main page is the page in which two iFrames are embedded. Once you are done with all the task in a particular iFrame you can switch back to the main page using the switchTo().defaultContent(). Here is the sample code which switches the driver back to main p
            WebDriver driver = new FirefoxDriver();
            driver.get("http://selenium-venkat.blogspot.com");
            //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();

3 comments:

  1. As claimed by Stanford Medical, It is in fact the SINGLE reason this country's women get to live 10 years more and weigh 19 KG less than us.

    (By the way, it has NOTHING to do with genetics or some hard exercise and EVERYTHING to "how" they are eating.)

    P.S, I said "HOW", not "WHAT"...

    Tap on this link to uncover if this little questionnaire can help you discover your true weight loss potential

    ReplyDelete
  2. Nice articel, This article help me very well. Thank you. Also please check my article on my site Know All About Auto Adjust HTML IFrame Height According To Its Page Contents Height Using JavaScript.

    ReplyDelete
  3. Nice articel, This article help me very well. Thank you. Also please check my article on my site Know All About Auto Adjust HTML IFrame Height According To Its Page Contents Height Using JavaScript.

    ReplyDelete