Handle Iframes/Frame in WebdriverIO

Table of content

• What is Frame ?
• Difference between Frames and iFrames
• Presence of Frame in WebdriverIO
• Handle frames in WebdriverIO
• Handle single iFrame in webdriverIO
• Handling nested iFrame with webdriverIO
• Navigate to Parent Frame with WebdriverIO
• Default Content
• Possible Routes of iFrame Navigation

We can handle frames/iframes present in the webpage using browser.switchToFrame() command in WebdriverIO. Frame/iFrame is nothing but another webelement in HTML page, which displays another part of the webpage.

If you take a look at the DOM structure of a page that contains an iframe you will never find the inner content of the iframe. And you won't be able to interact with it via the DOM. We have to switch into the frame to see the elements present in the frame.

The below frame page is present at : https://chercher.tech/practice/frames

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

The frame is an HTML tag and used to divide the same web page or same domain into various frames/windows. Used as <frame> tag, it specifies each frame within a frameset tag. Frames are used along with frameset, frameset contains multiple frames.

<frameset rows = "10%,80%,10%">
	<frame id= "first" name = "top" src = "/html/top_frame.htm" />
	<frame name = "main" src = "/html/main_frame.htm" />
	<frame name = "side" src = "/html/side_frame.htm" />
</frameset>

Iframe as <iframe> is also a tag used in HTML but it specifies an in-line frame which means it is used to embed not only the same domain but also other webpages within the current HTML document. It is like a Television, it displays a thing that is present somewhere else.

<iframe id="ifr" name="demo" src="demo.html" height="200" width="300"></iframe>

• Frame requires a frameset, but iframes do not require framesets.
• Placement of Frames is a bit difficult compared with iFrames
• Adjusting the size and width of the Frame is difficult when compared with iFrame.
• Frames cannot contain nested frames (frame inside the frame) but iFrames can contain nested iFrames.
• HTML5 doesn't support Frames but supports iFrames.

Developers try to avoid using Iframes as these are external documents (webpages), so there is a chance of Phishing.

It is important for the tester to check whether an element is inside an iframe/frame or just on the webpage. If the element is inside a frame then we have to switch into the frame to access the element.

1. Right-click on the page (not on the element) which part you want to check.

2. On the right-click options you can find This Frame Option, if this option is present then there is an iframe else there is no iframe 3. Webpage without a frame.

If we want to access any element inside an iframe in WebdriverIO, we must find and switch to that iframe and access the element. WebdriverIO provides two functions to handle the iframes/frames in automation.

• switch to Frame
• exit current frame
• exit all the frames

switchToFrame with WebdriverIO

switchToFrame function in webdriverIO changes the focus to another frame on the page. We can find the iframe/frame using right-click in manual testing, finding the iframe/frame in WebriverIO is a little tricky.

The switch the frame occurs in 4 different ways

Below are the ways to find the iframe/frame:

• Using ID
• Using Name (Not given in Official docs but works)
• Using Element (widely used)
• Using Index

Using ID and Name are looks similar in syntax as these two are overloaded methods, find the examples below.

Using ID :
We can find the frame using Id attribute present in the iframe/frame

<iframe id="ifr" name="demo" src="demo.html" height="200" width="300"></iframe>
// switching to a rame which has id as 'ifr'
browser.switchToFrame("ifr")

Using Name :
We can find the frame using the name attribute present in the iframe/frame

<iframe id="ifr" name="demo" src="demo.html" height="200" width="300"></iframe>
// switching to a frame which has name='demo'
browser.switchToFrame("demo")

Using Element: Most of the time there will be multiple iframe/frame and a few of them may share the same id and name, so in such scenarios, we cannot use id or name for finding the frame. To find the iframe/frame uniquely we have to find it as an element, the way we follow for normal elements.

Here we can use locators ( except id, name, as we used already) like classname, xpath, CSS. We cannot use link text and partial link text as these two are only applicable for anchor tag <a>.

