Selenium C# Tutorial: Handling Frames & iFrames With Examples

As an automation tester, one of the challenges you might face while writing your Selenium test automation scripts is handling frames or iFrames in Selenium while performing automated browser testing. While frames are used to split-screen vertically or horizontally, iFrames are used to insert content from other sources such as ads into your website.

While writing your Selenium test automation scripts, you need to know how to handle frames and iFrames in Selenium. The switch command in Selenium C# is used for automating scenarios involving frames or iFrames in Selenium.

In this Selenium C# tutorial, I’ll show you how to handle nested frames and iFrames in Selenium, using SwitchTo() command.

Switch Window Commands For Frames & iFrames in Selenium C#

In order to handle frames and iFrames in Selenium, you first need to know how to identify them. Every window, frames or iFrame in a website has a unique ID called window handle. This window handle remains unchanged throughout the execution of the test scenario and is used to identify different frames or iFrame in Selenium C#.

The window handle is used to switch from one window to another. The switch commands in Selenium C# is accessed by using the SwitchTo method in Selenium WebDriver API.

Here are the Switch Window commands, you’ll require for switching frame or iFrame in Selenium:

1. SwitchTo Frame

A frame is a part of the web page or web browser window that displays content independent of the web container. An inline frame (or iFrame) is an HTML document that is embedded inside another HTML document. Many websites make use of frames and iFrames for showcasing content.

2. SwitchTo DefaultContent

This command selects either the first frame on the web page or the main document (i.e. < main >) when the page contains iFrames.

3. SwitchTo ParentFrame

This command selects the parent frame of the currently selected frame.

Whether it is a frame, alert, or new window (or tab), each of these is identified with their unique Window Handle. It is a unique identifier of the type string that is a pointer to the window as it holds the address to the window.

Selenium C# Tutorial: Handling Multiple Browser Windows

Take this certification to master the fundamentals of Selenium automation testing with C# and prove your credibility as a tester.

Here’s a short glimpse of the Selenium C# 101 certification from LambdaTest:

Handling Nested Frames & iFrames in Selenium C#

Nested Frames and iFrames in Selenium testing are particularly used in websites that have multiple sections and each section has to load a separate HTML document. A frameset is a collection of frames in the browser window. The frameset acts as a parent to the child frames in the window.

The Selenium Java official website uses frames to divide the content into three different sections. Switching between different frames is done using the SwitchTo() command for frames.

The SwitchTo frame command is used to switch to the intended frame (or iFrame). Frame id, frame name, and web element locator are used with the SwitchTo command for switching to the intended frame.

It is necessary to first switch to the Parent Frame before switching to the intended Child Frame.

Learn how to Identify Locators In Selenium WebDriver

Handling Nested Frames Using SwitchTo() Method

A nested frame is a frameset that contains a collection of frames (or sub-frames). A frameset contains three different frames – LEFT, MIDDLE, and RIGHT. The BOTTOM frame is an independent frame.

I’ve used http://the-internet.herokuapp.com/nested_frames, for the demonstration of a frameset.

Before switching to frames, we first switch to the frameset (i.e. parent frame) and use the SwitchTo() command to switch to the Child frame. If you want to switch to MIDDLE frame; first you’d have to switch to its container, i.e. frameset – frame-top, then switch to the intended frame i.e. frame-middle.

Similarly, for switching to the BOTTOM frame, you need to switch to the ParentFrame using the driver.SwitchTo().ParentFrame() command, and then switch to the intended frame by using the SwitchTo() command for BOTTOM frame.

I’ve used NUnit framework for this Selenium C# tutorial, In case you want to know about NUnit in detail, you can refer to NUnit framework for Selenium C#.

Here is the implementation for handling Nested frames in Selenium C#:

For switching to the LEFT frame, you need to perform these steps:

1. Switch to the Parent Frame
2. Switch to the frameset (or container of the LEFT frame): frame-top
3. Switch to the LEFT frame using the CssSelector property. Use the Inspect Tool in Chrome/Firefox to get this property.
4. Use the executescript method of the JavaScriptExecutor interface to run JavaScript on the page so that the current frame can be compared with the intended frame.

To switch to the BOTTOM frame, first switch to the Parent frame and then to the BOTTOM frame.

As seen in the Visual Studio snapshot, the test scenarios pass as the SwitchTo() command is successful in switching to the intended frames.

You can also refer to the below video tutorial on how to handle Windows and Frames in selenium.

Handling iFrames In Selenium Using SwitchTo() Method

For this Selenium C# tutorial, I’ve used Selenium.dev as a test URL for the Selenium test automation case on iFrame handling using SwitchTo(). Switching to an iFrame is done using frame name, frame id, or web selector for the iFrame.

Details of the frames in frameset are obtained using the Inspect Tool in Firefox. The site consists of three separate iFrames – packageListFrame, packageFrame, and classFrame.

Three variants of SwitchTo.Frame() are demonstrated in the example for Selenium C# tutorial for Selenium iFrames:

1. Using Frame Name – SwitchTo().Frame(“frame-name”)
2. Using Frame ID – SwitchTo().Frame(“frame-id”)
3. Using web locators – SwitchTo().Frame(web-driver.FindElement(By.[web-locator](“corresponding web locator”)))

The implementation consists of three test cases. The basic premise of each test case is the same, switching first to the Parent Frame before moving to the intended iFrame. Only difference is the manner in which frames are addressed i.e. id, name, etc.

Every Selenium test automation case for handling iframe in Selenium for automated browser testing starts with switching to the Parent Frame.

Once we are in the Parent frame, we switch to the intended frame using its XPath property.

The three Selenium test automation scenarios pass with the SwitchTo() command successful in switching to the requested frame.

The examples mentioned in this Selenium C# tutorial can be useful in solving frequently encountered problems by Selenium automation testers. The solution to the problem witnessed in SwitchTo() Frame in Selenium with c# is available in the section Handling Nested Frames & iFrames in Selenium C#

Also read: Handling Multiple Browser Windows In Selenium C#

Wrapping it Up

I hope you enjoyed this deep dive into handling frames and iFrames in Selenium C#. By now you should be able to switch between nested frames or iFrames in Selenium C#. In Selenium test automation, by using the SwitchTo() command, you can perform automated browser testing of websites (or web apps) that use pop-up windows, nested frames (or iFrames), and browser windows.

Still up for more learning? In the next article for this Selenium C# tutorial series, I’ll show you how to use Page Object Model in Selenium C#.

Update: We’ve now completed the Selenium C# tutorial series, so in order to help you easily navigate through the tutorials, we’ve compiled the complete list of tutorials, which you can find in the section below.

Selenium C# Tutorials With Examples

In case of any doubts, reach out to us in the comments section so that we can put our best foot forward to solve your test automation problems. Also, share the article with your peers seeking to learn about Selenium testing and handling frame and iframe in Selenium C#. Happy Testing!