Handling frames in Selenium WebDriver with Java

Automating the web application which uses iFrames in the webpage is not as easy as automating a normal web application.

What is iFrame ?

iFrame (Inline Frame) is a piece of HTML code, embedded inside the another HTML document. So, the web page may contain multiple iFrames.

iFrame is mainly used to insert the content from other websites, such as advertisements.

How to identify whether a webpage contains iFrame or not?

It is important to know whether your page contains iFrame element or not before automating it. Follow the steps to identify the same.

  1. Open the webpage you want to check for iFrame.
  2. Press F12 Key.
  3. Click on console tab.
  4. Paste window.frameElement, and hit ENTER.

If a web page contains iFrame, then the iFrame tag will be returned on the console as a result or null will be the result.

Now, we will look into handling of such iFrames in Selenium WebDriver with Java.

There are two main operations we need to perform while working with iFrames

  1. Switching to iFrame from main web page
  2. Returning back to main web page from iFrame

Selenium WebDriver API comes with methods to handle such operations.

WebDriver’s switchTo().frame() is an overloaded method used to switch to particular iFrame.

  1. driver.swtichTo().frame(int index) : Switches the control of browser to the zero based integer index passed as a parameter.
  2. driver.swtichTo().frame(String nameOrId) : Switches the control of browser to ID or NAME attribute value passed as a parameter.
  3. driver.swtichTo().frame(WebElement element) : Switches the control of browser to identified WebElement referece passed as a parameter.
  4. driver.switchTo().defaultContent() : Switches the control of browser to the main HTML page.

 

Switch to frame by INDEX : 

Switching to frame by its INDEX, requires us to pass the ZERO based index of an iframe. So, that means if there are 5 frames on web page and we need to switch to second iframe, we must pass 1 as index.

WebDriver driver = new FirefoxDriver();

driver.manage().window().maximize();
driver.get(“https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe”);

driver.switchTo().frame(1);

Switch to frame by ID: 

Switching to frame by its ID, requires us to pass the value of ID attribute as a parameter.

WebDriver driver = new FirefoxDriver();

driver.manage().window().maximize();
driver.get(“https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe”);

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

Switch to frame by NAME: 

Switching to frame by its NAME is more or less similar, and it requires us to pass the value of NAME attribute as a parameter.

WebDriver driver = new FirefoxDriver();

driver.manage().window().maximize();
driver.get(“urlTOBeOpened);

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

Switch to frame by WebElement: 

Switching to frame by passing WebElement reference is another way of switching to iframe. Here, we can use any of the 8 locating strategies to locate an iframe element and pass the reference to switchTo().frame() method.

WebDriver driver = new FirefoxDriver();

driver.manage().window().maximize();
driver.get(“https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe”);

WebElement frameElement = driver.findElement(By.id(“frame_Example1”));

driver.switchTo().frame(frameElement );

Switch back to main web page from frame : 

Once the control goes to a particular frame, we can perform all operations in the same frame. But, if the test script requires further operations to be performed on the main web page, we need to pass the control back to the main web page. If we do not switch back to main web page, and try to access elements, we get NoSuchElementException.

WebDriver driver = new FirefoxDriver();

driver.manage().window().maximize();
driver.get(“https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe”);

WebElement frameElement = driver.findElement(By.id(“frame_Example1”));

driver.switchTo().frame(frameElement );

// perform a set of actions

driver.switchTo().defaultContent();

Why iFrames can not be accessed directly?

When we open the web page using WebDriver’s get(String url) method, the control remains on the parent level web page, it does not go to any inner components. So, we need to explicitly give the control to a particular inner element (iFrame) by using switchTo().frame() method. If we do not switch the frame and try to access elements of a frame, it gives NoSuchElementException.

Let us have a look at below code snippet in action.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;

public class IFramesDemo {

public static void main(String[] args) {
WebDriver driver = new FirefoxDriver();
driver.manage().window().maximize();
driver.get(“https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe”);

// switching by index
driver.switchTo().frame(0);

driver.switchTo().defaultContent();

System.out.println(“H1 content of main page : ”
+ driver.findElement(By.tagName(“h1”)).getText());

// switching by id
driver.switchTo().frame(“frame_Example1”);

driver.switchTo().defaultContent();
System.out.println(“H1 content of main page : ”
+ driver.findElement(By.tagName(“h1”)).getText());

WebElement frameElement = driver.findElement(By.id(“frame_Example2”));

// switching by WebElement
driver.switchTo().frame(frameElement);

driver.switchTo().defaultContent();
System.out.println(“H1 content of main page : ”
+ driver.findElement(By.tagName(“h1”)).getText());

}
}

Hope it helps you!!

Cheers 🙂

Advertisements

#handling-frames-in-webdriver, #switch-to-frame, #switch-to-main-page