You’ll commonly encounter instances where you need to manage frames or iframes while running Selenium test automation.This article is all about how to handle iFrame using WebDriverIO JavaScript. I am going to explain about iFrame and how you can automate iFrame using WebDriverIO JavaScript. Handling iFrame and Frame in WebDriverIO is very easy. We will see other important iFrame and Frame related topics that will help you write fast and easy automation scripts. 

E.g what are the different iFrame methods supported by WebDriverIO and also we will look into a single iFrame and nested iFrame. We learn what is the difference between iFrame and Frame. All these we learn using code. So, read the whole topic to learn about iFrame.

What is iFrame in Website

The iFrame is a small HTML code presented inside the main HTML page. Users can not see while accessing the website. The iFrame can be find using different ways;

• Browser Console tab
• Browser Element tab
• Using XPath in Browser Console 

What is different between iFrame and Frame

<iFrame> is known as an inline frame. It can be used inside the webpage document with a border and scrollbar visible. When we compare with <Frame> is used with <frameset> tag which divides the web window into multiple sections. iFrame can be placed anywhere in the document. Both tags are used for placing new HTML documents within the page. 

Note: The <frame> tag deprecated in HTML5. 

Browser Console tab

Browser Element tab

Using XPath in Browser Console 

Once, you find the iFrame using the above technique, it is easy to find which iFrame element is present. Apart from this, we should know the technical terms when automating iFrame using WebDriverIO. I will try to explain to you using the below image. 

Main iFrame/Default iFrame

This is the HTML page where all nested iFrame is presented. By default when you open a browser using automation script, you will land on default or main iFrame only. 

Inner iFrame

This is the inner iFrame which you can find inside the main iFrame. Remember that there could be multiple inner iFrames inside the main iFrame. 

Nested iFrame

Sometime, you will find one more iFrame inside the inner iFrame, that is called a nested iFrame. Remember that you can not directly access the nested iFrame element. You need to travel to iFrame. 

Current iFrame

The current iFrame is the frame where you are working. The frame could be the main iFrame, inner iFrame, or nested iFrame. 

Parent iFrame

When you are inside the inner iFrame then the main iFrame is known as parent iFrame. Parent iFrame is the immediate top iFrame of current iFrame. 

Thumb rule when interacting with the iFrame element is that you should be into the frame of that element then only you can perform an operation on that element. 

How to handle iFrame using WebDriverIO

Before knowing how to handle iFrame using WebDriverIO, We should know how to switch to iFrame. Using below syntax you can switch to the frame. 

Syntax:

browser.switchToFrame(“ID|name|Index”);

Below is the sample iFrame HTML tag, We will try to learn how to identify iFrame different ways; 

<iFrame id=”mce_0_ifr” src=”javascript:&quot;&quot;” name=”textEditor” frameborder=”0″ allowtransparency=”true” title=”Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help” style=”width: 100%; height: 100px; display: block;”></iFrame>

• With ID
• With Name 
• As an Element 
• With Index

ID: As per above Example, you can find the iFrame with help of giving id as a parameter

e.g

browser.switchToFrame(“mce_0_ifr”);

Name: As per the above example, if you want to find the iFrame using the name parameter then use the below example.

e.g

browser.switchToFrame(“textEditor”);

As an Element: Sometimes, you will find difficulty to identify iFrame using the name or id because it has used for another frame name as well. For such a case, we can find elements as a normal web element and take reference of it and switch to it.  

Sample HTML code: 

<iFrame id=”mce_0_ifr” src=”lamdaTest1.html” name=”textEditor” frameborder=”0″ allowtransparency=”true” </iFrame><iFrame id=”mce_0_ifr” src=”lamdaTest2.html” name=”textEditor” frameborder=”0″ allowtransparency=”true” </iFrame><iFrame id=”mce_0_ifr” src=”lamdaTest3.html” name=”textEditor” frameborder=”0″ allowtransparency=”true” </iFrame>

E.g if you want to find the second iFrame which src=”lamdaTest2.html” then use the below code. 

