Hello Folks,

In this post, we will learn :Handling Frames/IFrames in Selenium webdriver”.

What is Frame in HTML?

  • HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document.
  • A frame can be created using <frame> tag in html. The <frame> tag is not supported in HTML5 because of usability and accessibility challenges. 
  • When you use <frameset> you split the visual real estate of a browser window into multiple frames. Each <frame> has it’s own contents and the content in one don’t spill into the next.

Example:
MainWindow.htm:

top_frame.htm:

main_frame.htm:

bottom_frame.html:

Now, open “MainWindow.htm” in a browser. You will see webpage as below:

What is an iFrame?

  • IFrame stands for inline frame which is also a HTML document.
  • An IFrame is an HTML document embedded inside another HTML document on a website. The IFrame HTML element is often used to insert content from another source, such as an advertisement, into a Web page.
  • An IFrame can have its own scrollbars and boarders.
  • We can create an IFrame using <iframe> tag of html.

Example:

Parentwindow.html:

Iframe_content.html:

Save above files in same location and open “Parentwindow.html” in a browser. You will see page as below:

Difference between Frame and IFrame:

  • When you use frameset you split the visual real estate of a browser window into multiple frames. Each frame has it’s own contents and the content in one don’t spill into the next. An iframe, on the other hand, embeds a frame directly inline with the other elements of a webpage. While both frames and iframes perform a similar function – embedding a resource into a webpage – they are fundamentally different.
    • Frames are layout-defining elements.
    • Iframes are a content-adding elements.

Handling of Frame/IFrames in Selenium Webdriver:

Let’s start with example:

We need to perform below actions on MainWindow.htm:

  1. Load MainWindow.htm in browser.
  2. Type “Top Frame” in TopFrame input box.
  3. Type “Main Frame” in mainFrame input box.
  4. Type “Bottom Frame” in bottomFrame input box.

Very easy. Let’s try below code:

When you run above code, you get below output:

You have written locators correctly but still you get NoSuchElementExcpetion. If you try with iframe, you will also get same exception. You can give it a try.

Reason: Reason is Frame/Iframe. Frame/IFrame is in fact also a html document i.e. An html document inside another html document. Selenium Webdriver can locate elements only in current html document. It can not locate any web element which is present inside any frame or iframe directly. We need to switch to required frame/Iframe to locate web element and perform any action which we will see in next post.

If you have doubt, feel free to comment.

If you like my posts, please like, comment, share and subscribe.

#ThanksForReading

#HappySelenium

Leave a Reply