logo logo

How to Handle iFrames using Selenium

main post image

Selenium is by far the most popular open source automation framework for functional testing of web applications, with over 81% of respondents using it, according to our State of Open Source Testing 2020 Report. While many users find it easy to get going with Selenium, they can often get tripped up with more complex test scenarios, which cannot be handled easily. In our experience working with tens of thousands of different web applications, we have found that the most common challenges in automating with Selenium on its own include the following: iFrames, Dynamic Elements, Hover Menus, PopUps, Waits and Timeouts, Browser Variations, Testing Across Tabs/Windows.

In this article, we will focus on iFrames and discuss what they are, how are they different from Frames and how can we handle iFrames using Selenium. Let’s get started! 🎯

Table of Contents – How to Handle iFrames using Selenium

  1. What are iFrames
  2. What is the difference between Frames and iFrames?
  3. How to identify iFrames on a page?
  4. Selenium Methods on Handling iFrames
  5. Using TestProject to Handle iFrames
  6. Example and HTML Test Reports
  7. Summary

What are iFrames?

An iFrame is a webpage within another webpage: The <iframe> tag specifies an inline frame, an inline frame is used to embed another webpage inside the current HTML page. They are commonly used in more complex packaged applications like Salesforce and SAP. Additionally, they are a popular way of embedding 3rd party content (like ads) into a webpage.

Working with iFrames using Selenium is not an easy task. You must build sound logic using code to select the right frame to interact with. Otherwise, Selenium will fail to find your locator, since it is looking in the wrong place to begin with.

What is the difference between Frames and iFrames?

iFrames are meant to include entire web pages inside an existing webpage. Frames allow you to split the screen into different pages (horizontally and vertically), and displays a different document in each part. Both iFrame and Frames are equally secured.

How to identify iFrames on a page?

With TestProject’s Smart Test Recorder, you can easily identify iFrames. By clicking on the Locator tab inside the recorder, you can search for an element, and when evaluating the location of the element, it will also state in which iFrame the element is located.

As you can see in the image below, the locator shows all the iFrames present on the web page, as well as shows in which Frame the element is located in.

identify iFrames on a page with TestProject Smart Test Recorder

Selenium methods handling iFrames

Selenium WebDriver handles iFrames with the switchTo() method. Below are code examples for how it will look like using Python and Java.

In Python:

iframe = self.driver.find_element(By.XPATH, "//iframe")
self.driver.switch_to.frame(iframe)

In Java:

WebElement element = driver.findElement(By.xpath("//iframe"));
driver.switchTo().frame(element);

You can also switch to an iFrame by the Index of the frame. In Java:

driver.switchTo().frame(0); // Index 0 for example

In addition, you can switch to the iFrame by ID or name, just supply the ID or name of the iFrame. In Java:

driver.switchTo().frame(“frameone”); // frameone is the ID of the iFrame

After switching to an iFrame, Selenium also provides a quick way to switch to the parent frame:

driver.switchTo().parentFrame();

Using TestProject to Handle iFrames

TestProject provides various ways of handling iFrames in recorded tests as well as coded tests.

Using the TestProject OpenSDK

With the TestProject OpenSDK (supporting Java, Python and C#), the syntax for switching iFrames is the same as pure Selenium, just as shown above. The only difference is the driver, which is imported from the SDK itself, which extends Selenium capabilities:

import io.testproject.sdk.drivers.web.ChromeDriver;//Chrome driver for example

After importing the driver from the SDK, the syntax is pure Selenium.

Using the TestProject Smart Test Recorder

Using the TestProject Smart Test Recorder, you can easily locate and interact with elements inside iFrames. When Recording and interacting with elements, the recorder will capture the iFrames automatically. You can see that in this window, we have an iFrame:

TestProject's recorder will capture the iFrames automatically

By interacting with the elements inside, they will be automatically captured and the iFrame which holds them will be listed in the context menu.

iFrames

The step will be created, and the menu of the step will open:

TestProject Smart Test Recorder Step Editor

In the advanced options, under Context, we will see the locator of the iFrame which was captured automatically.

iFrame Locator

In case the locator of the iFrame changes, we can also edit/add iFrames by pressing the ‘Add Context’ Button.

Edit iFrames with TestProject Smart Test Recorder

As we can see, the position of the locator is important, it indicates within the recorder the hierarchy of the iFrames. In this case, we have two iFrames: iFrameOne and iFrameTwo, where iFrameOne holds iFrameTwo inside. When the tests run, it will traverse the Hierarchy of the iFrames, expecting the element to be in the nested iFrame called iFrameTwo. You can switch the position by clicking the Arrow button.

Example Test and HTML Test Reports

Let’s go through an Example test in which we will scroll inside the iFrame, type text into a field and get the text on an element inside, and validate it. I recommend opening this example test to walkthrough it along with this tutorial 😉

1. Scroll in the iFrame: we will use the Action ‘Scroll to Element with JavaScript’ on the element we wish to scroll to.

Scroll to Element with JavaScript Addon

2. Type the text inside the element, using the ‘Type Text’ action:

TestProject Type Text Action

3. Get the text of the element after the scroll, using the ‘Get Text’ action:

TestProject Get Text Action

4. Validate the text received using the Validation Feature:

TestProject Validation
TestProject Validation

 

Now we can execute the test, and see the real-time HTML test reports:

1. Execute the Test:

Execute TestProject Test

2. View the Test Report:

TestProject HTML Test Report

Summary

With TestProject Recorder we can easily and automatically capture elements in iFrames, and when the need arises for manual intervention, we can add context with a click of a button.

We also saw that the OpenSDK offered by TestProject is pure Selenium syntax, so if you integrate your existing Framework with the TestProject OpenSDK, there is no need to change your code besides changing the Driver!

Here is a direct link to grant you full access to the example test shared with you via TestProject: https://app.testproject.io/#/shared-tests/with-me?s_token=DVFbnoTXS0idnpS_w-Mwzg

Happy Testing 🙂

Ran Tzur

About the author

Ran Tzur
Senior Solution Engineer at TestProject that loves Python and Java, but loves tennis and building my own PC’s even more! Willing to build a robot that will win all my tennis matches 🎾🤖

Join TestProject Community

Get full access to the world's first cloud-based, open source friendly testing community. Enjoy TestProject's end-to-end test automation Platform, Forum, Blog and Docs - All for FREE.

Join Us Now  

Leave a Reply

popup image

Selenium for Teams

Sharing and distributing Selenium tests has never been so easy! With TestProject's FREE Selenium based platform, you can finally create awesome tests with the freedom to collaborate with your team effortlessly.
Sign Up Now right arrow
FacebookLinkedInTwitterEmail