How to test in iframes
Introduction
An HTML iframe is used to display a web page within a web page
Most modern web applications might use iframes in some sections.
For example, in a Checkout page, the credit card inputs are usually inside an iframe.
Endtest allows you to easily interact with elements from iframes.
Detect if an element is inside an iframe
We can detect if an element is inside an iframe by inspecting the element with the Chrome Developer Tools.
An easier way is to perform a Right Click near the element in your browser and see if View Frame Source option is present in the context dropdown.
Interact with an element that is inside an iframe
Since the iframe is a separate web page, we have to tell the test to switch the focus to that iframe before interacting with an element from inside the iframe.
In the Miscellaneous action, you have the following methods:
Switch to iframeSwitch back to main
The Switch to iframe method will be used when we need to switch focus to the iframe.
When we are done interacting with the elements from the iframe, we need to use the Switch back to main method to switch the focus back to the main web page.
Dealing with nested iframes
There are situations where you might encounter nested iframes.
An iframe which is inside another iframe is called a nested iframe.
The solution is to switch focus to the first iframe, and then to the next one.
After you're done interacting with the elements from the nested iframe, use one Switch back to main step to return the focus to the main web page.
Dealing with iframes that have dynamic IDs
In some cases, an iframe might have a dynamic ID.
Since a dynamic ID keeps changing, it isn't a reliable locator.
The solution is to write a custom XPath or CSS Selector for that Switch to iframe step.
The
Switch to iframeaction is using theswitch_tomethod from Selenium WebDriver.The
Switch back to mainaction is switching to thedefault_content.