🔲
Frame/iFrame
In Selenium, both frame and iframe (Inline Frame) concepts refer to elements
that allow you to embed one HTML page inside another. While they are very
similar, there are slight differences in how they are treated in HTML and how
Selenium interacts with them. Below, I’ll explain both concepts in detail and how
they are handled in Selenium with Java.
1. Frame Concept in Selenium:
In HTML, a <frame> element was used to display multiple documents within a
single browser window. The <frameset> tag was used to create frames, and
each frame could load different content. However, <frame> and <frameset>
elements are obsolete in HTML5 and replaced by iframes.
In Selenium, interacting with frames (including legacy <frame> elements) is
similar to working with iframes. You can switch to a frame and interact with its
elements using the switchTo().frame() method.
Handling Frame in Selenium:
Example with Frame:
<frameset cols="50%, 50%">
<frame src="page1.html" name="frame1">
<frame src="page2.html" name="frame2">
</frameset>
In Selenium, if you need to switch to one of these frames, you would use the
switchTo().frame() method with the name or index of the frame.
Example in Java:
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
Frame/iFrame 1
import org.openqa.selenium.chrome.ChromeDriver;
public class FrameExample {
public static void main(String[] args) {
// Set the path for your WebDriver (e.g., ChromeDri
ver)
System.setProperty("webdriver.chrome.driver", "pat
h/to/chromedriver");
// Instantiate the WebDriver
WebDriver driver = new ChromeDriver();
try {
// Navigate to a page with frames
driver.get("https://example.com"); // Replace
with actual URL with <frame> or <frameset> elements
// Switch to the first frame by name or index
driver.switchTo().frame("frame1"); // Switch t
o frame by name
WebElement elementInsideFrame = driver.findElem
ent(By.id("elementInsideFrame"));
elementInsideFrame.click(); // Example action
inside frame
// Switch back to the main content
driver.switchTo().defaultContent();
// Continue interacting with elements outside t
he frame
WebElement mainPageElement = driver.findElement
(By.id("elementOutsideFrame"));
mainPageElement.click(); // Example action out
side the frame
} finally {
driver.quit(); // Close the driver after the o
perations
}
Frame/iFrame 2
}
}
Key Methods for Frames in Selenium:
1. switchTo().frame(int index) : Switches to a frame by its index (0-based).
driver.switchTo().frame(0); // Switch to the first fram
e
2. switchTo().frame(String nameOrId) : Switches to a frame by its name or ID.
driver.switchTo().frame("frame1"); // Switch to a frame
by name or ID
3. switchTo().frame(WebElement frameElement) : Switches to a frame by its
WebElement.
WebElement frameElement = driver.findElement(By.xpath
("//frame[@name='frame1']"));
driver.switchTo().frame(frameElement); // Switch to fra
me by WebElement
4. switchTo().defaultContent() : Switches back to the main page content (outside
of all frames).
driver.switchTo().defaultContent(); // Switch back to t
he main page
2. Iframe Concept in Selenium:
An iframe (Inline Frame) is a more modern way of embedding one HTML
document inside another. The <iframe> element is widely used in web
applications to display third-party content such as ads, videos, or embedded
forms. Unlike frames, which are often defined using the <frameset> and <frame>
tags, an iframe is a single, self-contained object.
Handling Iframe in Selenium:
Frame/iFrame 3
In Selenium, working with an iframe requires switching into it before interacting
with its elements, as elements inside an iframe are not directly accessible from
the parent page.
Example with Iframe:
<iframe id="iframeId" src="iframePage.html"></iframe>
You can switch to the iframe using the switchTo().frame() method, interact with
its elements, and then switch back to the main page.
Example in Java:
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.openqa.selenium.support.ui.ExpectedConditions;
public class IframeExample {
public static void main(String[] args) {
// Set the path for your WebDriver (e.g., ChromeDri
ver)
System.setProperty("webdriver.chrome.driver", "pat
h/to/chromedriver");
// Instantiate the WebDriver
WebDriver driver = new ChromeDriver();
try {
// Open a website with an iframe
driver.get("https://example.com"); // Replace
with the actual URL of your test page
// Wait for the iframe to be available (if requ
ired)
WebDriverWait wait = new WebDriverWait(driver,
10);
Frame/iFrame 4
wait.until(ExpectedConditions.frameToBeAvailabl
eAndSwitchToIt(By.id("iframeId"))); // Use the iframe ID
// Now that we're inside the iframe, we can int
eract with elements within it
WebElement iframeElement = driver.findElement(B
y.id("elementInsideIframe"));
iframeElement.click(); // Example action insid
e iframe
// Switch back to the main content (outside the
iframe)
driver.switchTo().defaultContent();
// Continue interacting with elements outside t
he iframe
WebElement mainPageElement = driver.findElement
(By.id("elementOutsideIframe"));
mainPageElement.click(); // Example action on
the main page
} catch (Exception e) {
e.printStackTrace();
} finally {
// Close the driver after the operations
driver.quit();
}
}
}
Key Methods for Iframes in Selenium:
1. switchTo().frame(int index) : Switch to an iframe by its index (0-based).
driver.switchTo().frame(0); // Switch to the first ifra
me
2. switchTo().frame(String nameOrId) : Switch to an iframe by its name or ID.
Frame/iFrame 5
driver.switchTo().frame("iframeId"); // Switch to ifram
e by name or ID
3. switchTo().frame(WebElement frameElement) : Switch to an iframe by its
WebElement.
WebElement iframe = driver.findElement(By.id("iframeI
d"));
driver.switchTo().frame(iframe); // Switch to iframe us
ing WebElement
4. switchTo().defaultContent() : Switch back to the main content (outside the
iframe).
driver.switchTo().defaultContent(); // Switch back to t
he main page
5. switchTo().parentFrame() : Switch back to the parent frame (if inside nested
iframes).
driver.switchTo().parentFrame(); // Switch back to the
parent frame
Summary:
Frames: These are legacy HTML elements that are now rarely used,
replaced by iframes. They are usually nested within <frameset> elements.
Iframes: More modern and commonly used, they allow embedding content
from another page within a page. Selenium can handle iframes by switching
to them before interacting with their content.
In both cases, the process of switching between frames and the main content
remains similar, with methods like switchTo().frame() , switchTo().defaultContent() ,
and switchTo().parentFrame() .
Frame/iFrame 6
Details concept for Frame and IFrame
Website: https://ui.vision/demo/webtest/frames/
If we have third party page which we have to test then we can not use directly
so we can use it by switching command of Frames/iframes.
In Above image last is Name
Frame/iFrame 7
Code For Frames concept
WebDriver driver= new ChromeDriver();
WebDriverWait mywait= new WebDriverWait(driver,Duration. ofSeconds (10));
driver.get("https://ui.vision/demo/webtest/frames/");
driver.manage().window().maximize();
WebElement Frame1=driver.findElement(By. xpath ("//frame[@src='frame_1.html']"));
driver.switchTo().frame(Frame1);
driver.findElement(By. xpath ("//input[@name='mytext1']")).sendKeys("welcome");
driver.switchTo().defaultContent();
WebElement Frame2=driver.findElement(By. xpath ("//frame[@src='frame_2.html']"));
driver.switchTo().frame(Frame2);
driver.findElement(By. xpath ("//input[@name='mytext2']")).sendKeys("Vignesh");
WebElement Frame3=driver.findElement(By. xpath ("//frame[@src='frame_3.html']"));
driver.switchTo().frame(Frame3);
// Inner Frame which is part of frame 3
driver.switchTo().frame(0); // Switching to iframe using Index.
//driver.findElement(By.xpath("//div[@id='i9']//div[@class='AB7Lab Id5V1']")).click();
// If we are getting Exemption then we can use Java Script executer
WebElement rdbutton=driver.findElement(By. xpath ("//div[@id='i9']//div[@class='AB7Lab
Id5V1']"));
JavascriptExecutor js=(JavascriptExecutor)driver;
js.executeScript("arguments[0].click", rdbutton);
driver.switchTo().defaultContent();
Frame/iFrame 8
