How to identify Iframes and Iframes handling in Selenium?

In this tutorial, we will learn about what is an Iframe, Iframes Handling?, why it’s used in websites and how to switch within Iframes using Selenium?. This tutorial explains each step by detailed explanation and snapshot. Please refer below for step by step guide on Iframe.

What is Iframe

An Iframe stands for Inline Frame and it’s an HTML element which is used to embed external website page in your current HTML document.

IFrame can be inserted using into HTML document using the tag<iframe> or <frame>

<iframe src=http://thoughtcoders.com/index.html width="728" height="90"></iframe>

Sometimes tag frame also used instead of Iframe tag.

Why IFrame’s used

Iframes are widely used to integrate external websites. Generally, its used to display information, integrate form, integrate third party videos, display generic information like temperature and share market prices on your website.

Pre-requisite:

Selenium Project Set up on your machine. (If Selenium Project not set up on machine refer link- https://thoughtcoders.com/blog/selenium-and-testng-setup-with-maven/)

How to switch into Iframe:

During Selenium Automation, when we try to perform an action on a webpage which have iframe then we can’t perform direct action within an iframe. To perform any action within Iframe we need a switch within an iframe. Selenium supports iframes and provides rich methods to switch within Iframes.

Step 1: Detect Iframe:

There are multiple ways to identify whether the web element is within an iframe or not.a.

a. Chropath:  Chropath is the smart tool to find XPath locators. It also informs whether the web element is within an iframe or not.

b. By Analyzing HTML DOM:  Open Chrome Dev tools and search for <Iframe>  and <frame> keywords. If these words present in DOM then definitely Iframe present on the web page.

c. Using Console Tab: Open Dev Tools and click on Console Tab and Choose the desired iframe from the dropdown. Also, verify your XPath from the console using $x(“XPath”).

Verify you xpath on console:

Step 2: Open Selenium Project and create a test class,  write code to open a browser and navigate to the page which has iframe.

package stepDef;
import io.github.bonigarcia.wdm.WebDriverManager;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;
public class switchIntoIframe {
    public static void main(String [] args){
        WebDriverManager.chromedriver().setup();
        WebDriver driver = new ChromeDriver();
        driver.manage().window().maximize();
        driver.get("https://www.dyn-web.com/tutorials/iframes/basics/demo.php");
        driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);
            driver.close();
    }
}

Step 2: You can identify iframe using Web element, index or Name and use a suitable method to switch into an iframe.  Selenium WebDriver recognizes iframe as Web Element, frame index and frame Name.

1. WebElement- store iframe as WebElement  on the basis of Xpath, CSS or another locator

// Method 1: Switch in Iframe using Iframe WebElement
// store iframe as Web Element
WebElement iframe = driver.findElement(By.xpath("//iframe[@id='ifrm']"));
driver.switchTo().frame(iframe); // Now switch into iframe using WebElement

• Index: Frame index starts from zero ie. The first frame is count is zero and further, it will increase.

//Method 2: Switch in Iframe using Iframe Index
driver.switchTo().frame(0);

• String or Name: If iframe has any name then you can identify using iframe Name.

// Method 3: Switch in Iframe using Iframe Name or ID
driver.switchTo().frame("ifrm");

Step 4: Once after performing action within iframe switch back to parent iframe.

//switching back to parent Window
driver.switchTo().parentFrame();

Step 5: Add iframe code and run the complete code of iframe handling as per the above explanation. Sample code is mentioned below. Now you can uncomment the desired method to switch within an iframe and run.

Refer below for complete code:

package stepDef;
import io.github.bonigarcia.wdm.WebDriverManager;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;
public class switchIntoIframe {
    public static void main(String [] args){
        WebDriverManager.chromedriver().setup();
        WebDriver driver = new ChromeDriver();
        driver.manage().window().maximize();
        driver.get("https://www.dyn-web.com/tutorials/iframes/basics/demo.php");
        driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);
       // Method 1 Switch in Iframe using Iframe Name or ID
     //driver.switchTo().frame("ifrm");
        //Method 2: Switch in Iframe using Iframe Index
   //     driver.switchTo().frame(0);
        // Method 3: Switch in Iframe using Iframe WebElement
        WebElement iframe = driver.findElement(By.xpath("//iframe[@id='ifrm']")); // store iframe as Web Element
        driver.switchTo().frame(iframe)    ;           // Now switch into iframe using WebElement
// Below Element is within Iframe and many action you can perform within iframe
        WebElement iframeDemotext = driver.findElement(By.xpath("//h1[contains(text(),'Iframe Demo')]"));
        System.out.println("iframe Demo text "+iframeDemotext.getText());
        //switching back to parent Window
        driver.switchTo().parentFrame();
        WebElement iframeExample = driver.findElement(By.xpath("//h1[contains(text(),'Iframe Example')]"));
        System.out.println("Iframe example text "+iframeExample.getText());
        driver.close();
    }
}

Console Output: After execution of above code text of elements which are within an iframe and outside iframe will be printed.

Note:  If your application has more than one nested iframe then switch using parent-child strategy. The first switch into parent iframe then again switch into their child.

Hope you followed the above tutorial, learnt about Iframes Handling and also able to implement this in your automation framework. If you face any issue then feel free to write to us on query@thoughtcoders.com. Also, we request you to like us on Facebook and follow us on LinkedIn.