iFrame || iFrame Handling within a web page.

          iframe is an HTML tag which is used to embed another document or webpage into the current HTML page. We cannot access web elements inside an iframe directly using selenium. We have to first move into the iframe, then only, we can access the elements. This process is called iframe handling within a web page.

iframe Example
iframe Example

Understand the above webpage:

  1. URL: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe
  2. Text “Result Size” is outside of the frames on the web page.
  3. Also, the webpage contains two <iframe /> tags. One <iframe> is inside the another <iframe> tag.
  4. Logo of “w3schools.com” is placed inside the second <iframe> tag.


Problem Statement:

We have to extract the logo text from the web page. If we follow the normal steps and try to access the logo text using XPath directly we would get an exception.

Code Example-1:

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class Example1 {
	public static void main(String[] args) throws InterruptedException 
	{
		String URL="https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe";
		System.setProperty("webdriver.chrome.driver", "drivers//chromedriver.exe");
		WebDriver driver=new ChromeDriver();
		
		// Step #1: Navigate to URL.
		driver.get(URL);
		
		// Step #2: Identify the xpath for logo.
		String logoXpath="//*[@class='w3-center']/a";
		
		// Step #3: Locate the logo element on the web page using xpath.
		String logoText= driver.findElement(By.xpath(logoXpath)).getText();
		
		// Step #4: Print the logo text in the console.
		System.out.println("Logo Text: "+logoText);		
	}
}

Output:
Exception in thread "main" org.openqa.selenium.NoSuchElementException: 
no such element: Unable to locate element: 
{"method":"xpath","selector":"//*[@class='w3-center']/a"}

To access the web element inside the iframe tags we have to first switch into the iframe(s) tags. This is as simple as navigating between multiple browser tabs(windows) using switchTo statements:

                                        driver.switchTo().frame(0);    // Move into the iframe tag based on the index.

                          driver.switchTo().defaultContent();    // Move outside the iframe tag(s)

Correct steps to access web element inside an iframe:

  1. Navigate to URL.
  2. As here are two nested iframes which means one inside another, we have to use below statement to move inside the iframes.  driver.switchTo().frame(0).switchTo().frame(0);
  3. Identify the xpath for logo.
  4. Locate the logo element on the web page using XPath.
  5. Print the logo text in the console.
  6. Now switch outside the iframe tags. driver.switchTo().defaultContent();
  7. Locate web element outside the iframe tags.

Code Example-2

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class Example1 {

	public static void main(String[] args) throws InterruptedException 
	{
		String URL="https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe";
		System.setProperty("webdriver.chrome.driver", "drivers//chromedriver.exe");
		WebDriver driver=new ChromeDriver();
		
		// Step #1: Navigate to URL.
		driver.get(URL);

		// Step #2: As here are two iframes one inside another, we have to use below statement to move inside the iframes.
		Thread.sleep(5000);
		driver.switchTo().frame(0).switchTo().frame(0);
			
		// Step #3: Identify the xpath for logo.
		String logoXpath="//*[@class='w3-center']/a";
		
		// Step #4: Locate the logo element on the web page using xpath.
		String logoText= driver.findElement(By.xpath(logoXpath)).getText();
		
		// Step #5: Print the logo text in the console.
		System.out.println("Logo Text Inside the iframes: "+logoText);
		
		// Step #6: Now switch outside the iframe tags.
		driver.switchTo().defaultContent();
		
		// Step #7: Locate web element outside the iframe tags.
		String resultSizeXpath="//*[@id='framesize']";
		System.out.println("Outside iframes: "+driver.findElement(By.xpath(resultSizeXpath)).getText());
	}

}

Output:
Logo Text inside iframes: w3schools.com
Outside iframe: Result Size: 502 x 427

1014total visits,3visits today

Leave a Reply

Your email address will not be published. Required fields are marked *