In this section we will discuss on the IFrame in Selenium. We have covered the concept of handling alert popup in selenium in previous section. This section will briefly explain on the handling the IFrame in a web page.
Before continuing the handing Iframe in Selenium, we need to understand what Iframe is actually.
Iframe is a HTML Web page embedded inside another HTML web page. Iframe is generally used for displaying the advertisement within a webpage from external source.
Iframe is explicitly defined on HTML document using tag named <iframe>.
You can ask, how you will get to know that a web page has iframe or not?
The simple answer is from page source. You need to click right click on the web page and go to source page of the website and search for <iframe> tag. If that page source contains <iframe> tag then the web page has the iframe. See the below screenshot to know about iframe.
From the automation testing prospective, how we will handle the iframe if this is also a web page inside web page. Let’s understand the below code.
List<WebElement> iframe = driver.findElements(By.tagName(“iframe”));
Explanation:
In the above line, findElements() will search for the tag name with iframe and store in iframe variable which is a List type object. In this approach, this may return more than one iframe tag element. Once we stored all the iframe tag element in List type object “iframe”, we can traversed the list and operate based on the requirement.
If you want to return only one iframe element, then you need to use findElement(). See the below line.
List<WebElement> iframe = driver.findElement(By.tagName(“iframe”));
Handling Iframe in selenium:
In previous section, you understood the basic concept of handling iframe in selenium. Now let’s discuss briefly.
Selenium provides some in-built methods to handle the iframe. Like alert popup box, you need to use switchTo() method to navigate to the iframe. Below are some methods which required to handle the iframe.
frame(int frameNumber)
frame(string frameName)
frame(WebElement frameElement)
defaultContent()
frame(int frameNumber)
This method will allow script to find the iframe which has the id(iframe id) mentioned in the frame() method. This is generally known as index based.
The frame index starts from 0. Second frame has the index 1and so on. \
When the mentioned iframe id is not found, at that time, this will throw NoSuchFrameException. We can use the id of the Iframe once it is identified. See below code.
Example:
driver.switchTo.frame(0) // Here index of the iframe is 0
driver.switchTo.frame(ae82pms0) // ae82pms0 is the id of the iframe
frame(string FrameName)
This method will allow script to find the IFrame which has the frame name mentioned with >iframe> tag.
The frame name is actually developer defined.
Frame name should be enclosed with double quote (“ “) to be consider as string.
When the mentioned iframe name is not found, at that time, this will throw NoSuchFrameException. See the below code.
Example
driver.switchTo.frame(“Frame1”) // Here frame name is the name of the frame.
Frame (WebElement frame Element)
This method allows user to find the iframe by using the web element. You can find the web element by using any of the location strategy like ID, Class Name, Name, LinkText, Partial Link Text etc.
When you are trying to find the frame which is not present in the web page then this method will throw NoSuchFrameException. Same like this it you are trying to fin the frame which is not active in the current page then it will throw StaleElementReferenceException.
Example
WebElement frameElement = driver.findElement(By.id(“ae82pms0”));
driver.switchTo.frame(frameElement);
defaultContent()
This method is used to navigating the iframe from iframe to main page. Below is the syntax to achieve this.
driver.switchTo.defaultContent()
There is an another method which help to navigate to iframe is driver.switchTo().parentFrame (). The main difference between defaulContent and parentFrame is that the first method switches the control to the main web page regardless of the number of frames within the web page, while the second method switches the control to the parent frame of the current frame.
Example with Sceanrio
Difference between iFrame and Frame
| iFrame | Frame |
|---|---|
| An iFrame is used to embed the content of the external websites into the web page, in order to avoid cross-site scripting issues.. | A frame is used to divide a page into multiple sections, with new content on each section. |
| An iFrame is considered to be less secure than a frame, as iFrame allows developers to embed content from the third-party websites. Thus, an iframe requires a developer to trust the content which he has embedded in the iframe. | Frame is more secure than iFrame |
Handling Dynamic Frames in Selenium:
From the above section, you noticed that we can find the iframe in web page by using multiple strategy like ID, Frame Name, Frame Element, index, Default Content etc. But one disadvantage of these methods is you will not get the actual element if the value of the Id or name is changing every time.
For example
<iframe id = ‘frame_12>…</iframe>
In the above example Numeric value of frame id is changing and frame_ remain constant with page load.
What will be your approach to navigate to the iFrame.
Yes . We can identify the above frame uniquely using the below XPath<Link of Xpath>
frame[contains(@id,’frame’)]