browser.switchToFrame(“//iFrame[@src=’lamdaTest2.html’]”);

Index: If you are a beginner and it is difficult to locate iFrame using the above mentioned technique or sometimes, the developer has not given name or id, in such case, the index will help you to find the iFrame. WebDriverIO automatically assigns an index to each iFrame and it starts with an index 0 by default. 

<iFrame src=”lamdaTest1.html” frameborder=”0″ allowtransparency=”true” </iFrame> <iFrame src=”lamdaTest2.html” frameborder=”0″ allowtransparency=”true” </iFrame> <iFrame src=”lamdaTest3.html” frameborder=”0″ allowtransparency=”true” </iFrame>

E.g. If you want to find iFrame where src=”lamdaTest3.html” then use below code;

browser.switchToFrame(“2”);

Now we will see how to handle single iFrame using different ways;

Scenario: Read words presented in the editor present at this URL: http://the-internet.herokuapp.com/iFrame and identify iFrame using index

describe(“iFrame Examples”, function () {   it(“iFrame using index”, function () {       browser.url(“http://the-internet.herokuapp.com/iFrame”);       browser.pause(5000);       $(“=Frames”).click();       $(“=iFrame”).click();       browser.pause(5000);       browser.switchToFrame(0);       browser.pause(5000);       console.log(“Editor text” + $(“p”).getText());   }); });

Code Walkthrough:

Output :

Scenario: Read words presented in the editor present at this URL: http://the-internet.herokuapp.com/iFrame and identify iFrame using as an Element

describe(“iFrame Examples”, function () {   it(“iFrame using as an element”, function () {       browser.url(“http://the-internet.herokuapp.com/iFrame”);       browser.pause(5000);       $(“=Frames”).click();       $(“=iFrame”).click();       browser.pause(5000);       const ifrObject = $(“.//iFrame[@allowtransparency=’true’]”);       browser.switchToFrame(ifrObject);       browser.pause(5000);       console.log(“Editor text” + $(“p”).getText());   }); });

Code Walkthough

Output :

Scenario: Read the words presented in the editor present at this URL: http://the-internet.herokuapp.com/iFrame and identify iFrame using an ID

describe(“iFrame Examples”, function () {   it(“iFrame using ID”, function () {       browser.url(“http://the-internet.herokuapp.com/iFrame”);       browser.pause(5000);       $(“=Frames”).click();       $(“=iFrame”).click();       browser.pause(5000);       const ifrObjectId = $(“#mce_0_ifr”);       browser.switchToFrame(ifrObjectId);       browser.pause(5000);       console.log(“Editor text” + $(“p”).getText());   }); });

Code Walkthrough:

Output: 

Scenario: Read the words presented in the editor present at this URL: http://the-internet.herokuapp.com/iFrame and identify iFrame using a name. 

describe(“iFrame Examples”, function () {   it(“iFrame using Name”, function () {       browser.url(“http://the-internet.herokuapp.com/iFrame”);       browser.pause(5000);       $(“=Nested Frames”).click();       browser.pause(5000);       const ifrObjectName = $(‘[name = “frame-middle”]’);       browser.switchToFrame(ifrObjectName);       browser.pause(5000);       console.log(“text” + $(“#content”).getText());   }); });

Note: This selector strategy is deprecated and only works in old browsers that are run by the JSONWireProtocol protocol or by using Appium. 

How to work with Multiple iFrames

Now, we will see if you have multiple iFrames and you want to jump from one iFrame to another iFrame and switch to the main frame. Below is example with steps:

• Open URL
• Read default page text
• Switch to IF1 and read the text
• Switch to default page back 
• Switch to IF2 and read the text
• Switch to default page back 
• Read default page text

describe(“iFrame Examples”, function () {it(“Handling Multiple iFrame and switch to parent Frame”, function () {       browser.url(“http://localhost:9292”);       browser.pause(5000);       $(“=Frames”).click();       browser.pause(5000);       $(“=iFrame Example”).click();       console.log(“Reading from default content ” + $(“.//p”).getText());       const ifrObjectId = $(“#IF1”);       browser.switchToFrame(ifrObjectId);       console.log(“Reading from IF1 : ” + $(“.//body”).getText());       browser.switchToParentFrame();       const ifrObjectId1 = $(“#IF2”);       browser.switchToFrame(ifrObjectId1);       console.log(“Reading from IF2 : ” + $(“.//body”).getText());       browser.switchToFrame(null);       console.log(“Reading from default content ” + $(“.//p”).getText());   }); });

Note: browser.switchToFrame(null) is equal to browser.switchToParentFrame(). If you want to jump to the direct main page from the inner iFrame then you can directly use browser.switchToFrame(null). 

Output: 

How to find the number of iFrame in the page?

Sometimes, it is difficult to find the element in the given iFrame. This could happen when the developer has not given a name or id to find it. In such a case, you need to loop one by one iFrame and find the element. So you need to find how many iFrames are present in the page. Below code will help you to find the number of iFrame exists in the page. 

describe(“iFrame Examples”, function () {   it(“Count iFrame”, function () {       browser.url(“http://localhost:9292”);       browser.pause(5000);       $(“=Frames”).click();       browser.pause(5000);       $(“=iFrame Example”).click();       console.log(“iFrame Count: ” + $$(“.//iFrame”).length);   });   });

How to handle Frame exists in the frameset in the page?

Frameset is nothing but simple element which help to create frame inside the frameset. When you see frameset you do not have to write special code to go inside the frameset. Always focus on iFrame or frame. We will see how to deal with frames present inside the frameset. Below is the screenshot where we will try to read LEFT word present inside the frame. 

First, We will switch to frame-top and then switch again to frame-left.

describe(“iFrame Examples”, function () {     it(“Frameset Example “, function () {       browser.url(“http://the-internet.herokuapp.com/nested_frames”);       browser.pause(5000);       $(“=Frames”).click();       $(“=Nested Frames”).click();       browser.pause(5000);       const cnt = $$(“.//iFrame”).length;       console.log(cnt);       const parentFrame = $(“.//frame[@name=’frame-top’]”);       browser.switchToFrame(parentFrame);       const topLeftFrame = $(“.//frame[@name=’frame-left’]”);       browser.switchToFrame(topLeftFrame);       const bodyText = $(“.//body”).getText();       console.log(bodyText);         }); });

Code Walkthrough:

Frame Top

Frame Left

Output: 

Summary

We have seen that iFrame and frame is a different element in the website and to handle it we have to use switchToFrame() method. When you want to change iFrame and frame then you need to come back to the main default context using switchToFrame(null). Given examples gives you a more clear and detailed explanation on how to work with iFrame using WebDriverIO. Additionally, We have seen how to handle multiple frames and count the number if iFrame. Similar way we can handle frame tags as well. No difference to handle frames. It’s written differently in HTML but when it comes to automating both frames and iFrame can be handled similarly. You may perform automated browser testing of websites (or web apps) that use pop-up windows, nested frames (or iFrames), and browser windows with Selenium test automation by utilizing the SwitchTo() command.

So, this is all about iFrame and Frame and I hope you enjoyed the reading.