Handling iFrames using WebDriver

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..!!!

Comments
3 Responses to “Handling iFrames using WebDriver”
  1. Savan says:

    Thanks for posting these. Really helpfull…

  2. Puneet says:

    thanks for posting this its really helpful

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s