Outline

In this post we will learn how to work with frames while we are doing web automation with selenium webdriver.

Audience

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

Working with 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 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:

2) switchTo().frame(“frame name”)

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 name.
  3. Assert that h2 tag’s text is “Title bar (top.html)

Frame’s name: main

H2 tag’s CSS path: html>body>h2

Test Code:

3) switchTo().frame(WebElement)

 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 webelement.
  3. Assert that h2 tag’s text is “Title bar (top.html)

Frame’s CSS path: html>frameset>frameset>frameset>frame:nth-child(1)

frames

H2 tag’s CSS path: html>body>h2

Test Code:

4) driver.switchTo().defaultContent()

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 name.
  3. Assert that h2 tag’s text is “Title bar (top.html)
  4. Switch to default content
  5. Check the main page title is “Sample frames page”

Test Code:

Summary

  • You learnt how to work with Frames with different webdriver methods.