Frames in Selenium

Introduction

What comes to your mind on reading the term frames in selenium? Before jumping into the textual definition let's understand it with some analogy.

Consider yourself visiting a museum where various exhibits are housed in various rooms. Although each room has distinctive displays, the walls and doors divide each area from the others. The information is divided into distinct portions or "rooms" with HTML pages when you visit a website that uses frames, just as it is housed within a larger "home" or webpage.

Let's imagine you wish to interact with an exhibit in a specific room; to see and engage with the exhibit's contents, you must visit that room. Similarly, you must first go to a frame on a webpage to interact with components within that frame using Selenium. You can interact with the frame's contents as though it were a different webpage once you are inside it.

For instance, when testing an online store using Selenium, the checkout procedure may be contained inside a frame. You would have to switch to that frame to finalize the purchase and enter your payment details. Just like you cannot see or touch the exhibits in a museum if you do not enter the room, you cannot interact with the payment fields if you do not switch to the frame.

What are Frames in Selenium?

The term "frames" in Selenium refers to segmenting an HTML document into several portions, each of which can contain a separate HTML document. These frames are also referred to as iframes (inline frames). Frames are frequently used when a web page has numerous sections or pages that must be displayed simultaneously or interacted with independently.

To identify frames in selenium switchTo() method can be used. This method enables you to move the Selenium driver's focus to a separate frame on the current web page so that you can interact with its elements. The defaultContent() method can return the focus to the main page once you interact with the frame. Frames can be challenging for web scraping or automated testing since the Selenium driver needs to be able to recognize and interact with each frame's components separately. However, Selenium allows for simple navigation and interaction with frames when we use the switchTo() method properly.

How to Handle Frames in Selenium Using WebDriver Commands?

Now, having learned what are frames in Selenium, let's discuss how to handle frames in Selenium.

We must first identify the frame to handle frames in selenium using WebDriver commands. This can be done in three ways index, by name or id, and by web elements. Selenium WebDriver has a few simple steps to handle frames:

• Switch the driver's focus to the frame using the switchTo().frame() method.
• Using web driver commands, interact with the elements of the frame and perform the operations.
• Switch back to the web content by the switchTo().defaultContent() method.

Let's understand each way in detail.

By Index

Use the switchTo().frame() method in Selenium WebDriver and supply the frame's index as an argument to switch to a frame by index. The index of frames on a page starts from 0, so the first frame is at index 0 the next frame at index one, and so on.

For example:

In this example, the driver is a WebDriver interface instance. The frame() function of the TargetLocator interface, which is returned by the switchTo() method, accepts an integer argument representing the frame index that should be switched. After switching to the frame, we can easily interact with the elements inside the frame using standard web driver commands. When the operations on frames are done, use the switchTo().defaultContent() function to switch back to the main web page.

By Name or ID

You can use the name or ID as a parameter to switch to the frame using the switchTo().frame() method in Selenium WebDriver. It's important to make sure the frame name or ID is unique to the frame because there may be other frames on a page with the same name or ID.

For example:

In this example, the driver is a WebDriver interface instance. The switchTo() method returns the frame() function of the TargetLocator interface, which takes as an argument a string representing the name or ID of the frame to be switched. Using common web driver commands, we can quickly interact with the items inside the frame after switching to the frame. Use the switchTo().defaultContent() function to return to the main web page after completing the operation on the frames.

By Web Element

We can also switch to the frame by web elements. Pass the web element as an argument in the switchTo().frame() method to switch to the frame using web elements. Use any locator method to locate the frame element before providing it to the switchTo command.

For example:

In this example, the driver is a WebDriver interface instance. The frame element is initially located by its ID using a WebDriver command. Then with the help of the switchTo().frame() method, the driver focuses on the selected frame by taking the frameElement web element as an argument. After completing the operations on frames, use the switchTo().defaultContent() method to return to the main web content or page.

Handling Nested Frames in Selenium WebDriver

In Selenium WebDriver, nested frames mean a situation when a web page has numerous frames nested inside a frame. It means a frame also contains frames as its element. Moving the driver's focus to the appropriate frame is important to interact with the items inside a nested frame when using Selenium.

In Selenium WebDriver, managing nested frames involves a similar procedure to handling frames, with the addition of a step to switch the focus between the parent and child frames. Let's look at an example of handling nested frames in Selenium webdriver.

In the above example, we first direct the driver focus to the parent frame by using its ID. After that, using the child frame's ID, we change the focus from the frame inside the parent frame. With the parentFrame() method, we interact with a child frame element before returning the focus to the parent frame. At last, using the defaultContent() method, we interact with an element within the parent frame before returning the focus to the default content.

It's important always to return the focus to the right parent frame when working with nested frames. To return to the top-level frame hierarchy, use the parentFrame() function, and to return to the home page's default content, use the defaultContent() method.