We also should refrain from using tagname locator as there is multiple frames so we may not get the unique element.

Lets consider the below iframes, and xpath for this iframe would be :
Xpath for 1st iFrame : //iframe[@src='demo.html']
Xpath for 2nd iFrame : //iframe[@class='second']

<iframe id="ifr" name="demo" src="demo.html" height="200" width="300"></iframe>
<iframe id="ifr" name="demo" class='second' src="width.html" height="200" width="300"></iframe>
<iframe id="ifr" name="demo" src="width.html" height="200" width="300"></iframe>
// switch to 1st frame
browser.switchToFrame($("//iframe[@src='demo.html']"))

Using Index : WebdriverIO assigns an index to every frame present on the page, using an index is the least preferred way of finding the frame as in future frame position may change when development introduce another frame in between

<iframe id="ifr" name="demo" src="demo.html" height="200" width="300"></iframe>
<iframe id="ifr" name="demo" class='second' src="width.html" height="200" width="300"></iframe>
<iframe id="ifr" name="demo" src="width.html" height="200" width="300"></iframe>
// switch to 1st frame, index starts with 0
browser.switchToFrame(1)

If we want to access any element inside an iframe in webdriverIO, we must find and switch to that iframe and access the element. WebdriverIO throws NoSuchElementFound Exception unless we switch to the iframe.


Scenario : Fetch the value from the Topic (page level) and write it to the topic text bar present in iframe 1

Page Url : https://chercher.tech/practice/frames


Steps to solve scenario :
1. Open the browser and navigate to : https://chercher.tech/practice/frames

browser.url('https://chercher.tech/practice/frames')

2. Get the text from the Topic element and store it in a string.

// store the text value
var textValue = $("//label/span").getText();

3. Switch to the Frame1, the frame has attribute id='frame1' and which is unique so we can use the id way to switch to the frame.

// switch to frame1
browser.switchToFrame("frame1")

4. Find the Text bar in frame1 and enter the stored text.

// set the value of the textbar to the value stored
$("//input[@type='text']").setValue(textValue)

Complete program for handling single frame

describe('WebdriverIO', () => {
	it('Handle iframes with WebdriverIO', () => {
		// open webpage
		browser.url('https://chercher.tech/practice/frames')
		// store the text value
		var textValue = $("//label/span").getText();
		// switch to frame1
		browser.switchToFrame("frame1")
		// set the value of the textbar to the value stored
		$("//input[@type='text']").setValue(textValue)
	});
});

Sometimes we will have multiple and nested iframes in a webpage, if we have nested iframes we have to switch to iframe inside the frame.

We can access only the content of the frame when we are inside a frame, we cannot access it outside the frame or inside any other frame.

Scenario : Check the check box present in the iframe 3 , iframe 3 is present inside iframe 1.

Page Url : https://chercher.tech/practice/frames


The solution to the scenario: Ignoring routine steps (open browser, page, wait)

• Switch to iframe 1 using the browser.switchToFrame() command

// switch to iframe1
browser.switchToFrameframe1);

• Find the iframe 3 and switch to it.

// find the frame 3
var frame3 = $("//iframe[@id='frame3']");
// switch to frame 3
browser.switchToFrame(frame3);

• Find the Check box and click it if it is not already checked.

// find the checkbox
var checkbox = $("//input[@type='checkbox']");
// if check box is not selected then click the checkbox
if(! checkbox.isSelected()){
	checkbox.click();
}

Complete program to handle nested frames.

describe('WebdriverIO', () => {
	it('Handle iframes with WebdriverIO', () => {
		// open webpage
		browser.url('https://chercher.tech/practice/frames')
		// store the text value
		var textValue = $("//label/span").getText();
		// switch to frame1
		browser.switchToFrame("frame1")
		// find the frame 3
		var frame3 = $("//iframe[@id='frame3']");
		// switch to frame 3
		browser.switchToFrame(frame3);
		// find the checkbox
		var checkbox = $("//input[@type='checkbox']");
		// if check box is not selected then click the checkbox
		if(! checkbox.isSelected()){
			checkbox.click();
		}
	});
});

