New to Telerik Test Studio? Download free 30-day trial

How to Handle Application with HTML IFrames

Test Studio has built-in mechanism to recognize iFrames in web applications' DOM tree and records the elements in these automatically. Depending on the page structure and implementation of frames, you may even miss the fact there are frames in the application and related to the elements added in the test project.

If you need to know more about HTML frames structure, this article describes how elements in iFrames are recorded and represented in the Test Studio project.

How Frames are Listed in the DOM Explorer

The target page of the below example is a demo W3School page for iframes. The test sceanrio verifies the displayed text on few elements on the page (highlighted on the image below).

Frames Demo App

The W3School demo pages always display the result of a sample in a frame. For this particular example, there is one more frame nested in the Results frame. In Test Studio DOM Explorer the nested frames are represented as in the actual DOM tree of the page.

DOM Explorer of Frames Demo App

If there are any frames on the page, these will be listed in a dropdown in the Test Studio recorder DOM Explorer - this is the parent node filter dropdown. It allows you to choose which node from the DOM tree to display in the Explorer and work with it to add steps against its elements.

DOM Explorer parent node filter

Recording Actions against IFrames

In the general case, there is nothing specific in the recording experience against the elements of a frame - you can directly perform the actions against the page to add steps in the test, or choose an option from the Highlighting menu.

The steps recorded against elements in frames look the same way as any other step. What makes the difference is how the target element is listed in the Elements Explorer - there is an additional node, which represents the frame element for Test Studio.

Steps Recorded in Test


Find out more for the frame nodes in the Elements Explorer in this dedicated article.

Disable Auto-Refresh for the DOM Explorer

If the application under test has dynamically changing content, for example a countdown watch, this causes the Element Tree in the DOM Explorer to constantly refresh. In such cases you can use the Freeze/Unfreeze button to stop the auto-refresh action, and the Refresh button to fetch the current state of DOM tree.

Freeze/Unfreeze/Refresh DOM tree state

In this article