Handle iframes with selenium webdriver

How to handle iFrames with Selenium Webdriver

Posted by

This tutorial will help you learn – how to handle iFrames using Selenium webdriver? This article will explain writing automation script using selenium to test applications with iFrames.

What is iFrame? iFrame is a tag, which is a HTML document inside another HTML document. iFrame tag is defined as <iframe></iframe>. One can find the existence of frame in a webpage, by right clicking on the webpage and select the inspect option. This can be identified by using iframe tag. If there are multiple frame in a webpage, then we can easily switch between the frames using SwitchTo() command.

Sample Html Code for iFrame

<html>
<body>
    <div class=”box”>
      <iframe name=”iframe1″ id=”IF1″ height=”600″ width=”400″ src=”http://gmail.com”></iframe>
   </div>
    <div class=”box”>
      <iframe name=”iframe2″ id=”IF2″ height=”600″ width=”400″ align=”left” src=”http://rediff.com”></iframe>
    </div>
   </body>
</html>

How to find frames on webpage

Once the webpage is launched and if you are not able to find the frames, right click on the webpage and view page source. Once html code is loaded, search for “iframe” tag.

For Mozilla Firefox, right click on the web page, you will find “This frame “option as shown below:

We can easily find out how many frames are available on the webpage, using the below code snippet

Int size = driver.findElements(By.tageName(“iframe”)).size()

Handling frame in different ways

Handling frame in selenium Webdriver using SwitchTo() command

  1. SwitchTo().frame(int number) or By Index
  2. SwitchTo().frame(String frame Name) or By Name or Id
  3. SwitchTo().frame(WebElement frameElement) or By Web Element.
  1. SwitchTo(). frame(int frame)

We can switch to a frame using a frame index, which is one of the attributes in iframe tag. Please note that index will always start from 0.

Below is the sample code

public class Iframe {
           
            static WebDriver driver;
 
            public static void main(String[] args) {
                                                                                                System.setProperty(“webdriver.chrome.driver”,G:\\SampleWorkSpace\\Sample\\Jar\\chromedriver.exe”);
                        driver = new ChromeDriver();
                        driver.manage().window().maximize();
                        driver.get(“https://www.toolsqa.com/iframe-practice-page”);
                        driver.switchTo().frame(0);
                        driver.close();
                        }
}

SwitchTo (). frame (String name or id ):

2. SwitchTo (). frame (String name or id )

We can switch frame using Name or id where Name and id are two attributes of iframe tag.

In the below html code, name attribute is iframe1 and id attribute is “IF1”.  

<iframe width=”400″ height=”600″ name=”iframe1id=”IF1″ src=”https://toolsqa.com/automation-practice-form/” data-rocket-lazyload=”fitvidscompatible” data-lazy-src=”https://toolsqa.com/automation-practice-form/” class=”lazyloaded” data-was-processed=”true”></iframe>

Using “iframe1” we can easily switch to frame.

Sample code for name

public class Iframe {
           
                        static WebDriver driver;
 
                        public static void main(String[] args) {
                       
System.setProperty(“webdriver.chrome.driver”,G:\\SampleWorkSpace\\Sample\\Jar\\chromedriver.exe”);
                                    driver = new ChromeDriver();
                                    driver.manage().window().maximize();
                                    driver.get(“https://www.toolsqa.com/iframe-practice-page”);
                                    driver.switchTo().frame(“iframe1”);
                                    driver.close();
            }
 
}

Sample code for id

public class Iframe {
           
                        static WebDriver driver;
 
                        public static void main(String[] args) {
                        // TODO Auto-generated method stub
                       
System.setProperty(“webdriver.chrome.driver”,G:\\SampleWorkSpace\\Sample\\Jar\\chromedriver.exe”);
                        driver = new ChromeDriver();
                        driver.manage().window().maximize();
                       
                        driver.get(“https://www.toolsqa.com/iframe-practice-page”);
                        driver.switchTo().frame(“IF1”);
                        driver.close();
            }
 
}

3. SwitchTo ().frame (WebElement frameElement) or By Web Element

We can easily switch frame using frame web element using the driver. SwitchTo(). frame(). We can pass iframe element using any of the locator strategies.

Below is the Sample Code:

Switching back to Main page from Frame:

public class Iframe {
           
                        static WebDriver driver;
 
                        public static void main(String[] args) {
                                               
System.setProperty(“webdriver.chrome.driver”,G:\\SampleWorkSpace\\Sample\\Jar\\chromedriver.exe”);
                                    driver = new ChromeDriver();
                                    driver.manage().window().maximize();
                                    driver.get(“https://www.toolsqa.com/iframe-practice-page”);
                                    driver.switchTo().frame(iframewlwmwnt);
                                    driver.close();
                        }
}

We have to switch back to Main page from the frame using below command

Driver.switchTo(). defaultContent()

Sample Code:

Conclusion:


public class Iframe {
           
                        static WebDriver driver;
                        public static void main(String[] args) {
System.setProperty(“webdriver.chrome.driver”, “G:\\SampleWorkSpace\\Sample\\Jar\\chromedriver.exe”);
                                    driver = new ChromeDriver();
                                    driver.manage().window().maximize();
                                    driver.get(“https://www.toolsqa.com/iframe-practice-page”);
                                    driver.switchTo().frame(“IF1”);
                                    driver.switchTo().defaultContent();
                                    driver.close();

In the above article, we saw that how to switch between frames in different ways and also how come back to the Main page.

What’s Next?

In this tutorial, we explained how to handle iFrames with Selenium Webdriver. You can go and read more Selenium tutorials published on this blog.

Are you planning to become an Automation tester?

Techcanvass offers Automation Testing and Business Analysis certification courses. We are an IIBA endorsed education provider (EEP), iSQI Germany Authorized Training as well as Agile Testing alliance partner for CP-SAT certification training in Selenium.

We offer Selenium Classroom training in MumbaiSelenium Training with PythonCP-SAT certification Training and many short courses on Automation – BDD Automation testing with CucumberContinuous Integration Training with JenkinsAutomation testing Frameworks Training and Continuous Integration with Jenkins, Maven and GitHub.

One of the key features of our courses is the Job readiness package, as shown below:

Selenium-Certification-training-with-Job-readiness