Handling iFrames in Selenium Webdriver

What is Iframe?

IFrame is a web page which is embedded in another web page or an HTML document embedded inside another HTML document.

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.

How to identify the iframe:

We cannot detect the frames by just seeing the page or by inspecting Firebug.

We can identify the iframes using methods given below:

·         Right click on the element, If you find the option like 'This Frame' then it is an iframe.

• Right click on the page and click 'View Page Source' and Search with the 'iframe', if you can find any tag name with the 'iframe' then it is meaning to say the page consisting an iframe.

We can even identify total number of iframes by using below Code.

Int size = driver.findElements(By.tagName("iframe")).size();

How to switch over the elements in iframes using Web Driver commands:

Basically, we can switch over the elements in frames using 3 ways.

·         By Index

·         By Name or Id

·         By Web Element

Switch to the frame by index:

Index is one of the attributes for the Iframe through which we can switch to it.

Index of the iframe starts with '0'.

Suppose if there are 100 frames in page, we can switch to the iframe by using index.

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

·         driver.switchTo().frame(1);

Switch to the frame by Name or ID:

Name and ID are attributes of iframe through which we can switch to the it.

·         driver.switchTo().frame("iframe1");

·         driver.switchTo().frame("id if the element");

Switch to the frame by Web Element:

We can even switch to the iframe using web element .

·         driver.switchTo().frame(WebElement);

How to switch back to the Main Frame

We have to come out of the iframe.

To move back to the parent frame, you can either use switchTo().parentFrame() or if you want to get back to the main (or most parent) frame, you can use switchTo().defaultContent();

             driver.switchTo().parentFrame();

             driver.switchTo().defaultContent();

How to switch over the frame, if we CANNOT switch using ID or Web Element:

Suppose if there are 100 frames in the page, and there is no ID available, in this case, we just don't know from which iframe required element is being loaded (It is the case when we do not know the index of the frame also).

The solution for the above concern is, we must find the index of the iframe through which the element is being loaded and then we need to switch to the iframe through the index.

Below are the steps for finding the index of the Frame by which the element is being loaded by using below snippet

Step 1)

·         Initialize the Firefox driver.

·         Navigate to the "site" site which consisting the iframe.

·         Maximized the window.

Step 2)

int size = driver.findElements(By.tagName("iframe")).size();

Step 3)

Objective for this step would be finding out the index of iframe.

for(int i=0; i<=size; i++){

         driver.switchTo().frame(i);

         int total=driver.findElements(By.xpath("html/body/a/img")).size();

         System.out.println(total);

             driver.switchTo().defaultContent();}

Above "forloop" iterates all the iframes in the page and it prints '1' if our required iframe was found else returns '0'.

Step 4)

driver.switchTo().frame(0);

·         Once you find the index of the element, you can switch over the frame using above command.

·         driver.switchTo().frame(index found from the Step 3);

Step5)

driver.findElement(By.xpath("html/body/a/img")).click();

·         The above code will clicks the iframe or element in the iframe.