What are iframes?

An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website. The IFrame HTML element is often used to insert content from another source, such as an advertisement, into a Web page. Although an IFrame behaves like an inline image, it can be configured with its own scrollbar independent of the surrounding page's scrollbar.


A Web designer can change an IFrame's content without requiring the user to reload the surrounding page. This capacity is enabled through JAVASCRIPT or the target attribute of an HTML anchor. Web designers use IFrames to embed interactive applications in Web pages, including those that employ AJAX (Asynchronous JavaScript and XML), like Google Maps or e-commerce applications.


Iframe Syntax:

<iframe src=”url”></iframe>

The src attribute specifies URL(web address) of the inline frame page.

 

How to Identify IFrame

By default, when the test starts, we will be in the main body of the page and we need to explicitly switch to an Iframe to interact with the elements inside that Iframe.


We can identify an iframe on a website in two ways:


1.Right-click on the page and click on View Page Source or inspect elements. On the page source, search for “iframe". If you find any iframe tags, it means the page includes iframes.


2. To check if a corresponding element is within an IFrame, the easiest method would be to right click the element and see if there's an item called 'Reload Frame', 'View Frame Source', or 'This Frame' as shown below:

 

How to handle  iframe  in Testsigma

The only thing you need to take care is that if you get a "No Such Element found" error in a step or if the element is not clicked as expected, most probably there's an IFrame within which the element is located.


You would just need to check if there's an IFrame and if yes, switch to it. You can use the Switch NLP for that.



Here are a few steps to add switch Step to your Test Case:


STEP 1: Select one of the switch NLPs. For example, Switch to the frame ui identifier


STEP 2: Now using the Testsigma Chrome Extention, select the frame by clicking on the frame, which you want to switch to.


When you click on the frame, the Xpath of the frame will be recorded to the UI-identifier.



Now you can interact with the elements inside that frame. Similarly, if you want to interact with a different frame, you have to switch to that frame before you proceed. Else, Test-case will fail as the elements inside that frame won't be accessible.