In this tutorial, I am going to cover how to handle Frames available on WebPages in Selenium WebDriver.
Topics To Be Covered -
- What is Frame?
- How to switch to Frame?
- Different ways to identify Frame on web-pages.
- How to navigate one Frame to another on the same web-pages?
- How to get the total number of Frames on web-pages?
Frames in Selenium
The HTML Frames are used to divide the web-page/browser window into different multiple sections where each section may or may not displays contents of the same web-page. It means each section can load the content of other websites also.
How to inspect Frames on web-pages -
Here, I will take the website - 'https://seleniumhq.github.io/selenium/docs/api/java/' to explain the concept.
- If you open the above URL, you will get above page. You can notice the entire page is divided into 3 sections. First two sections are at the left side and the third section at the right of the first two sections.
- Right-click on the section highlighted in green on the below image and click on 'inspect' option.
- Developer tools will be opened highlighting the property of the inspected element -
- Expand the developer tools upward and then scroll up until you get below result -
- We can notice <frame> tag below the <head> tag. Inside the <frame> tag, we can get the 'Frame Name'. In our case, frame name is 'packageListFrame'.
Note - Similarly, we can get the other frames'name.
Handle Frames in Selenium Script -
To handle frames, Selenium WebDriver provides a method -
- driver.switchToFrame(parameter);
Note -
We pass 'parameter' in the form of -
- 'Index of the Frame'
- 'Frame Name' and
- ' Frame as WebElement'.
Scenario 1 -
- Open 'https://seleniumhq.github.io/selenium/docs/api/java/' in chrome.
- Click on 'com.thoughworks.selenium' link.
package com.sessions;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class SeleniumFrame {
public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "F:\\software\\chromedriver_win32\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get("https://seleniumhq.github.io/selenium/docs/api/java/");
driver.manage().window().maximize();//maximizing browser.
driver.findElement(By.xpath("//a[text()='com.thoughtworks.selenium']")).click();//Clicking on the target link.
}
}
Note - Here we are trying to click on the link which is inside 'packageListFrame'. So if we run above program, we will get below compilation error -
NoSuchElementExpeption.
Scenario 2 -
- Open 'https://seleniumhq.github.io/selenium/docs/api/java/' in chrome.
- Switch to the above-identified Frame.
- Click on 'com.thoughworks.selenium' link.
package com.sessions;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class SeleniumFrame {
public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "F:\\software\\chromedriver_win32\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get("https://seleniumhq.github.io/selenium/docs/api/java/");
driver.manage().window().maximize();//maximizing browser.
driver.switchTo().frame("packageListFrame");//Switching to the target frame
driver.findElement(By.xpath("//a[text()='com.thoughtworks.selenium']")).click();//Clicking on the target link.
}
}
Note - Here we first switched to the frame then click on the link. So the program will run successfully.
Point to Note -
- We can also switch to Frame using its index. Indexing of frame starts with '0', '1','2' and so on. So the index of the first frame is '0'. Therefore, the above program can be run as -
package com.sessions;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class SeleniumFrame {
public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "F:\\software\\chromedriver_win32\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get("https://seleniumhq.github.io/selenium/docs/api/java/");
driver.manage().window().maximize();//maximizing browser.
driver.switchTo().frame(0);//Switching to the target frame
driver.findElement(By.xpath("//a[text()='com.thoughtworks.selenium']")).click();//Clicking on the target link.
}
}
Note - Here we switched to the frame using its Index.
- We can also switch to frame - first identifying the frame as a web-element and then switching to it. Here we will use x-path to locate the frame on the web-page. This is the most reliable method to switch to the frame. The above-described two methods use 'Frame Name' and 'Frame Index' to locate the Frame. But suppose, the name of the frame got changed or due to the insertion of the new frame on the web-page, the position of the frame got changed. But, this third method uses x-path to locate the frame.X-path directly locates the element wherever it is available on the web-page. It does not require any index or name to locate the element. That is why this method is more reliable.
Below image describes the x-path of the frame.
package com.sessions;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
public class SeleniumFrame {
public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "F:\\software\\chromedriver_win32\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get("https://seleniumhq.github.io/selenium/docs/api/java/");
driver.manage().window().maximize();//maximizing browser.
WebElement frame_element = driver.findElement(By.xpath("//frame[@name='packageListFrame']"));//locating the frame element in order to switch to it.
driver.switchTo().frame(frame_element);//Switching to the target frame
driver.findElement(By.xpath("//a[text()='com.thoughtworks.selenium']")).click();//Clicking on the target link.
}
}
Note - Here we first located the frame on the webpage using x-path and then stored in the 'frame_element' variable. Since 'frame_element' is pointing to the frame, we used this as the parameter to switch to the frame in the above program.
How to switch from one frame to another -
To switch from one frame to another, Selenium WebDriver provided two methods -
- driver.switchTo().defaultContent()
- driver.switchTo().parentFrame()
This is possible to switch from one frame to another. However, We cannot directly switch from one frame to another. As we know a web-page/browser window is divided into multiple frames. Here web-page/browser window is the main window which contains those multiple frames. Frames are independent of each other. So if we are already switched to a frame then first we need to switch from this frame to the main window then we can switch to the other frames from there. The similar concept applies when a frame is itself divided into multiple frames.
Scenario 3 -
- Open 'https://seleniumhq.github.io/selenium/docs/api/java/' in chrome.
- Switch to the First frame(packageListFrame).
- Click on 'com.thoughworks.selenium' link.
- Switch to the Second Frame(packageFrame), highlighted in the below image in green color.
package com.sessions;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
public class SeleniumFrame {
public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "F:\\software\\chromedriver_win32\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get("https://seleniumhq.github.io/selenium/docs/api/java/");
driver.manage().window().maximize();//maximizing browser.
driver.switchTo().frame("packageListFrame");//Switching to the target frame
driver.findElement(By.xpath("//a[text()='com.thoughtworks.selenium']")).click();//Clicking on the target link.
driver.switchTo().frame("packageFrame");//Switching to the second frame
}
}
Note - System will throw NoSuchFrameException while switching to the second frame as shown below.
Scenario 4 -
- Open 'https://seleniumhq.github.io/selenium/docs/api/java/' in chrome.
- Switch to the First frame(packageListFrame).
- Click on 'com.thoughworks.selenium' link.
- Switch to the main window.
- Switch to the Second Frame(classFrame).
- Click on 'org.openqa.selenium' link highlighted in green color.
package com.sessions;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
public class SeleniumFrame {
public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "F:\\software\\chromedriver_win32\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get("https://seleniumhq.github.io/selenium/docs/api/java/");
driver.manage().window().maximize();//maximizing browser.
driver.switchTo().frame("packageListFrame");//Switching to the first frame
driver.findElement(By.xpath("//a[text()='com.thoughtworks.selenium']")).click();//Clicking on the first target link.
driver.switchTo().parentFrame();//Switching to the main window.
driver.switchTo().frame("packageFrame");//Switching to the second frame
driver.findElement(By.xpath("//span[text()='Action']")).click();// clicking on the second target link.
}
}
How to count total number frames available in web-page -
package com.sessions;
import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
public class SeleniumFrame {
public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "F:\\software\\chromedriver_win32\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get("https://seleniumhq.github.io/selenium/docs/api/java/");
driver.manage().window().maximize();//maximizing browser.
List<WebElement> frame_count = driver.findElements(By.tagName("frame"));
System.out.println(frame_count.size());
}
}
Note -
- Every frame in HTML structure starts with <frame> tag. So 'tagName' locator is used to locate frames in the web-page.
- findElements0 - returns List of WebElement.
- frame_count - refers to all the frames available on the web-page.
- size() - returns number of elements referred by frame-count.
That all guys!!!
Do comment in the comment box and share your views about the post. If you have any query, please comment on it. It will help me to reach to you and help you to resolve your query.
