How to Handle Frames in Selenium WebDriver

Today I'm going to cover one very important topic in Selenium WebDriver how to handle different frames in Selenium WebDriver. Sometimes you see that you are unable to locate an element and sometimes you see that element not found exception so there is a very big reason behind that, that might be possible that element is available on that particular frame so what is a frame? First, we need to understand it.

What is Frame?

A frame is a part of the web page, which displays contents independently, means independent of its container. With the help of the following image, you can understand easily, what is a frame and how it works. Whenever you open any browser and type the URL in the address bar what happens, a web page is loaded against that particular URL. That page contains different web elements like you know these elements are text fields, radio buttons, checkboxes, and some links are available or some images are available, number of elements are directly available on the page.

But some elements are available in the particular frame so one more hierarchy is their frame. So the first hierarchy I would say the opening of browser and then we have a page that is your web page, which you open in the browser like Facebook.com, Twittwe.com or whatever and the third hierarchy is called a frame. Now what exactly the frame, a frame is another web element, it will be treated as a web element but it will also contain a number of elements as shown in the diagram, in this frame also we have some buttons or links, buttons and text fields.

So in simple words, some elements on web pages are available in the form of frames, when the user clicks or hovers on that element, a frame is shown that frame also has some web elements. The question is here, how do we interact with frame and how we have access to the frame elements. Frame elements mean those elements which are available on that particular frame.

How to access the elements in a frame?

To access the frame elements we have to switch from page to frame, then we can access frame elements. Otherwise, you will get an exception "NoSuchElementFound". The
the general syntax to switch over elements in a frame is:

driver.switchTo().frame();

There are two important properties that are used to switch over the elements in the frame.

1) By Index
2) By Name

By Index:

The frame index always starts from 0. If you want to interact with the first frame, you can use the following Selenium command.

driver.switchTo().frame(0);

Similarly, you can get control of other frames by using the index number. For the second frame, you can write the following command, and so on.

driver.switchTo().frame(1);

By Name:

Name is another property that you can use to access the frame elements.

driver.switchTo().frame("myframe");

Example Code

Scenario:

 1) Go to this URL https://chercher.tech/practice/frames-example-selenium-webdriver
 2) Switch to frame
 3) Find the element in the frame
 4) Enter some text
 I have found one very good example of a frame. Let's see how it works practically.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
public class FrameHandling {
 public static void main(String[] args) {
  System.setProperty("webdriver.chrome.driver", "/home/khawer/Desktop/chromedriver");
  WebDriver driver = new ChromeDriver();
  driver.get("https://chercher.tech/practice/frames-example-selenium-webdriver");
  driver.manage().window().maximize();
  driver.switchTo().frame("frame1");
  driver.findElement(By.xpath("//input[@type='text']")).sendKeys("Sample Input");
 }
}

Nested Frame

Nested frames are used to navigate from frame to another frame. In our example let's try to tick the checkbox. A checkbox is an element of frame 3, which resides inside the frame 1. So to interact with the checkbox first we need to switch to frame 1. Then we can switch to frame 3. But directly we can't access frame 3. The given image is showing the nested frame process.

Scenario: 

1) Launch the URL https://chercher.tech/practice/frames-example-selenium-webdriver
 2) Switch to frame1
 3) Switch to frame3
 4) Tick the checkbox

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
public class NestedFrames {
 public static void main(String[] args) {
  System.setProperty("webdriver.chrome.driver", "/home/khawer/Desktop/chromedriver");
  WebDriver driver = new ChromeDriver();
  driver.get("https://chercher.tech/practice/frames-example-selenium-webdriver");
  driver.manage().window().maximize();
  driver.switchTo().frame("frame1");
  driver.switchTo().frame("frame3");
  WebElement checkbox = driver.findElement(By.xpath("//input[@type='checkbox']"));
  if (!checkbox.isSelected()) {
   checkbox.click();
  }
 }
}

Switch to Parent Frame

To get out of the current frame the following command is used. It moves the control to the outer frame or page level. If you don't shift the control to the parent frame, you can't access the other elements.

driver.switchTo().parentFrame()

Now let try to move from frame 3 to frame1 then to the page level. As shown in the below diagram.

Scenario:

 1) Tick the checkbox in frame 3, frame 3 is present in frame 1
 2) Move back to frame 1 then enter some text in the topic field
 3) Now get out of frame 1 to page level and compare the header title

import org.openqa.selenium.By;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
public class ParentFrame {
 public static void main(String[] args) {
  System.setProperty("webdriver.chrome.driver", "/home/khawer/Desktop/chromedriver");
  WebDriver driver = new ChromeDriver();
  driver.get("https://chercher.tech/practice/frames-example-selenium-webdriver");
  driver.manage().window().maximize();
  driver.switchTo().frame("frame1");
  driver.switchTo().frame("frame3");
  WebElement checkbox = driver.findElement(By.xpath("//input[@type='checkbox']"));
  if (!checkbox.isSelected()) {
   checkbox.click();
  }
  driver.switchTo().parentFrame();
  driver.findElement(By.xpath("//input[@type='text']")).sendKeys("selenium");
  driver.switchTo().parentFrame();
  String textValue = driver.findElement(By.xpath("//label/span")).getText();
  if (textValue.equals("selenium webdriver")) {
   System.out.println("Topic value is equal to 'selenium webdriver'");
  } else {
   System.out.println("Text is not equal to header text");
  }
 }
}

Default Content

The default Content command exits all the frames and moves the selenium control to the page level. You can directly move to page-level from any frame. The following syntax is used for default content:

driver.switchTo().defaultContent();

Summary:

1) How to switch to frame in selenium
 2) How to interact with frame elements
 3) How to use nested frames
 4) How to move the control to page level
 5) How to use the parent frame