Protractor Tutorial: Handling iFrames & Frames in Selenium

Difference Between iFrames And Frames

<frameset rows = "20%,60%,20%">

<frame id= "top" name = "frame1" src = " / html/ frame_top.htm" />

<frame id= "main" name = "frame2" src = " / html / frame_main.htm" />

<frame id= "side" name = "frame3" src = " / html / frame_side.htm" />

</frameset>

How To Find iFrame Or Frame In Protractor

By Element

Xpath for 1st iFrame : //iframe[@src='first.html']
Xpath for 2nd iFrame : //iframe[@class='second']
//finding frame using xpath to handle frames in Selenium for Protractor testing//
<iframe id="ifr" name="first" src="first.html" height="150" width="250"></iframe>

<iframe id="ifr" name="second" class='second' src="second.html" height="150" width="250"></iframe>

<iframe id="ifr" name="third" src="third.html" height="150" width="250"></iframe>

// navigating to the first frame //
browser.switchTo().frame(element(by.xpath("//iframe[@src='first.html']")).getWebElement())

By Index

//finding frame using index to handle frames in Selenium for Protractor testing//
<iframe id="ifr" name="first" src="first.html" height="150" width="250"></iframe>

<iframe id="ifr" name="second" class='second' src="second.html" height="150" width="250"></iframe>

<iframe id="ifr" name="third" src="third.html" height="150" width="250"></iframe>

// navigating to the first frame //
browser.switchTo().frame(1)

How To Handle Frames In Selenium With Protractor?

// launches the URL in the browser //
browser.get("http://the-internet.herokuapp.com/iframe");
// using the switchTo() function for switching to the frame //
element(by.xpath(" // label/ span ")).getText().then(function(textValue){
})
// using the switchTo() function for switching to the frame //            browser.switchTo().frame(element(by.id("frame1")).getWebElement());
// the value saved is assigned to the value of the text box element(by.xpath("//input[@type='text']")).sendKeys(textValue);
//Handle frames in Selenium with for Protractor testing//

// import all the required modules from selenium web driver and protractor

import { Alert } from 'selenium-webdriver';

import { browser, element, by, ExpectedConditions, protractor} from 'protractor'


// describing the test to handle frames in Selenium //
describe('Frame Demonstration in Protractor', function() {
browser.ignoreSynchronization = true; // disable synchronization for non angular websites //

// tests to handle single iframe in protractor //
it('Tests to handle single iframe in protractor', function() {

// launch the url in the browser //
browser.get("http://the-internet.herokuapp.com/iframe");
browser.manage().timeouts().implicitlyWait(5000);

// locate the frame element //
element(by.xpath(" // label/ span ")).getAttribute("innerTextValue").then(function(textValue){

// using the switchTo() function for switching to the frame // browser.switchTo().frame(element(by.id("frame1")).getWebElement());
// the value saved is assigned to the value of the text box
element(by.xpath("//input[@type='text']")).sendKeys(textValue);
})
});
});

Handling Multiple Frame and Nested Frames in Protractor

// open the URL in the browser
browser.get("http://the-internet.herokuapp.com/nested_frames ");
//find the frame1 and store it in web element //
WebElement frame1 = element(by.id("frame1")).getWebElement();
// using the switchTo() function for switching to the frame //
browser.switchTo().frame(frame1);
// locate the frame 3
WebElement frame3 = element(by.xpath("//iframe[@id='frame3']")).getWebElement();
// navigate to the new frame
browser.switchTo().frame(frame3);
// obtain the element of the checkbox //
WebElement checkbox = element(by.xpath("//input[@type='checkbox']"));
checkbox.isSelected().then(function(checked){
// click the checkbox if it is not selected
if( ! checked ){
checkbox.click();
}
})
// import all the required modules from selenium web driver and protractor// for this Protractor testing tutorial for Selenium test automation

import { browser, element, by, ExpectedConditions, protractor} from 'protractor'
import { Alert, WebElement } from 'selenium-webdriver';

// describing the test to handle frames in Selenium with Protractor demonstration //
describe(' Frame Demonstration in Protractor ', function() {
browser.ignoreSynchronization = true; // disable synchronization for non angular websites //

// tests to handle frames in Selenium with protractor for nested frames //
it(' Tests to handle nested frame in protractor ', function() {
browser.manage().timeouts().implicitlyWait(5000)
// launch the url in the browser //
browser.get("http://the-internet.herokuapp.com/nested_frames");
// locate the frame element //
// store the value in a webelement
WebElement frame1 = element(by.id("frame1")).getWebElement();
// navigate to the target frame element //
browser.switchTo().frame(frame1);
// locate the frame 3
WebElement frame3 = element(by.xpath("//iframe[@id='frame3']")).getWebElement();
// navigate to the frame 3
browser.switchTo().frame(frame3);
// locate the element with the checkbox
WebElement checkbox = element(by.xpath("//input[@type='checkbox']"));
// verify whether the checkbox is selected else selected the checkbox by clicking it //
//or perform many other operation to validate the change in frame.
checkbox.isSelected().then(function(checked){
if(! checked){
checkbox.click();
}
})
});
});

