Sunday 21 August 2016

Selenium: WebDriver: Switching among frames

in previous post, I explained about how to switch across multiple windows. In this post, I am going to explain how to switch across frames. Frames are used to divide the window into multiple sections, where each section loads an HTML document.

WebDriver.TargetLocator interface provides following methods to deal with frames in a window.

Method
Description
WebDriver frame(int index)
Select the frame by index. Once you select the frame, all the calls to the WebDriver are made to this frame.
WebDriver frame(String nameOrId)
Select a frame by its name or ID.
WebDriver frame(WebElement frameElement)
Select a frame using its previously located WebElement.
WebDriver parentFrame()
Change focus to the parent context. If the current context is the top level browsing context,
the context remains unchanged.
WebDriver defaultContent()
Selects either the first frame on the page, or the main document when a page contains iframes.

Following is the complete working example.


index.jsp
<!DOCTYPE html>
<html>

<frameset rows="10%,80%,10%">
 <frame name="top" src="top.html" />
 <frame name="main" src="center.html" />
 <frame name="bottom" src="bottom.html" />
 <noframes>
  <body>Your browser does not support frames.
  </body>
 </noframes>
</frameset>

</html>


top.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Insert title here</title>
 </head>
 <body>
  <h1>Personal Details</h1>
  <h3>First Name
  <input type="text" name="firstName" />
  </h3>
  <h3>Last Name
  <input type="text" name="lastName" />
  </h3>
 </body>
</html>


center.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Insert title here</title>
 </head>
 <body>
  <h1> Address </h1>
  <h3>City
  <input type="text" name="city" />
  </h3>
  <h3>State
  <input type="text" name="state" />
  </h3>
  <h3>Country
  <input type="text" name="country" />
  </h3>
 </body>
</html>


bottom.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Insert title here</title>
 </head>
 <body>
  <h1>About Your self</h1>
  <textarea rows="4" cols="50" name="about"> </textarea>
 </body>
</html>


Assume index.jsp is available at http://localhost:8080/application/. Following application writes data to index.jsp file.
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;

public class App {

 public static void main(String[] args) throws InterruptedException {
  WebDriver driver = new FirefoxDriver();
  driver.get("http://localhost:8080/application/");

  driver.switchTo().frame(0);
  WebElement firstName = driver.findElement(By.name("firstName"));
  WebElement lastName = driver.findElement(By.name("lastName"));
  firstName.sendKeys("Hari Krishna");
  lastName.sendKeys("Gurram");

  /*
   * You must call below statement. To access next frame, you should go to
   * main window and call the next frame
   */
  driver.switchTo().defaultContent();

  driver.switchTo().frame(1);
  WebElement city = driver.findElement(By.name("city"));
  WebElement state = driver.findElement(By.name("state"));
  WebElement country = driver.findElement(By.name("country"));

  city.sendKeys("Bangalore");
  state.sendKeys("Karnataka");
  country.sendKeys("India");

  /*
   * You must call below statement. To access next frame, you should go to
   * main window and call the next frame
   */
  driver.switchTo().defaultContent();
  driver.switchTo().frame(2);
  WebElement about = driver.findElement(By.name("about"));
  about.sendKeys("I am from Bangalore");

  Thread.sleep(9000);
  driver.quit();
 }
}


Once you run above application, index.jsp is filled with data like below.


Note
Frames usage is discouraged in HTML5.




Previous                                                 Next                                                 Home

No comments:

Post a Comment