Handling iFrames using WebDriver
RSSS

iFrames

Screen Shot 2013-02-22 at 2.22.29 AM
An inline frame is used to embed another document within the current HTML document. It means iframe is actually a webpage within the webpage which have its own DOM for every iframe on the page.

the HTML source code of the webpage that has an iframe will look like the below code.

iframescode

In the above html snapshot there is an iframe embed into an another iframe. And We have to select the outer Iframe to go to inner Iframe and write in the body.

Next We have to come out from the inner iframe to outer iframe and click on OK button

Directly accessing the above elements is not possibe iframes has its own DOM elements and we have to switch to that particular frame and then perform any actions.

Selects the frame 1

driver.switchTo().frame("frame1");

Selects the frame2

driver.switchTo().frame("frame2");

Switching back to the parent window

driver.switchTo().defaultContent(); // you are now outside both frames

There might be situations like, we might not be able to get the iframe values. At that time we can get name by using tagName method.

driver.switchTo().frame(driver.findElements(By.tagName("iframe").get(0));

So, you can actually select an iFrame using the below metthods,

    frame(index)
    frame(Name of Frame [or] Id of the frame
    frame(WebElement frameElement)
    defaultContent()


Let’s have a look at this iframes in the w3schools web page to learn interactively
So, you can tryhere

Screen Shot 2013-02-22 at 1.17.29 AM

In the above image if you look at the html source we have 2 iframes defined
In the Firebug source code, you will see 3 frames shown
1.

iframe id="viewIFRAME";

2.

iframe src = "http://www.w3schools.com">

3.

 iframe src="http://www.assertselenium.com"

It shows 3 iframes though we have defined only 2 because, the right hand viewer side itself is a made up of frame and inside which we have 2 iframes defined.


If you look, while mouse hovering on

iframe id="viewIFRAME"; 

the whole right hand side area is highlighted, which shows that its an iframe.
Screen Shot 2013-02-22 at 1.18.36 AM

If you look, while mouse hovering on

 iframe src = "http://www.w3schools.com";

the w3schools iframe is highlighted
Screen Shot 2013-02-22 at 1.18.43 AM

If you look, while mouse hovering on

iframe src = "http://www.assertselenium.com";

the assertselenium iframe is highlighted
Screen Shot 2013-02-22 at 1.18.50 AM
Suppose if you view the same page in a 3D view you can actually see that these 3 iframes itself will be of separate individual boxes, representing that its a iframe and has its own DOM

A special, In 3d View for you
Screen Shot 2013-02-22 at 1.44.25 AM

So,that’s pretty much about iFrames and I hope it helps you..!!!

12 thoughts on “Handling iFrames using WebDriver

  1. Savan
    March 15, 2013 at 4:25 pm

    Thanks for posting these. Really helpfull…

  2. Puneet
    July 23, 2013 at 12:12 pm

    thanks for posting this its really helpful

    1. July 23, 2013 at 6:37 pm

      you can email me if anything. Refer my About.me page

      1. srikanth
        July 31, 2014 at 10:15 am

        Thanks for your post. I have once issue with iframe. i have written a test case for composing the mail in the Gmail. In that once i entered the subject i need to switch the body. Here the body element means iframe and iframe is not having any locators like id ,class name etc.
        I can use the below method which is posted by you.
        driver.switchTo().frame(driver.findElements(By.tagName(“iframe”).get(0));

        But the problem is that there are lot of iframes. so above method is not wokring.
        Please suggest me how to resolve this issue. I took the xapth using firebug but it is not working for every time.

  3. Gautam
    September 30, 2013 at 10:09 am

    Thanks for the posting. Its really useful.

  4. Vasty Jay
    November 19, 2013 at 4:12 pm

    very helpful guide to working with iframes

  5. Hermelinda
    December 16, 2013 at 1:48 am

    Hi there, I log on to your blogs regularly. Your writing style is awesome,
    keep doing what you’re doing!

  6. Pankaj Ambekar
    May 9, 2014 at 2:34 pm

    The content was really good and nicely presented, I was facing one issue in selenium regarding reading emails having different iFrames. Your explanation helped to resolve the issue.

    Thanks

  7. john
    July 1, 2014 at 2:18 am

    Way cool! Some very valid points! I appreciate
    you penning this write-up plus the rest of the site is extremely good.

  8. July 25, 2014 at 3:08 am

    I was excited to find this website. I want to to thank you for ones time for this particularly fantastic read!!
    I definitely liked every little bit of it and i also have you bookmarked to
    check out new things on your web site.

  9. Manikandan
    October 13, 2014 at 11:41 am

    Can you please explain about the switching between frames using web-element.

    Thanks in advance
    -Mani

  10. jagadeesan
    November 14, 2014 at 12:48 pm

    Hi Friends,
    I have written script in selenium web driver which find the broken images in website ,
    I am storing the console result in a text file and sending those test file through mail as an attachment,
    I need an help such that i want to read the content in single text file and send those contents in an body of the mail.
    if i do this the persons who are reading the mail are not requested to open the attachment ,they can read the message when they open the mail.

    Regards,
    Jagadeesan.P

Leave a Reply

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