Handling Frames In Web Application Automation Using Selenium

In this article, let us discuss the process of handling frames in web applications using Selenium.

Generally, in the web page, we use Frames for displaying content from another page into the current web page.

Why we use Frames

Predominantly, it embeds the content from other web pages to the current webpage in HTML.

It increases the reusability of web pages in an application.

Key to identify the frame

HTML provides an IFrame tag for performing this operation. In Selenium, the user will not be able to perform operations directly on the elements residing under any frame.

Selenium can perform operations on only one webpage at a time, so if a web page contains frames it means we are trying to perform operations on more than one page even though they all are embedded into a single web page.

In order to automate these type of web page, we need to handle the frames initially, so that Selenium will allow us to handle elements inside the frame.

While handling elements inside the frame we can’t perform an operation on outside the frame.

As said, we can access one page at one time. For performing operations on elements residing under a frame, we need to switch to that frame.

Syntax

driver.switchTo().frame(params);

We can switch to a frame by using four ways.

1. Switch to the frame using frame index
2. Switch to the frame using frame name/id
3. Switch to the frame using WebElement
4. Switch to the parent frame without passing any values

Switch to the frame using frame index

Pass the index of the frame to the method.

For example,

HTML code

<div>
   <iframe name=”abcd” >
      <p> first frame</p>
   </iframe>
   <iframe name=”xyz” >
      <p> second frame</p>
   </iframe>
</div>

If I want to access second frame then the syntax will be as follows,

driver.switchTo.frame(1);

Here the index is 0(zero) based index, It means index value starts from zero.

Switch to the frame using frame name/id

Pass the name/id of the frame to the method.

For example,

HTML code

<div>
   <iframe name=”abcd” >
      <p> first frame</p>
   </iframe>
   <iframe name=”xyz” >
      <p> second frame</p>
   </iframe>
</div>

If I want to access second frame then the syntax will be as follows,

driver.switchTo.frame(“xyz”);

Note: Frames located by using name are constantly given priority over those located by ID.

Switch to the frame using WebElement

In this case, we will create a web element and passes it to the method for switching to the frame.

For example,

HTML code

<div>
   <iframe name=”abcd” >
      <p> first frame</p>
   </iframe>
   <iframe name=”xyz” >
      <p> second frame</p>
   </iframe>
</div>

If I want to access first frame then the syntax will be as follows,

WebElement element=driver.findElement(By.name(“abcd”));
driver.switchTo.frame(element);

Switch to parent frame without passing any values

If we are switched to any frame inside the webpage and wants to come back to parent frame then this method helps you to do so.

If you are already on the parent frame then it stays there only.

Syntax goes like this,

driver.switchTo().parentFrame();

Let me take a real-time example and show you how it actually works.

Here I’m taking Timesjobs login page for my example.

Manual Test

1. Open the URL - http://www.timesjobs.com/
2. Click on Sign in link
3. Enter Login Id and Password
4. Click sign in button
5. Verify homepage displayed or not

Selenium script

driver.get("http://www.timesjobs.com/");
driver.findElement(By.xpath ("//a[.='Sign In']")).click();
driver.findElement(By.id("j_username")).sendKeys("[email protected]");
driver.findElement(By.id("j_password")).sendKeys("a56#tyhg");
driver.findElement(By.xpath("//input[@value='SIGN IN']")).click();
WebElement element = driver.findElement(By.xpath("//a[.=’Edit Profile’]"));
Assert.assertNotNull(element);

We hope our code works fine and passes the test case but not, because here the login form is embedded in a frame.

So before entering login information, we need to switch to a frame.

Here login info is embedded in two nested frames.

So we need to switch to both of these frames.

Updated Selenium script

driver.get("http://www.timesjobs.com/");
driver.findElement(By.xpath ("//a[.='Sign In']")).click();
driver.switchTo().frame("GB_frame1");
driver.switchTo().frame(“GB_frame");
driver.findElement(By.id("j_username")).sendKeys("[email protected]");
driver.findElement(By.id("j_password")).sendKeys("a56#tyhg");
driver.findElement(By.xpath("//input[@value='SIGN IN']")).click();
driver.switchTo().parentFrame();
WebElement element = driver.findElement(By.xpath("//a[.='Edit Profile']"));
Assert.assertNotNull(element);

Now, this works fine and the test passes.

This is how we handle frames in Selenium.

I hope you find this article useful. Please provide your valuable feedback, questions, or comments about this article.