Post
Ask Question

IFrame Execution Using Selenium Webdriver - Part One

In this article, we will learn the execution of iframe using Selenium Webdriver.

As we know, Selenium is an open source tool which is used to execute or automate test scripts or test cases in local or remote machines connected with LAN Connection on web application.

If we want to automate the test scripts or testcases on mobile devices like Android or Windows, then we have another tool called Appium.

Selenium supports various programming languages like C# , Java , Ruby, JavaScript, Python and it also supports various operating systems to execute or automate the browsers like Windows, Linux, MacOS etc. It supports various browsers to execute its scripts, such as Google Chrome, Internet Explorer, Safari, Firefox, Opera etc. If you are new to Selenium Webdriver, I suggest you to refer my previous articles on Selenium Webdriver like,
  • (Introduction to Selenium 3.0) http://www.c-sharpcorner.com/article/introduction-to-selenium-3-0/
  • (Interview Q/A 's) http://www.c-sharpcorner.com/article/interview-questions-and-answers-on-selinium/
  • (Selenium Documentation) http://www.c-sharpcorner.com/Resources/3392/selenium-3-0-documentation.aspx
What is an IFrame ?

IFrame is an inline frame used for displaying external objects or elements from different webpages into a container. IFrame is nothing but an empty container which we can use various HTML controls in it. Whenever we want to display a partition or a segment like
Login form, or Registration form with different functionalities, we use iframes.

Syntax for IFrame
  1. <iframe src="Path of the html page" height="100" width ="100" frameborder=''0" ><iframe>  
From the above syntax, we can set the height and width of the iframe by giving the certain values based on our requirement.

By default, every iframe will be displaying with certain border. If we want to hide the border or if we don't want to show the iframe when the page loads, then we need to set frameborder="0". So, when the page loads, only controls will be visible within the iframe. As we know when using automation tools like Selenium, we can execute or automate anything which is available on the webpage. Automating or executing the controls available on the webpage is an easy task. The complexity comes when there is a frame with various controls. Each frame acts as a container, or we can say as panel, with multiple controls.

If there are controls available directly on the webpage rather than div or Frames or panel, then it will be easier to automate any control using Selenium Webdriver; but suppose there are some scenarios where controls are available in frames such as iframe1, iframe2 or so on, then there will be some difficulty in identifying the controls.

In order to execute or automate it, first we need to identify whether there is any frame available on the webpage or not. If the frame exists on the webpage, then with the frame properties like Id, Name, ClassName,Tagname etc. we need to identify the frame. Once the frame is identified, enter into the frame by using SwitchTo().Frame() method, and identify each control with their properties so as to automate them.

Example
  1. <html>  
  2.   
  3. <body>  
  4.     <iframe frameborder="0" scrolling="no" width="300" height="300" src="D:\MOIZ ARTICLE\google.png" name="Frame1" id="Frame1" style=border:solid;color:black; ">  
  5. <p>IFRAME EXAMPLE</p>  
  6. </iframe><br />  
  7. <h2><a href="D:\MOIZ ARTICLE\apple.jpg " target="Frame1 ">Apple Logo</a><br />  
  8. <a href="D:\MOIZ ARTICLE\facebook.png " target="Frame1 ">Facebook Logo</a><br />  
  9. <a href="D:\MOIZ ARTICLE\google.png " target="Frame1 ">Google Logo</a></h2>  
  10. </body>  
  11. </html>  
The output of the above HTML code will be like below.

selenium

selenium

selenium

From the above example, we have set the iframe container to an image called GoogleLogo. This image appears by default when the page loads. And, when the user clicks on various links like AppleLogo, FacebookLogo and GoogleLogo, instead of loading the complete page every time, iframe just replaces the image with the given value.

For every postback request , instead of loading complete webpage, we just replace the images within the frame container. The best example for IFrames is Facebook's like button.
 
We will see three different scenarios with Selenium Scripts for the execution of Iframe. Our main aim is to execute / automate the below scenarios using automation tool called Selenium Webdriver.

SCENARIO 1

selenium

From the above image or scenario 1, we have three different frames, i.e., iframe1, iframe2, iframe3. Here, our goal is to automate each and every control which is available in the given frames. In order to automate the above scenario, we need to perform certain steps,

Step 1

First of all, we need to identify the iframe 1 with the given iframe properties. In the below HTML code, we have Id, name properties such as Id="Frame1", and name="Frame1". By using this, we will get the iframe.

Step 2

To automate the controls available inside the iframe1 like Firstname , Lastname , email , password and login button etc., we need to identify each control; for example - For FirstName, we have Id and name property like Id="Fname1" & Name="Fname1" similarly for Lastname, we have Id="Lname1" and name="Lname1" , Email properties like Id="Email1" , name="Email1" , Password properties like Id="password1" name="password1" and finally, login button with its properties such as Id="Login1" and name="Login1" etc.

Once we identify all the controls of iframe1 with their properties, we need to automate each of them using Selenium Webdriver.

Step 3

Once all the controls are automated, let's come out of the iframe1 and enter into the iframe2 to perform the automation of controls available in the frame2 and so on.

The below HTML code explains the creation of the above scenario1 which is shown in the above image.

HTML code for the above diagram is given below.

Main.html
  1. <html>  
  2.   
  3. <head>  
  4.     <title>IFRAME EXAMPLE 1</title>  
  5. </head>  
  6.   
  7. <body> <iframe src="D:/IFrameExamples/FirstFrame1.html" id="Frame1" name="Frame1" height="100" width="100" scrolling="No" frameborder="0">  
  8. <iframe>   // In the first iframe src , we are calling "D:/IFrameExamples/FirstFrame1.html" ,all the controls from the FirstFrame1.html  
  9. will be binding or resides within the iframe1 which is shown in above figure.  
  10. <iframe src="D:/IFrameExamples/SecondFrame2.html" id="Frame2" name="Frame2" height="100" width="100" scrolling="No" frameborder="0">  
  11. <iframe>   // In second frame ie.iframe2 we are calling "D:/IFrameExamples/SecondFrame2.html" in src , all the controls from  
  12. SecondFrame2.html will be binding/residing within the iframe2.  
  13. <iframe src="D:/IFrameExamples/ThirdFrame3.html" id="Frame3" name="Frame3" height="100" width="100" scrolling="No" frameborder="0">  
  14. <iframe> // In third frame ie.iframe3 we are calling "D:/IFrameExamples/ThirdFrame3.html" in src , all the controls from  
  15. ThirdFrame3.html will be binding/residing within the iframe3.  
  16. </body>  
  17. </html>  
FirstFrame1.html
  1. <html>  
  2.   
  3. <head>  
  4.     <title> FirstFrame1.html </title>  
  5. </head>  
  6.   
  7. <body> FirstName :<input type="text" id="Fname1" Name="Fname1"><br><br> LastName :<input type="text" id="Lname1" Name="Lname1"><br><br> Email :<input type="text" id="Email1" Name="Email1"><br><br> Password :<input type="password" id="Password1" Name="Password1"><br><br> <input type="button" value="Login" id="Login1" name="Login1"> </body>  
  8.   
  9. </html>  
SecondFrame2.html
  1. <html>  
  2.   
  3. <head>  
  4.     <title> SecondFrame2.html </title>  
  5. </head>  
  6.   
  7. <body> FirstName :<input type="text" id="Fname2" Name="Fname2"><br><br> LastName :<input type="text" id="Lname2" Name="Lname2"><br><br> Email :<input type="text" id="Email2" Name="Email2"><br><br> Password :<input type="password" id="Password2" Name="Password2"><br><br> <input type="button" value="Login" id="Login2" name="Login2"> </body>  
  8.   
  9. </html>  
ThirdFrame3.html
  1. <html>  
  2.   
  3. <head>  
  4.     <title> ThirdFrame3.html </title>  
  5. </head>  
  6.   
  7. <body> FirstName :<input type="text" id="Fname3" Name="Fname3"><br><br> LastName :<input type="text" id="Lname3" Name="Lname3"><br><br> Email :<input type="text" id="Email3" Name="Email3"><br><br> Password :<input type="password" id="Password3" Name="Password3"><br><br> <input type="button" value="Login" id="Login3" name="Login3"> </body>  
  8.   
  9. </html>  
Code to understand the Execution of IFrame using Selenium Webdriver,
  1. Using System;  
  2. Using Mbunit.Framework;  
  3. Using Microsoft.VisualStudio.TestTools.UnitTesting;  
  4. Using System.Threading;  
  5. Using OpenQA.Selenium;  
  6. Using OpenQA.Selenium.Chrome;  
  7. Namespace FirstScenarioTesting {  
  8.     [TestClass]  
  9.     Public class FirstScenarioTesting {  
  10.         [TestMethod] // Using [TestClass] & [TestMethod] attribute, we will be able to perform unit testing.  
  11.         Public void IframTest() {  
  12.                 Iwebdriver driver = new ChromeDriver("D:/ChromeDriver");  
  13.                 //Here from the above line of code we need to pass the argument to ChromeDriver , the path of the Chrome driver available in your local machine.  
  14.                 //driver variable holds the complete webpage information.  
  15.                 driver.Navigate().GoToUrl("D:/IframeExamples/IFrameExample1");  
  16.                 //With the above code, we need to provide the Url, it navigates to the given Url and opens the webpage whatever we want to automate it.  
  17.                 driver.Manage().Window.Maximize();  
  18.                 //Once the browser is opened with the given Url ,by default it will not be full maximized , we need to maximize it by using the above code.  
  19.                 IwebElement Element = driver.FindElement(By.Id("Frame1")); // To identify a frame i.e Frame1 we need to identify it by using either Id or Name properties.  
  20.                 // Here 'Element' variable holds Complete information about the frame such as Frame displayed / Exists ,Frame coordinates , etc.  
  21.                 driver.SwitchTo().Frame(Element)  
Here, the Frame() method has three overloaded Methods like,
  1. Frame(int indexOfFrame) Here we can identity the frame based on its index value.
  2. Frame(int id) or Frame(string name)Here we can identity a frame with the Id property or Name property of the iframe.
  3. Frame(IwebElement Element) Here we can identify a frame with various properties like Id , Name , Xpath , TagName , className etc like below,
    1. IwebElement Element=driver.FindElement(By.Name("Frame1"));  
    2. IwebElement Element=driver.FindElement(By.XPath("//[@id='Frame1']"));  
    3. IwebElement Element=driver.FindElement(By.TagName("iframe"));  
    4. IwebElement Element=driver.FindElement(By.Class("Frame1"));  
Once the IFrame is identified with its various iframe properties, we can pass its 'Element' variable to Frame method like below,
  1. driver.SwitchTo().Frame(Element);  
  2. //Once frame is identify from the step3 , we need to switch into the frame i.e iframe 1 inorder to automate the various controls avialable inside the iframe1  
  3. IWebElement Fname=driver.FindElement(By.Id("Fname1")); // once entered into the frame1 we need to identify the first control that is FirstName with its control property Id="Fname1",  
  4. // Here from the above code 'Fname' variable holds all the information related to the FirstName Control.  
  5. Fname.SendKeys("Khaja");  
  6. //If we want to Enter the given text we can use the SendKeys() method to enter a value to the textbox.  
  7. Thread.Sleep(2000); // Once the value is entered into the textbox we can wait for given time say 2 seconds so that we can automate each andcontrol by specifying certain time period.  
  8. IWebElement Lname=driver.FindElement(By.Id("Lname1")); //Similarly Lname variable holds all the information related to LastName.  
  9. Lname.SendKeys("Moizuddin"); // This code is used to enter the given value to the LastName Textbox.  
  10. Thread.Sleep(2000); // It is used to wait for 2 seconds, for waiting for every operation performed.  
  11. IWebElement Email=driver.FindElement(By.Name("Email1")); // Email can be identified with its Id property or name property and 'Email' variable holds all the information related to Email Field.  
  12. Email.SendKeys("[email protected]"); // It is used to Enter the given value to an email textbox.  
  13. Thread.Sleep(2000); // Used to wait for 2 seconds.  
  14. IWebElement Password=driver.FindElement(By.Name("Password1")); // Password can be identified with its id property or name property and 'Password' variable holds all the information related to Password field.  
  15. Password.SendKeys("Password12345"); // It is used for entering the given value into the password textbox.  
  16. Thread.Sleep(2000); // wait for 2 seconds time.  
  17. IWebElement LoginClick=driver.FindElement(By.Id("Login1")); Similarly Login field can be identified with its id property and 'LoginClick' variable holds all the information related to Login field.  
  18. LoginClick.Click();// If we want perform click on the button say Login then we need to use Click() method.  
  19. Thread.Sleep(2000); // waits for given time duration.  
  20. driver.SwitchTo().DefaultContent();  
The above line of code is used to come out of the frame which is present being executed.

If we don't use the above code, the focus will be in the current executing frame, whenever we are finding the iframe2 with its properties then the iframe2 will find within the iframe1 which is incorrect so it throws an Exception - FrameNotFoundException.
  1. // Execution of Second Frame ie. Frame2  
  2. IWebElement Frame2= driver.FindElement(By.Name("Frame2")); // With the above line of code we will come out of the frame which is present being executed that is iframe1.  
  3. //To identify iframe 2 we have its id and name property that is id="Frame2" and name="Frame2".  
  4. //'Frame2' holds all the information related to iframe2.  
  5. driver.SwitchTo().Frame(Frame2); //Once iframe2 is identified we can switch into the the iframe2 , by providing the Frame2 variable in the Frame() method.  
  6. IWebElement SFname=driver.FindElement(By.Id("Fname2")); // FirstName of iframe2 can be identified with id or name property.  
  7. SFname.SendKeys("Khaja"); // It is used to send or enter the given value to FirstName field textbox.  
  8. Thread.Sleep(2000); // Used to wait for given waitime.  
  9. IWebElement SLname=driver.FindElement(By.Id("Lname2")); // LastName of iframe2 can be identified with id or name property and SLname holds all the information related to Lastname field.  
  10. SLname.SendKeys("Moizuddin"); // It is used to enter the given value to the LastName textbox.  
  11. Thread.Sleep(2000); //Used to wait for specified waitime.  
  12. IWebElement SEmail=driver.FindElement(By.Name("Email2")); // Email of iframe2 can be identified with its id or name property and SEmail holds all the information related to Email field.  
  13. SEmail.SendKeys("[email protected]"); //It is used to enter the given value to Email textbox of iframe2.  
  14. Thread.Sleep(2000);// used to wait for given time.  
  15. IWebElement SPassword=driver.FindElement(By.Name("Password2")); // Password field of iframe2 can be identified with either id or name property.  
  16. SPassword.SendKeys("Password12345"); // Used to enter the given value into Password field.  
  17. Thread.Sleep(2000); //Wait time.  
  18. IWebElement SLoginClick=driver.FindElement(By.Id("Login2"));  
  19. SLoginClick.Click();  
  20. Thread.Sleep(2000);  
  21. driver.SwitchTo().DefaultContent(); // Once all the controls are automated from the iframe2 then we need to come out of the iframe2 inorder to enter into iframe3 and automate controls available in iframe3.  
  22. //The above code helps to come out of the frame which is present being executed. i.e iframe2.  
  23. // Execution of Third Frame ie. Frame3  
  24. IWebElement Frame3= driver.FindElement(By.Name("Frame3")); // iframe 3 we can find using its properties like Id or Name , Frame3 holds all the information related to iframe3.  
  25. driver.SwitchTo().Frame(Frame3); // Once the iframe3 is found we can switch it inside the frame by using this line of code.  
  26. IWebElement TFname=driver.FindElement(By.Id("Fname3")); within the iframe3 we can find FirstName by using either Id or Name property.  
  27. TFname.SendKeys("Khaja"); This line is used to enter the given value to FirstName textbox which is available in iframe3.  
  28. Thread.Sleep(2000); Used to wait for the given specified time.  
  29. IWebElement TLname=driver.FindElement(By.Id("Lname3")); // LastName control can be identified with Id or Name property.  
  30. TLname.SendKeys("Moizuddin"); It is used for entering the given value to LastName textbox of iframe3.  
  31. Thread.Sleep(2000); // Wait for specified time.  
  32. IWebElement TEmail=driver.FindElement(By.Name("Email3")); // Email control can be identified with Id or Name property & TEmail holds all the information related to Email field.  
  33. TEmail.SendKeys("[email protected]"); Used to enter the given value to an email textbox.  
  34. Thread.Sleep(2000); // wait for given specified wait time  
  35. IWebElement TPassword=driver.FindElement(By.Name("Password3")); Password control can be identified using Id or name property & TPassword contains all the information related to the password field.  
  36. TPassword.SendKeys("Password12345"); // Used for entering the given value to the password textbox .  
  37. Thread.Sleep(2000); // wait time.  
  38. IWebElement TLoginClick=driver.FindElement(By.Id("Login3")); // Login button can be identified using Id or name property.  
  39. TLoginClick.Click();Once the control is identified we can perform click operation using click() method.  
  40. Thread.Sleep(2000);  
  41. driver.SwitchTo().DefaultContent(); // This code is used to come out of the present executing iframe. ie.iframe3  
For Example

If we have some other controls outside IFrames, we need to come out of the Frame using DefaultContent() method and need to execute those following the controls like,
  1. IWebElement OuterFrameCtrl1 = driver.FindElement(By.Name("OuterTxt1")); //Can be identified using Id or name property of external control outside of frame.  
  2. OuterFrameCtrl1.SendKeys("//Some Input value to textbox"); // used to perform sendkeys to given control.  
  3. Thread.Sleep(2000);  
  4. IWebElement OuterFrameCtrl2 = driver.FindElement(By.Name("OuterTxt2")); // Can be identified using Id or name property of external control outside of frame.  
  5. OuterFrameCtrl2.SendKeys("//Some Input value to textbox"); // used to enter the given value to textbox.  
  6. Thread.Sleep(2000);  
  7. }  
  8. }  
  9. }  
That's it. Thanks for reading. Please provide me with feedback in the comment box.


Similar Articles