The IFrames panel is used to navigate and test web applications which use IFrames.
The IFrames panel lists all the IFrames on the current page, refreshed every second.
When the mouse cursor is above an IFrame in the list, the rectangle of that IFrame will be highlighted in the browser if available.
This can be illustrated by navigating to a page with IFrames, for example, the Theme Preview page on wordpress.org.
The list of IFrames is shown in the IFrames panels.
If the mouse hovers the first IFrame, which is the preview of the selected theme:
Then that IFrame will be highlighted in the browser:
This can be used to inspect the IFrames of a page.
The panel can also be used when writing the test, by right clicking an IFrame, it is possible to either Enter the IFrame right now – as part of writing a test script or just for debugging, or to Copy a step to enter the IFrame to the clipboard, which can than later be pasted in a test script.
It is a useful exercise when writing a test script, to use the “Enter IFrame” menu item, and watch the Element Spy panel change when an IFrame is entered.
IFrames are handled differently when testing a web-application, because each IFrame is a separate HTML document / tree. This means that the element tree follows the current IFrame (or the top page) and changes when an IFrame is “entered” in a test script.
This can be observed when a test script for the previously shown “Wordpress Theme Preview” page is under test.
If we try to select the “Theme Preview” headline of the preview, only the IFrame can be selected.
But if the preview IFrame is entered:
Then it becomes possible to select the Theme Preview headline:
To exit the IFrame again, the “Exit IFrame” method should be used, either in the test script or, while writing the test script, by calling the method from the workbench:
