How to Handle Frames in Selenium Webdriver

a hi everyone this is mukesh from learn automation comm so today we are going to discuss how to handle or how to switch frames in selenium-webdriver this is one of the most important topic in selenium-webdriver so we'll divide this lecture in this following way so agenda for today's what is frames how to create your own frame so you will find so many application in the market where you find web web application with so many iframes so how to create your own frames we will discuss today then we'll see some of the sample application where you can see these frames and iframes then we will talk about how to handle this frame different ways to switch iframes and find if there is small assignment for you so you will get a clear picture so before showing you the actual application let us discuss what is iframe so frame and iframe both are same so in case if we are getting these two words don't confuse because both are same so an iframe inline frame is an simple HTML document embedded inside another HTML so you will find so many application where you will get one complete page and you will find a small sub pages inside that page so I have one sample scenario which I am going to show you in just few minutes and another example I just took this from the w3 school so it is a perfect definition and under the another definition like I I frame is just an HTML element often used to insert content from another source like advertisement in a web page and so on so this is a separate tag available so you can use this iframe and just put SRC so let me show you this first so the sample application is this so you can see this is the sample page which I created just a pure HTML page I have given the name as my frames not as team so inside this my frames dot html' you can see I have three different websites so the first website which I am displaying is my blog another website which I embedded is w3 school and the third website is selenium h0 2rg so how it is possible to embed three website into one using this iframe so if you check this I have different iframe and now I can use this but selenium will not allow you to directly use this iframe you need to switch to these frames first and then you can access these websites so this is what exactly I was talking about so how I created this frame so this one separate tag available iframe give the SRC like from where you want to get this site you can change this width and height and you can give some additional attribute as well so let me show you the page source if I simply right click and if I say view page source you can see I simply created one as TM Ln a close this HTML and I created three iframes here one iframe which simply points to my blog and I have given this width height and you can change it based on your requirement and you can see I have given one additional attribute core name just for make you understand how exactly this name ID and title works so we'll discuss about this in just few minute as of now let's focus on another frame another frame will contains w3schools comm width height 400 400 and the third eye frame will talks about selenium HQ dot o-r-g and forcefully I have not given any ID and name for this frame I have only given the title and why I have done this you will get to know in just few minute so this application contains three websites and now we have to check whether we can access these applications or not so now selenium provides three different ways to switch to an iframe so the first one using name or I the second one is using index and third one is which is most important called web element so let's go to eclipse I will create a separate package let's say iframe demo and quickly I will write three lines of code so if you do not switch to these frames you cannot access this application because the reason is by default selenium will focus on the parent window and what is this parent window this is the parent window like click here facility in tutorial start four nine five so this is your parent window so by default selenium will focus here so if you need to focus here or you need to do some operation inside these frames you have to switch to this frame first your operation and come back to the parent okay so we are going to do the same thing and after this tutorial you can debate on this topic because we do we have only three ways to switch to any frame and I will show you some live examples where you can find these frames so as of now I just created one class called frame demo and I have created one method called test frames I am using testing G so I going to import testing G now I will start my Firefox web driver driver equal to new Firefox driver so it will ask me to import this let's import now I will manage dot Windows dot maximize now I will pass the URL where I will get frames so this is the dummy application which I created so you can also create like this okay you don't need any this page you can also write this code from your side and save dot HTML and you will get the same page so again I will go back and I will pass the driver dot get now let's assume I have to click on this particular search bar okay just the one search bar button if I click on this I will get this input box then I need to type something let's say CSS so first of all I need to switch here to this frame then I have to click here right now if you check this I have installed this Firebug in fire path so now if you go to this HTML and simply select this now you can see let me explore this so this is the anchor link okay and if you simply scroll up you can see this is coming inside an iframe right so if I simply see if I focus on the first time frame it is focusing on my blog if I put mouse or on the second iframe it is focusing on w3 school and the third iframe is selenium HQ dot watching so let's try with this first I want to switch to this frame and now selenium provides if you have ID of that frame you can switch using this ID if you have name you can switch using name as well but let me use this ID first okay so to switch to any frame we need to write driver dot switch to dot frame right so now you can see I am getting three option the first one is in teaser here it is asking you the frame index okay so as of now we are not worrying about index we have selected string so here if you give ID it will switch to that frame okay and once you switch to this frame you can access this complete w3 school com so we already switched now let me click on this particular search box okay so as often I will simply take this X path okay you can write your own XPath as well because here we are getting title so let's say if you want to use this I will use this custom X path if you want to simply do copy/paste it's your wish so you can see I am able to identify using this custom X path which we created right now so I will say driver dot find element by X path and dot click and if you do this click he will get this particular search box and let's see what are the things we have so we have name here called search right this input box so I will take this now I will say driver dot find element by name and I will type CSS that's all so this is just an example to show you the main thing once you sister this frame you can do any activity now once you are in this frame you can only perform operation on this frame now if you want to perform anything in this main page you cannot okay so if you want to switch from one frame to another frame or one frame to the parent page you have to come back to the parent page first to do this we need to type driver dot sis to default content so this particular state means line number 23 will simply switch to the parent window okay so let me run this code so this is first way here I have taken ID you can also take name because ID and name both will be behaving in a same way so let's run this code and see how it works and once I will switch to the default content I want to click on this link so I will inspect this link and once I click on this link it will navigate to my blog that learn - automation comm so let us do this I will say driver dot find element by XPath dot click so it is a small script maximize open my application switch to the second frame click on this type CSS come to the parent window and click on this so this particular line is important so let us run this code and see how it works so currently I am using selenium version is two point four eight the latest one is two point five two so in case if you want to upgrade your selenium jaws you can update so interview questions comes in a different way so this is one of the interview question as well like how to identify frames and how to switch so in the next example I will show you how to count the number of frames in your application so let us wait for this so once all frames will be loaded it will perform the next task still loading my internet is slow so you see it clicked on this search box and it types ESS now it will switch back to the parent window and click on another link so it is navigating to my blog and if you go back to your code the test has been complete and it's working as expected so the first way using ID or name so totally up to you okay if you want to switch to the frame using ID or name but it's optional like in your application you might get you might not get this idea name so the reliable one is the last one second one using index but index one also is not that reliable and the reason is right now you are able to see you have three high frame because you are able to see this let's say if they added one more i frame in your application then your code will fail right because internally they can use so many frames iframe so better to use either ID or name or using web element and the question how to count number of frames so we have one more method so if you see I have a method called find elements and if you notice this find elements will return you list of web elements right so I will search using Dagenham right so I want to search tag call iframe so what it will do it will search all the iframe inside my application and it will return me the list of web elements so if I simply say dot size it will return me the count so if I store this total frames so this particular statement will find all the frames and it will return me the size so in our case we will get count as three so now you can answer one another caution in interviews how to find total number of frames in your application to this particular statement will give you the answer total frames in application is total frame so let us run this test then we will see the last one how to switch to frame using web element I will close the previous sessions web firefox always takes time so if you want to try just Rhine chrome chrome will be faster as compared to Firefox so still loading you can see this still loading yeah so you can see now it has clicked on the search bar now it will type CSS and it will click on this link outer link and now if you go back to this total frames in application is 3 because now it is able to count the number of frames so hope this is clear for everyone so let us try one more example so that example will focus on this so I will show you the second one I will show you the third one one assignment which I was talking is this you can switch to the first frame do some operation come back to the main page and click on this link click here for cilium tutorial so as of now let's check this let us say I want to click on this project I want to click on this project tab so before click I need to switch to this frame so if I go up let's say this is TM L I can see this is coming inside in frame rate but I can see here I do not have any ID and I do not have any name for this particular iframe but I can see I have SRC I have title and other attributes so what we can do we can find this iframe okay then after finding this iframe we can switch now question comes how to find this iframe now we have so many attributes to identify so let us say I have this title right so if you have referred my previous tutorials like how to write XPath you will get to know how to find this iframe but if still if you have not visited go to my previous videos and check how to write dynamic XPath and selenium webdriver so let's search an iframe so again I will use double slash iframe at the rate title so you can see I am able to find this frame right so let me create a fresh glass so it will not confuse you so just copy and paste and I will say copy of fresh demo new so everything will be same this one yeah so now before switching let us find out that particular frame so we will write web element I will say my frame and I will search using XPath so we have written 1x pass rate XPath was just go back this so this particular statement will find your iframe and it is asking me to import this so let us import now if you want to switch using this web element and this is one of the most reliable one so against a driver dot switch to dot frame and you can see third one is asking for the web element so just copy this my frame now this particular statement line number 29 will switch to this third frame now you can do any activity on this particular frame so as of now I simply want to click on this project tab so I will say travel dot find element by XPath dot click and I don't want anything else so if I click on this project so selenium projects will load as of noids yeah it is loaded but not completely so once it will load it will show the complete projects yeah so these are the projects delivered delivered by selenium yeah like this selenium RC ID and so on so let's run this code and I will simply remove this after clicking on this Maya project let's wait for five seconds so as of now I will give thread dot slip of five seconds so this will hold my test execution for five seconds then I will switch to the default catenin as previous example I will switch to the main page and I will click on a link so let's run this last example and I have an interesting fact after this video so let's see this execution so I have one Skype extension so by default it loads to this Skype extension so still loading now you can see it has it has started and it suits to this project and it is loading right and after 5 second it clicked on that links it is moving to the homepage so now if you go back tests has been completed right so we have three ways to I already have shown showed you so when you can try from your end and one more thing like if you need to find out do we have this element inside frame so just focus here as of now if I simply inspect this link in the left hand side you can see I am getting top window right top window means this is not inside a frame this is on the parent window but we inspect the same element let's say I want to inspect this learn HTML you can see I am getting one iframe then this hash symbol w3c it means this is inside an iframe right where this particular link resides in the same way if you go to this one also you will get an iframe and this as well so in Firefox you will get this one like you can see one more additional functionality you can detect easily but in chrome you need to check manually now one more thing here so if you check here if you do not have page label scroll but now we having three inside scroller like this is one scroll this is one scroll and this is one scroll right so how to scroll inside a frame that is my next topic so in the next video we'll see how to scroll for a particular view let's say if I want to click on this selenium RC selenium remote control so without a scroll if I want to click selenium will throw an exception and say element not visible right so first of all we need to scroll till that element then to operation so that is the next topic how to scroll into a particular view because page level scroll is quite easy but element level scroll is little bit tough we need to see using JavaScript executor so that we'll discuss in the next video so the first assignment you can try with this iframe and another assignment is you can see this application right service now I will share this URL with you so if you need to enter username and password using selenium you cannot because this particular area is inside an iframe so if you need to check right click on element and say inspect so you can see I am getting ID easily username but if you simply scroll up you will see this particular login window is coming inside an iframe where ID equal to this diet equal to this and name equal to this so first you need to switch to this iframe then only you can type username and password and click on login as of now if you do not switch then you cannot do any operation right so try to switch to this frame and apply the logic which we already discussed right now so I will share this URL in the description of the video and try to create your own iframe and trust me you cannot go beyond this and you can debate on this topic so that's all I have for this video so let's check whether we have covered everything or not we discussed what is frame how to create your own frames sample applications different way of switching frames and finally assignment so that is I that's all I have for this video so in case if you have any doubt just drop in email and if you need the complete code you can get the code from a block that is learn - automation comm thank you so much and have a nice day bye bye you

Channel: Mukesh otwani

Views: 99,930

Rating: 4.8560605 out of 5

Keywords: Selenium Webdriver, Automation, Java, Handle Frames, Switch Frames

Id: o_S5Bhh_aSc

Length: 27min 3sec (1623 seconds)

Published: Mon Mar 07 2016