Navigate to Parent Frame with the Framework

// using the switchTo() function for switching to the frame //
browser.switchToParentFrame();
// the value saved is assigned to the value of the text box //

element(by.xpath("//input[@type='text']")).sendKeys("selenium");
// using the switchTo() function navigate to the frame at the page level //
browser.switchToParentFrame();
// using the switchTo() function for switching to the frame //
element(By.xpath(" //label/ span ")).getText().then(function(textValue){

});
if(textValue === " protractor test value"){
System.out.println("Topic value is equal to ' protractor test value '");
}
// import all the required modules from selenium web driver and protractor to handle frames in Selenium//

import { browser, element, by, ExpectedConditions, protractor} from 'protractor'
import { Alert, WebElement } from 'selenium-webdriver';

// describing the test for the frame demonstration //
describe(' Frame Demonstration in Protractor ', function() {
browser.ignoreSynchronization = true; // disable synchronization for non angular websites //
// tests to handle parent iframe in protractor //
it(' Tests to handle parent iframe in protractor ', function() {
browser.manage().timeouts().implicitlyWait(5000)
// launch the url in the browser //
browser.get("http://the-internet.herokuapp.com/nested_frames");
// locate the frame element //
// store the value in a webelement
WebElement frame1 = element(by.id("frame1")).getWebElement();
// navigate to the next desired frame i.e. frame1
browser.switchTo().frame(frame1);
// locate the new frame i.e. frame 3 //
WebElement frame3 = element(by.xpath("//iframe[@id='frame3']")).getWebElement();
// using the switchTo method to navigate to frame 3
browser.switchTo().frame(frame3);
// search the frame for the checkbox element by xpath locator
WebElement checkbox = element(by.xpath("//input[@type='checkbox']"));
// if check box is not selected then click the checkbox
checkbox.isSelected().then(function(checked){
// if check box is not selected then click the checkbox
if(! checked){
checkbox.click();
}
})
// switch back to the parent frame with the switchToParentFrame i.e, frame 1
browser.switchToParentFrame();

// The stored value is assigned as the value of the text bar
browser.findElement(by.xpath("//input[@type='text']")).sendKeys("protractor");
// again switch to the main parent frame i.e the page level
browser.switchToParentFrame();
// retrieve the value stored in form of the text by xpath locator element(by.xpath("//label/span")).getText().then(function(textValue){
// validate the stored value to check whether it matches with the value of the frame.
if(textValue === "protractor test value"){
console.log("Topic value is equal to 'protractor test value'");
}
});
});
});

Default Content In Protractor

// switch to the page default content
browser.switchTo().defaultContent();
// navigate to the new frame using the switch to frame method //
browser.switchTo().frame(frame2);

// search the tag from the drop down element //
element(by.tagName("select"));
// select the value from the drop down option //
element(by.xpath("//option[text()='TestValue']")).click()
// import all the required modules from selenium web driver and protractor to handle frames in Selenium

import { browser, element, by, ExpectedConditions, protractor} from 'protractor'
import { Alert, WebElement } from 'selenium-webdriver';

// describing the test for the frame demonstration //

