Selenium Webdriver Tutorials

How to handle frames in Selenium Webdriver

Occasionally you will encounter the below error when trying to locate an element. One of the reason might be that the element is present within a frame. And when writing a test against them, you can easily get tripped if you’re not paying attention. You cannot directly identify an element present in an iFrame. First we have to switch to the frame and then we can identify the elements present using normal Selenium locators. In this article let’s see how to handle frames in Selenium Webdriver.

Error:

Exception in thread “main” org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {“method”:”id”,”selector”:”tinymce”}

What is iFrame?

A web page which is embedded in another web page or an HTML document embedded inside another HTML document is known as a frame. It means iframe is actually a webpage within the webpage which have its own DOM for every iframe on the page. The iFrame is often used to insert content from another source, such as an advertisement, into a Web page. The <iframe> tag specifies an inline frame. A Web designer can change an iFrame’s content without making them reload the complete website. A website can have multiple frames on a single page. And a frame can also have inner frames (nested Frames).

Handle frames in Selenium Webdriver

You can easily work with the elements in a frame by telling Selenium to switch to that frame first. For this Selenium provides a driver.switchTo().frame(args) method. Once you have switched to the frame, the rest of your test should be business as usual. Let’s dig in with some examples of how to handle frames in Selenium Webdriver.

How to handle frames in Selenium Webdriver

We cannot detect the frames by just seeing the web page. When you inspect the element to-be-detected, if you find a tag name with ‘iFrame’, it means the web page consists of an iFrame.

  1. Inspect if the element is within an iFrame
  2. Switch to the iFrame
  3. Identify and then perform the required operation on the element
  4. Switch back to main web page

1. Inspect if the element is within an iFrame

For this article, we will be using the iFrame within the URL – http://the-internet.herokuapp.com/tinymce

iFrame is defined by an <iframe></iframe> tag in HTML. With this tag you can identify an iFrame while inspecting the HTML tree.

iFrame HTML Selenium Webdriver

Look out for ID or Name attribute of the frame, i.e. id=”mce_0_ifr” in this case.

2. Switch to iFrame using Selenium Webdriver

How do you transfer the control (switch to) to an iFrame? Simple! Tell Selenium to switch to that frame first. And to handle frames in Selenium Webdriver it provides a driver.switchTo().frame(args) method. Let’s look at some of it’s variations,

How to handle frames in Selenium Webdriver

  • driver.switchTo().frame(int arg0)

Select a frame by its (zero-based) index. Index of an iFrame is the position at which it occurs in the HTML page. That is, if a page has multiple frames (more than 1), the first frame would be at index “0”, the second at index “1” and so on.

  • driver.switchTo().frame(String arg0)

Sometimes when you look at the HTML code of iFrame you will find that it has Name or ID attribute (ID in our case). Switch to a frame by using its name or ID.

  • driver.switchTo().frame(WebElement frameElement)

Here we use a previously located element (within frame) to switch to an iFrame. We can switch to an iFrame by simply passing the iFrame WebElement to the driver.switchTo().frame() method. First find the iFrame element using any of the locator strategies and then passing it to switchTo command.

The catch here is that the element should have been previously detected by switching to the frame via one of the methods above. Only then you can again switch to the same frame using a previously located element.

3. Identify and then perform the required operation on the element

Now that we know how to handle frames in Selenium Webdriver and how we can switch between iFrames, let’s learn how to interact with elements inside an iFrame. Surprise! It’s business as usual. Yeah! Once you switch to an iFrame, to perform operation on elements within that iFrame we use the normal Selenium commands.

4. Switch back to main web page

Now that the control is within an iFrame, if you try identifying an element outside the frame – driver will throw an exception. So the important point here is to switch back to main web page once you are done with iFrame operations. To move back to the parent frame, you can either use switchTo().parentFrame() or if you want to get back to the main web page, you can use switchTo().defaultContent();

Note: In order to work on an element in the middle frame (e.g., a frame nested within another frame), we need to switch to the parent frame (e.g., the top frame) and then switch to the child frame (e.g., the middle frame).

Complete Java code

Hope this article helped you in understanding how to handle frames in Selenium Webdriver. If yes, don’t forget to share it with your friends and colleagues!

Leave a Reply

Your email address will not be published. Required fields are marked *