PAGE 13: FRAMES IN SELENIUM WEB DRIVER

iFRAME: An iFrame (Inline Frame) is an HTML document embedded inside the current HTML document on a website.
iFrame HTML element is used to insert content from another source, such as an advertisement, into a Web page.

USE OF iFRAME :  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 (Frame in side a Frame)

IDENTIFICATION OF A FRAME:
Different ways to know if the element is present inside a frame or not

#1. Right click on the element. Check if “This Frame” option is available. If This frame option is available, it means that the element is inside a frame.

#2. View page source of the web page and check if any tag is available for ‘iframe'.

Pictorial Representation of a frame:

              |                             |
|              |                             |
| Frame 1 |                             |
|              |                             |
|              |                             |
|--------------|                             |
|              |          Frame 3       |
|              |                             |
|              |                             |
|              |                             |
| Frame 2 |                             |
|              |                             |
|              |                             |
|              |                             |
|              |                             |
 --------------------------------------------

HANDLING FRAMES IN SELENIUM WEBDRIVER
By using Selenium, we cannot interact/validate the web-elements directly which are inside the iframe tags.
What we need to do is ,

•  We need to switch to iframe
• Once you are done with all the task in a particular iFrame you can switch back to the main web page using the switchTo().defaultContent().

DIFFERENT WAYS TO SWITCH TO A FRAME:
 There are three ways to switch to frame in selenium.

1. By Index based
2. By FrameName Or Id based
3. By WebElement based

By Index based
By passing the frame number, we can switch inside the frame.
Select a frame by its (zero-based) index. 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
Parameters: Index - (zero-based) index

Sample Code:
driver.switchTo().frame(0);//want to switch to 1 frame
driver.switchTo().frame(1);//want to switch to 2 frame

By FrameName Or Id based:
By Passing the frame element Name or ID and driver will switch to that frame.
Parameters: name Or Id - the name of the frame or the id of the frame element

Sample Code:
driver.switchTo().frame("f1");//if want to switch by using frame name=”f1”
driver.switchTo().frame("addvert");//if want to switch by using frame id=”addvert”


By WebElement based:
By passing the frame web element and driver will switch to that frame
Parameters: frameElement - The frame element to switch to

Sample Code:
driver.switchTo().frame(By.xpath("//iframe"));//if want to switch by using web-elements.


NOTE : There can be situations when there can be multiple nested frames
Sample code to handle nested frames :
driver.switchTo().frame("Parent FrameName").switchTo().frame("child framename or id or index");

TO SWITCH OUT OF THE FRAME :

driver.switchTo().defaultContent()

EXAMPLE :

package com.keysCommands;

import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;

public class Iframes {
WebDriver driver;

@BeforeTest
public void setup() throws Exception {
driver = new FirefoxDriver();
driver.manage().window().maximize();
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
driver.get("http://only-testing-blog.blogspot.in/2015/01/iframe1.html");
}

@Test
public void handleFrames() {

                // Working with page element.
               // Inserting some text In Town textbox of page
driver.findElement(By.xpath("//input[@name='Town']")).sendKeys("Your town");

// Working with Iframe1 elements
// switch to frame1 and select cow checkbox from table. frame1 Is ID of
// frame.
driver.switchTo().frame("frame1");
driver.findElement(By.xpath("//td[contains(text(),'Cow')]/preceding-        sibling::td/input[@type='checkbox']")).click();

// Switch back to page content.
driver.switchTo().defaultContent();

// Working with Iframe2 elements
// switch to frame2 and select I have a boat checkbox. frame2 Is ID of
// frame.
driver.switchTo().frame("frame2");
driver.findElement(By.xpath("//input[@value='Boat']")).click();

// switch back to page to Inserting some text In Country textbox of
// page.
driver.switchTo().defaultContent();
driver.findElement(By.xpath("//input[@name='Country']")).sendKeys("your country");
}
}

Executing tests via TestNG.xml :

<?xml version="1.0" encoding="UTF-8"?>

<suite name="Handling Frames in Selenium WebDriver">

<test name="Mouse Hover Commands Test">

<classes>

<class name="com.keysCommands.Iframes" />

</classes>

</test>

</suite>

OUTPUT:

===============================================

Handling Frames in Selenium WebDriver

Total tests run: 1, Failures: 0, Skips: 0

===============================================