Post#58.Handling Frame Or iFrame in Selenium

Frames or iFrames In Selenium WebDriver:

Occasionally you will encounter the below error when trying to locate an element. One of the reasons might be that the element is present within a frame. And when writing a test against them, you can easily get tripped if you’re not paying attention. You cannot directly identify an element present in an iFrame. First we have to switch to the frame and then we can identify the elements present using normal Selenium locators. In this article let’s see how to handle frames in Selenium WebDriver.

Error:

Exception in thread “main” org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {“method”:”id”,”selector”:”tinymce”}

What is iFrame?

A web page which is embedded in another web page or an HTML document embedded inside another HTML document is known as a frame. It means iframe is actually a webpage within the webpage which have its own DOM for every iframe on the page. The iFrame is often used to insert content from another source, such as an advertisement, into a Web page. The<iframe> tag specifies an inline frame. A Web designer can change an iFrame’s content without making them reload the complete website. A website can have multiple frames on a single page. And a frame can also have inner frames (nested Frames).

Difference between Frames and iFrames

Both Frame and iFrame are treated similar manner with Selenium, Selenium does not differentiate them, so we can handle both of them in same way.

Handle frames in Selenium WebDriver

You can easily work with the elements in a frame by telling Selenium to switch to that frame first. For this Selenium provides a driver.switchTo().frame(args) method. Once you have switched to the frame, the rest of your test should be business as usual. Let’s dig in with some examples of how to handle frames in Selenium WebDriver.

How to handle frames in Selenium WebDriver

We cannot detect the frames by just seeing the web page. When you inspect the element to-be-detected, if you find a tag name with ‘iFrame’, it means the web page consists of an iFrame.

1.      Inspect if the element is within an iFrame

2.      Switch to the iFrame

3.      Identify and then perform the required operation on the element

4.      Switch back to main web page

1. Inspect if the element is within an iFrame

For this article, we will be using the iFrame within the URL – http://the-internet.herokuapp.com/tinymce

iFrame is defined by an <iframe></iframe> tag in HTML. With this tag you can identify an iFrame while inspecting the HTML tree.

Look out for ID or Name attribute of the frame, i.e. id=”mce_0_ifr” in this case.

2. Switch to iFrame using Selenium WebDriver

How do you transfer the control (switch to) to an iFrame? Simple! Tell Selenium to switch to that frame first. And to handle frames in Selenium WebDriver it provides a driver.switchTo().frame(args) method. Let’s look at some of it’s variations,

driver.switchTo().frame(int arg0)

Select a frame by its (zero-based) index. Index of an iFrame is the position at which it occurs in the HTML page. That is, if a page has multiple frames (more than 1), the first frame would be at index “0”, the second at index “1” and so on.

driver.switchTo().frame(0); // Switch to frame using index 0

driver.switchTo().frame(String arg0)

Sometimes when you look at the HTML code of iFrame you will find that it has Name or ID attribute (ID in our case). Switch to a frame by using its name or ID.

// Switch to frame using name attribute value

driver.switchTo().frame(“FrameName”);

// Switch to frame using ID attribute value (above HTML)

driver.switchTo().frame(“mce_0_ifr”);

driver.switchTo().frame(WebElement frameElement)

Here we use a previously located element (within frame) to switch to an iFrame. We can switch to an iFrame by simply passing the iFrame WebElement to the driver.switchTo().frame() method. First find the iFrame element using any of the locator strategies and then passing it to switchTo command.

//First find the element using any of locator stratedgy

WebElement iframeElement = driver.findElement(By.id(“tinymce”));

//now use the switch command

driver.switchTo().frame(iframeElement);

The catch here is that the element should have been previously detected by switching to the frame via one of the methods above. Only then you can again switch to the same frame using a previously located element.

3. Identify and then perform the required operation on the element

Now that we know how to handle frames in Selenium WebDriver and how we can switch between iFrames, let’s learn how to interact with elements inside an iFrame. Surprise! It’s business as usual. Yeah! Once you switch to an iFrame, to perform operation on elements within that iFrame we use the normal Selenium commands.

driver.findElement(By.id(“tinymce”)).sendKeys(“Enter text in text-box within a frame”);

4. Switch back to main web page

Now that the control is within an iFrame, if you try identifying an element outside the frame – driver will throw an exception. So the important point here is to switch back to main web page once you are done with iFrame operations. To move back to the parent frame, you can either use switchTo().parentFrame() or if you want to get back to the main web page, you can use switchTo().defaultContent();

// Switch to the parent frame of the current frame

driver.switchTo().parentFrame();

// Switch to the main web page

driver.switchTo().defaultContent();

Note: In order to work on an element in the middle frame (e.g., a frame nested within another frame), we need to switch to the parent frame (e.g., the top frame) and then switch to the child frame (e.g., the middle frame).

Java code

package pack4;

import org.openqa.selenium.By;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.chrome.ChromeDriver;

public class iFrame {

public static void main(String args[]){

System.setProperty("WebDriver.chrome.driver","Path to your chromedriver.exe");

WebDriver driver = new ChromeDriver();

driver.get("http://the-internet.herokuapp.com/tinymce");

driver.manage().window().maximize();

//driver.switchTo().frame(0);

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

driver.findElement(By.id("tinymce")).sendKeys("Enter text in text-box within a frame");

driver.switchTo().defaultContent();

}}