In Selenium Webdriver Frames post, we will learn how to work with frames while we are doing web automation with selenium webdriver.

Audience

This Selenium Webdriver Frames post is designed for SW test professionals who have some information about selenium web automation. At the end of this tutorial, you will know how to work with frames.

Prerequisites

Nice to have: Before starting to read this post it is better to read previous selenium tutorials.

  1. http://www.swtestacademy.com/selenium-tutorial-java-junit/
  2. http://www.swtestacademy.com/selenium-webdriver-api/
  3. http://www.swtestacademy.com/selenium-webdriver-navigation/
  4. http://www.swtestacademy.com/selenium-webdriver-interrogation/
  5. http://www.swtestacademy.com/selenium-webdriver-manipulation/
  6. http://www.swtestacademy.com/selenium-webdriver-alerts/

Working with Selenium Webdriver Frames

First, it is better to start with the definition of iFrame. An iframe is used to display a web page within a web page. It is generally using for content partitioning, and its content can be changed without reloading the whole webpage. Generally, while you are automating a website, you may not face with iframes too much. However, we always be ready to work with them when it is necessary. Let’s look what Selenium Webdriver provides us for frame operations.

  • switchTo().frame(int) – Switch to a frame with its index
  • switchTo().frame(“name of the frame”) – Switch to a frame with its name
  • switchTo().frame (WebElement) – Switch to a frame with its web element location
  • switchTo().defaultContent() – Switch back to default page

Note: You can access frame and iframe with the same mechanism.

Now, I want to go on with examples.

1) switchTo().frame(int)

 If a page has more than one frames, the first one’s index is “0”, the second one’s index is “1”, and the third one’s index is “2”, and so on.

Our test web URL is: http://www.londonfreelance.org/courses/frames/index.html

Test Scenario:

  1. Go to above URL.
  2. Switch to the frame which comprises of “Title bar (top.html)” text by using frame’s index.
  3. Assert that h2 tag’s text is “Title bar (top.html)

As you see below figure, the frame which contains Title bar (top.html) is the 3rd frame. Thus, its index equals 2.

frames

As you see below, H2 tag’s CSS path: html>body>h2

frames_2

Test Code is shown below with comments: