• Handling iFrame issue with Katalon Studio | Software Testing Material

    A very common type of control used in website is the HTML iframe. And this control needs to be handled in a specific manner when testing. This article shows you how to handle iframes properly in Katalon Studio.

    What is iframe?

    An iframe (Inline Frame) is an HTML document embedded in another HTML document. The iframe HTML element is often used to insert the content from another source, such as an advertisement, into a Web page.

    Why is it important to know how to test iframes?

    Verifying text and objects within iframes can be a challenge. For example, even though you can see a text displayed in an iframe, automation tools may not be able to detect the text. You have to tell your script how to traverse through a website’s iframes structure and select the correct iframe where the text and its object are present.

    Example #1

    1. Given that you want to capture the Comment text field of a certain question in Katalon Forum (this text field is an iframe), you can use the Web Object Spy of Katalon and see that it can detect the iframe in the red highlighted area.

    iframe issue

    2. Once the Comment iframe is captured, Katalon shows all of its child elements which you can see in the Object Spy dialog as below:

    Object Spy dialog

    3. As you save the captured object to Katalon Studio, its iframe is also included. This is illustrated in the following screenshot:

    Captured object to Katalon Studio

    4. Then, you can proceed to set the text to the Comment field by specifying the child element for the Set Text keyword as described below:

    Set the text to the Comment field

    Example #2

    1. Given that you want to capture the JQueryUI’s Drag and Drop example (this draggable control is an iframe), as shown in the screenshot below, you can drag the ‘Drag me around’ object to other areas of the iframe.

    capture the JQueryUI's Drag and Drop example

    2. Use the Object Spy to capture the iframe as usual. The Object Spy can detect, capture the iframe, and show all of the iframe’s elements accordingly.

    Object Spy to capture the iframe

    3. As you save the captured object to Katalon Studio, the iframe is also included as the object’s parent element. This is illustrated in the following screenshot (Note that you can uncheck the option to use parent iframe if needed):

    save the captured object to Katalon Studio

    4. Given the situation where you opt not to specify the iframe parent for an element, in order to interact with the element, you need to use the keyword Switch To Frame to have Katalon focus on the parent iframe before being able to interact with the element.

    The sample code below shows how to switch to the parent frame before using the drag and drop action on the elements within the iframe:

    how to switch to the parent frame before using the drag and drop action

    Common exceptions

    Noted that NoSuchFrameException or InvalidSwitchToTargetException exceptions are thrown when the target frame to be switched to doesn’t exist.

    Here is the link “Katalon Studio Complete Tutorial

    Sharing is caring.

    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on linkedin
    LinkedIn

    Like This Post?

    We have a lot more where that came from?

    We only send really good stuff occasionally, promise.

    Rajkumar SM

    Leave a Comment

    Your email address will not be published. Required fields are marked *

    Scroll to Top
    API Testing eBook

    DOWNLOAD FOR FREE