Switch to Parent Frame : switchToParentFrame() method in webdriverio switches the control to outer position(one place) in web page, the outer position could be a frame or page level.

In simple terms, switchToParentFrame() function exits the current frame.

After performing a particular task we have moved out of the frame, otherwise, we cannot access the elements outside the frame.

WebdriverIO provides browser.switchToParentFrame() function to move out of the current frame, once we move out of the frame we can access the elements outside that frame but we cannot access the elements inside that frame

Scenario :

• Check the check box present in the iframe 3, iframe 3 is present inside iframe 1
• After checking the check box, move back to iframe 1 and enter "selenium" text in the topic text bar
• Now move back to page level and compare the topic(header) text is not equal to "selenium webdriver"

Page Url : https://chercher.tech/practice/frames


The solution to Scenario: skipping few steps which were covered in the previous scenario.

1. Switch to iframe 1 and switch to iframe 3, check the checkbox

2. Now we have to navigate back to frame 1 by using browser.switchToParentFrame() method

// navigate to parent frame, which is iframe 1
browser.switchToParentFrame();

3. Find the textbar and enter the "selenium" text in it.

// set the value of the textbar to the value stored
$("//input[@type='text']").setValue("selenium")

4. Now we have to navigate back to the page by using browser.switchToParentFrame() method

// navigate to parent, which is page
browser.switchToParentFrame();

5. Find the topic header element and fetch the text.

// store the text value
var textValue = $("label>span").getText());

6. Compare the topic text with the expected value "selenium webdriver"

if(textValue == "selenium webdriver"){
	console.log("Topic value is equal to 'selenium webdriver'");
}

Complete program to use parent frame method

it('Handle iframes with WebdriverIO', () => {
	browser.url("https://chercher.tech/practice/frames")
	browser.switchToFrame("frame1")
	browser.switchToFrame("frame3")
	var checkbox = $("//input[@type='checkbox']")
	if(! checkbox.isSelected()){
		checkbox.click();
	}
	// navigate to parent frame, which is frame 1
	browser.switchToParentFrame()
	 // set the value of the textbar to the value stored
	$("//input[@type='text']").setValue("selenium");
   // navigate to parent, which is page
	browser.switchToParentFrame();
	// store the text value
	var textValue = $("label>span").getText()
	browser.pause(5000)
	//verify the value matches or not
	expect(textValue).toBe("selenium webdriver")
});

Default Content : switchToFrame(null) method exits all the iframes and places the webdriverio control at the page level whereas switchToParentFrame() method exits the current iframe.

Once we reach page level we cannot access any elements inside the iframe unless we switch to it.


Scenario : Check the check box(frame 3), and select the 'Avatar' option from the Animals dropdown(frame 2).

Page Url : https://chercher.tech/practice/frames

The solution to the scenario :

• Switch to frame 1 and switch to frame 3
• Check the checkbox
• Now exit from all the frames using switchToFrame(null))

// navigate to page level
browser.switchToFrame(null)

• Switch to iframe 2

//switch to frame2
browser.switchToFrame("frame2");

• Select the value from the Animals dropdown

$("select").selectByVisibleText("Avatar")

Complete program for default content in WebdriverIO

it('Handle iframes with WebdriverIO', () => {
	browser.url("https://chercher.tech/practice/frames")
	browser.switchToFrame("frame1")
	browser.switchToFrame("frame3")
	var checkbox = $("//input[@type='checkbox']")
	if(! checkbox.isSelected()){
		checkbox.click();
	}
	// navigate to page level
	browser.switchToFrame(null)
	//switch to frame2
	browser.switchToFrame("frame2");
	//find the dropdown and set value
	$("select").selectByVisibleText("Avatar")
});

The below image explains the possible routes of the iFrame navigation.