How to handle Frame in Selenium

Handle Frame In Selenium

A frame or an Inline Frame(iFrame) is an HTML embedded within a webpage. It can be considered as a web element like dropdown, text box, etc as it resides inside a webpage. Ads displayed on a webpage is a classic example of a frame. We cannot directly interact with the content of the frame, hence we need a mechanism to first identify the frame. In this tutorial, we will learn how to handle frame in selenium.

 

Handle Frame in Selenium

 

Unlike other web elements, we cannot just use driver.findElement(By) to get a reference to the frame. We first need to switch to the desired frame.

 

driver.switchTo.frame();

 

After switching, you may consider the frame as a web page and its contents as the web elements. The driver object has the reference to the frame until another switch command to the parent web page or another frame is called.

Moreover, frame() accepts either a String, int or WebElement as a parameter depending on the usage (more on it below).

 

Handle frame in selenium
Handle frame in selenium
switch to frame options
driver.switchTo.frame(…)

 

 

Switch to frame using index

 

We have already discussed that a frame is HTML contained inside another HTML (web page). Each frame is associated with an index, starting from 0. If a webpage contains 3 frames, then the corresponding indexes would be 0, 1 and 2.

 

driver.switchTo.frame(int index)

 

Open the DEMO website > Right click > Select Inspect element > Ctrl + F, this should open a search box inside the Elements section. Search with //frame or //iframe depending on the application. This should fetch the total number of frames present in the web page.

 

Frame by Index
Frame by Index

 

In the above image, there are a total of 3 frames. Index of a frame is determined by its occurrence position in the web page. To know the number of frames in a web page, get the size of frame tags.

 

int size = driver.findElements(By.tagName("frame")).size();
        System.out.println(size);

 

 

To Do – Click on Index link of third frame

 

Index link is present on the third frame, hence first we will switch to frame 2, use any locator technique to get the reference of Index web element and then click on it.

Following is the code to click on Index link:

 

driver.switchTo().frame(2);
        driver.findElement(By.linkText("INDEX")).click();

 

 

Switch to Frame using id/name

 

While creating a web element of type frame/ iframe, developers often assign an id or name value to it. We can directly use these attributes to switch to the desired frame containing these attribute values.

 

driver.switchTo().frame(String name/id);

 

 

To Do – Click on AbstractAnnotations link of 2nd frame

 

In our demo application, only name attribute is used for frames. The frame containing the AbstractAnnotations link (index 1) has name value packageFrame.

Following is the code to switch to the second frame (index 1) using name attribute value and click on the desired link:

 

driver.switchTo().frame("packageFrame");
        driver.findElement(By.linkText("AbstractAnnotations")).click();

 

 

Switch to Frame using WebElement

 

Like all other web elements (button, links, checkbox, etc.), frame or iframe is also a type of web element. We can take the reference of any frame using driver.findElement(By), store it in a variable of type web element and then use this reference to operate on the selected frame.

 

driver.switchTo.frame(WebElement frame)

 

 

To Do Switch to the first frame and click on com.thoughtworks.selenium link

 

Get the reference of the first frame (index 0) and store it in a variable of type WebElement. We can then switch to this web element and operate on it.

Below is the code to click on the desired link of the first frame:

 

WebElement ele = driver.findElement(By.name("packageListFrame"));
        driver.switchTo().frame(ele);
        driver.findElement(By.linkText("com.thoughtworks.selenium")).click();

 

 

Switch to main or default page

 

After operating on a frame, we should always handle the driver control to the parent web page. Syntax to navigate to the parent web page is:

 

 

driver.switchTo().defaultContent();

 

We should use driver.switchTo.parentFrame() if we are working on a nested frame or a frame within a frame.

 

Final Code

 

Below is the complete code to perform all the above frame operations. Click HERE to learn how to set up a selenium project. Create a package seleniumFrameadd a class App and add the following code to it:

 

package seleniumFrame;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class App {

    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "/home/dhawal/selenium jars/chromedriver/chromedriver");

        WebDriver driver = new ChromeDriver();
        driver.get("https://seleniumhq.github.io/selenium/docs/api/java/index.html");
        
        //Get the size/ total number of frames in a web page
        int size = driver.findElements(By.tagName("frame")).size();
        System.out.println(size);
        
        //Switch to third frame using index
        driver.switchTo().frame(2);
        driver.findElement(By.linkText("INDEX")).click();
        
        //Switch to the parent webpage  
        driver.switchTo().defaultContent();
        
        //switch to the second frame using name attribute value
        driver.switchTo().frame("packageFrame");
        driver.findElement(By.linkText("AbstractAnnotations")).click();
        
        //Switch to the parent webpage  
        driver.switchTo().defaultContent();
        
        //Take the reference of the first frame and store in a variable of type WebElement 
        WebElement ele = driver.findElement(By.name("packageListFrame"));
        
        //switch to the frame using the reference
        driver.switchTo().frame(ele);
        driver.findElement(By.linkText("com.thoughtworks.selenium")).click();
        
        driver.close();
    }

}

 

 

Case Study

 

In the DEMO app, perform the following steps:

  • Enter some text into the text area.
  • Click on the link Elemental Selenium displayed at bottom of the web page.
  • Verify the title of the opened web page.

 

Frame Case Study

 

 

Solution

 

Setup a JAVA project, create a package frame and add a class FrameTest to it. We will utilize the following concepts to solve this problem:

  • The text area is a frame having an id attribute.
  • Switch to the text area using the above attribute value and enter some text.
  • Switch to the default content after text in the text area.
  • Click on the Elemental Selenium link at bottom of the web page. This should open the link in a new tab.
  • Use getWindowHandles() to the new tab reference and verify the title.

Code for the above exercise is written below:

 

package frame;

import java.util.Set;
import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedCondition;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

public class FrameTest {
    static WebDriver driver;

    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "/home/dhawal/selenium jars/chromedriver/chromedriver");

        driver = new ChromeDriver();
        driver.get("https://the-internet.herokuapp.com/iframe");

        //switch to the desired frame (text area) using id attribute value
        driver.switchTo().frame("mce_0_ifr");
        
        //clear the default text from the text area
        driver.findElement(By.id("tinymce")).clear();
        
        //Enter the desired text
        driver.findElement(By.id("tinymce")).sendKeys("Test");

        //switch to main web page containing the frame
        driver.switchTo().defaultContent();
        
        //click on the link and wait till the page loads
        driver.findElement(By.linkText("Elemental Selenium")).click();
        driver.manage().timeouts().implicitlyWait(10L, TimeUnit.SECONDS);

        //Get the reference of all opened browser windows. This will include the already opened window(s), if any
        Set<String> handles = driver.getWindowHandles();

        //loop through each window handle and verify the title
        for (String handle : handles) {
            if (driver.switchTo().window(handle).getTitle().contains("Receive a Free")) {
                System.out.println("Matched");
            }

        }

    }

}

 

Hope this article helps in understanding the concepts of frames and how to handle frame in selenium. Thank you for reading.

Author: Dhawal Joshi

A post-graduate in MCA, ISTQB & ITIL certified QA with more than 8 years of experience in QA working with a CMMI Level 5 organization as System Analyst. I started my automation journey with HP UFT(formerly known as QTP) and for the past few years, I am using Selenium for automation. I also have experience in Android Application Development, Java, HTML, and VBScript. When I am not working, I like to spend time with my family, cooking and learning new developments in IT.

1 thought on “How to handle Frame in Selenium

Leave a Reply

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