describe(' Frame Demonstration in Protractor ', function() {
browser.ignoreSynchronization = true; // disable synchronization for non angular websites //
// tests to handle default content in protractor //
it(' Tests to handle default content in protractor ', function() {
browser.manage().timeouts().implicitlyWait(5000)
// launch the url in the browser //
browser.get("http://the-internet.herokuapp.com/nested_frames ");
//find the frame1 and store it in web element
WebElement frame1 = element(by.id("frame1")).getWebElement();
// navigate to the frame1
browser.switchTo().frame(frame1);
// navigate to the frame 3
WebElement frame3 = element(by.xpath("//iframe[@id='frame3']")).getWebElement();
// navigate to frame 3
browser.switchTo().frame(frame3);
// search for the checkbox
WebElement checkbox = element(by.xpath("//input[@type='checkbox']"));
// verify whether the checkbox is selected else selected the checkbox by clicking it //
checkbox.isSelected().then(function(checked){
//or perform many other operation to validate the change in frame.
if(! checked){
checkbox.click();
}
})

// switch to the page default content
browser.switchTo().defaultContent();
// navigate to the new frame using the switch to frame method //
browser.switchTo().frame("frame2");
// search the tag from the drop down element //
element(by.tagName("select")).click()

// select the value from the drop down option //
element(by.xpath("//option[text()='Avatar']")).click()
}
}

Handling Frames on Online Selenium Grid

// test_config.js //
// The test_config.js file serves as a configuration file for out test case //

LT_USERNAME = process.env.LT_USERNAME || "irohitgoyal"; // Lambda Test User name
LT_ACCESS_KEY = process.env.LT_ACCESS_KEY || "123456789"; // Lambda Test Access key

exports.capabilities = {
'build': ' Automation Selenium Webdriver Test Script ', // Build Name to be display in the test logs
'name': ' Protractor Selenium Frame Test on Chrome', // The name of the test to distinguish amongst test cases //
'platform':'Windows 10', // Name of the Operating System
'browserName': 'chrome', // Name of the browser
'version': '79.0', // browser version to be used
'console':false, // flag to check whether to capture console logs.
'tunnel': false // flag to check if it is required to run the localhost through the tunnel
'visual': false, // flag to check whether to take step by step screenshot
'network':false, // flag to check whether to capture network logs
};

// setting required config parameters //
exports.config = {
directConnect: true,

// Desired Capabilities that are passed as an argument to the web driver instance.
capabilities: {
'browserName': 'chrome' // name of the browser used to test //
},

// Flavour of the framework to be used for our test case //
framework: 'jasmine',

// The patterns which are relative to the current working directory when

protractor methods are invoked //

specs: ['test_frame.js'],
// overriding default value of allScriptsTimeout parameter //
allScriptsTimeout: 99999,
jasmineNodeOpts: {
// overriding default value of defaultTimeoutInterval parameter //
defaultTimeoutInterval: 99999
},
onPrepare: function () {
browser.manage().window().maximize();
browser.manage().timeouts().implicitlyWait(3000);
}
};


// test_script.js //

// import all the required modules from selenium web driver and protractor

import { browser, element, by, ExpectedConditions, protractor} from 'protractor'
import { Alert, WebElement } from 'selenium-webdriver';

var script = require (‘protractor’) ;

var webdriver = require (‘selenium-webdriver’) ;

// Build the web driver that we will be using in Lambda Test
var buildDriver = function(caps) {
return new webdriver.Builder()
.usingServer(
"http://" +
LT_USERNAME +
":" +
LT_ACCESS_KEY +
"@hub.lambdatest.com/wd/hub"
)
.withCapabilities(caps)
.build();
};


// describing the test for the frame demonstration //
describe(' Frame Demonstration in Protractor ', function() {
// disable synchronization for non angular websites //
browser.ignoreSynchronization = true;

// adding the before an event that builds the driver and triggers before the test execution
beforeEach(function(done) {
caps.name = this.currentTest.title;
driver = buildDriver(caps);
done();
});

// tests to handle parent iframe in protractor //
it(' Tests to handle parent iframe in protractor ', function() {
browser.manage().timeouts().implicitlyWait(5000)
// launch the url in the browser //
browser.get("http://the-internet.herokuapp.com/nested_frames");
// locate the frame element //
// store the value in a webelement
WebElement frame1 = element(by.id("frame1")).getWebElement();
// navigate to the next desired frame i.e. frame1
browser.switchTo().frame(frame1);
// locate the new frame i.e. frame 3 //
WebElement frame3 = element(by.xpath("//iframe[@id='frame3']")).getWebElement();
// using the switchTo method to navigate to frame 3
browser.switchTo().frame(frame3);
// search the frame for the checkbox element by xpath locator
WebElement checkbox = element(by.xpath("//input[@type='checkbox']"));
// if check box is not selected then click the checkbox
checkbox.isSelected().then(function(checked){
// if check box is not selected then click the checkbox
if(! checked){
checkbox.click();
}
})
// switch back to the parent frame with the switchToParentFrame i.e, frame 1
browser.switchToParentFrame();

// The stored value is assigned as the value of the text bar
browser.findElement(by.xpath("//input[@type='text']")).sendKeys("protractor");
// again switch to the main parent frame i.e the page level
browser.switchToParentFrame();
// retrieve the value stored in form of the text by xpath locator element(by.xpath("//label/span")).getText().then(function(textValue){
// validate the stored value to check whether it matches with the value of the frame.
if(textValue === "protractor test value"){
console.log("Topic value is equal to 'protractor test value'");
}
});
});
});

It’s A Wrap!

--

--

--

I am a Computer Science Engineer by degree, and a Digital Marketer by heart who works at LambdaTest. A social media maven!!

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Logging in a multi-module Android project

Why I Declined an Offer From a Popular Tech Company

Work meeting

Starting your projects with Boilerplate

Civic Ledger Welcomes 3 New Team Members to Support Our Growth in 2022

My AWS Certification Journey

How do we deploy Java On Aws Ec2

Technologies Q1 2019 Report

Hands-on with Material Components for Android: Chips

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Praveen Mishra

Praveen Mishra

I am a Computer Science Engineer by degree, and a Digital Marketer by heart who works at LambdaTest. A social media maven!!

More from Medium

Run your Selenium Script pushed to GIT repository using Jenkins Job

Install and Configure Jenkins

Login automation using Selenium WebDriver: Tutorial

Create TestNG Project In Eclipse & Run Selenium Test Script