How to handle frames using Selenium webdriver

Overview

Selenium is not just a singular tool or an API but consists of many tools such as:

• Webdriver: A Webdriver is the tool we use when we need to automate testing desktop websites or mobile websites. The selenium driver uses the browser automation API.
• IDE: An IDE is a tool we use to develop our Selenium test cases. It is an easy-to-use web extension and is generally the most efficient way to develop test cases.
• Selenium grid: A Selenium grid allows us to run test cases on different machines across different platforms. Control of test case execution is at the local end, which is automatically performed by the remote end when the test cases are executed.

During the automation process, the user has to select different elements using the selection methods provided by Selenium. Some of these elements are enclosed in an iframe tag. Therefore, these elements cannot be selected directly. First, the user has to select this frame and then navigate to the element.

Example

The following example shows a button tag enclosed in an iframe tag.

Explanation

• Line 1: Start a div tag with id="modal".
• Line 2: Start a iframe tag with id="buttonframe" and name="myframe".
• Line 3: Start and end the button tag with the text "Click here."
• Line 4: End iframe tag.
• Line 5: End div tag.

If the button tag is not in the iframe, we will click on the button using the following line of python code.

Code explanation

• Line 1: Click on the element with the tag name as button.

However, we may see a no element error if the page has no buttons outside the iframe. This happens because selenium can only access the elements in the top-level document.

Work with an iframe tag

We must follow the following steps to work with the button inside an iframe.

1. Switch to that specific iframe.
2. Access the required content in an iframe.
3. Leave that iframe.

Switch to an iframe tag and access a button

The web controller offers the following three ways to switch to a frame.

• Using a web element.
• Using a name or ID.
• Using an index.

Let us see an example of each case of accessing the iframe tag and clicking on the button.

Use a web element

Switching using a web element is the most flexible option. We can find the frame using our preferred selector and switch to it.

Explanation

• Line 1: Select an iframe tag using CSS selector and assign it to the variable named iframe.
• Line 2: Switch to the frame saved in an iframe tag.
• Line 3: Select the button tag inside that iframe.

Use a name or ID

We can use the ID or name attribute if our framework has the appropriate attribute. If we have multiple elements on the page with the same ID or name, the first one found is selected.

Code explanation

• Line 1: Switch to the frame using the ID of that specific frame.
• Line 2: Select the button tag inside that iframe.

Using an index

if the page does not have a unique id or tag, then we can use the index to select a specific iframe or other tags from the page

Note: During selection, when we use an element in the code, it returns only the first element, while if we use elements, it will return the list of all elements with the same tag, ID, or name. If there is only one element on the page and we use elements, it will return the list with one element. If the page does not have an element with the selected tag, elements will not return the no element error. Instead, it will return an empty list.

Code explanation

• Line 1: Use elements to get the list of elements with the tag name iframe. Then select the index number 1 and save the selected element in a variable named iframe.
• Line 2: Switch to the frame saved in iframe.
• Line 3: Select the button tag inside that iframe.

Leave a frame

When we are done with the element inside an iframe, we have to move out of that iframe to access the other content of the page which is not in that iframe.

Explanation

• Line 1: Leave the selected iframe and switch back to the page's default content.