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
- What are iFrames
- What is the difference between Frames and iFrames?
- How to identify iFrames on a page?
- Selenium Methods on Handling iFrames
- Using TestProject to Handle iFrames
- Example and HTML Test Reports
- 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.
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.
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:
By interacting with the elements inside, they will be automatically captured and the iFrame which holds them will be listed in the context menu.
The step will be created, and the menu of the step will open:
In the advanced options, under Context, we will see the locator of the iFrame which was captured automatically.
In case the locator of the iFrame changes, we can also edit/add iFrames by pressing the ‘Add Context’ Button.
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.
2. Type the text inside the element, using the ‘Type Text’ action:
3. Get the text of the element after the scroll, using the ‘Get Text’ action:
4. Validate the text received using the Validation Feature:
Now we can execute the test, and see the real-time HTML test reports:
1. Execute the Test:
2. View the 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 🙂