Unable to click in object associated with iframe

Hi guys

I’m working on a testcase where I work until a stage, but after to clic on a button (Confirm button) and enter into another screen, I can not perform any action. I’m still working in the same Iframe, but somehow katalon can’t find this Iframe, can anyone help me?

Attach images of the error.

thanks

2 Likes

Hello Mate,

I got a similar problem once, maybe @Brandon_Hein could help you. He help me a lot.

regards
DG

1 Like

I’m guessing you’ve defined the parent iframe in the TestObject itself?:

image

If so, I would recommend that you don’t use this functionality, and that you handle switching between frames yourself in the test code:

WebUI.switchToFrame(findTestObject('path/to/iframe/object'), 30);

// Do a bunch of steps that work with elements within that frame...

WebUI.switchToDefaultContent();

My guess as to what’s happening is that you are successfully switching to the expected iframe in the first step, and then Katalon is trying to switch to that same iframe AGAIN, but can’t find it, either because

1.) You are already in that iframe’s context (i.e. there’s not another iframe at //iframe[@name='EMBPAGE1'] that is a child of the iframe you are already in).

2.) The page has reloaded, and your elements are stale.

This is why I don’t use the “Parent iframe” property in my TestObjects. It just confuses things in my opinion.

6 Likes

Hello

I did what you mentioned and it WORKED, remove the iframe from that object (have parent object = No).

Thank you very much genius.

image

1 Like

I’m unable to click on the object on the iframe. I did remove the parent object on the object repository but it still didnt work.

Find below the code:
WebUI.switchToDefaultContent()
WebUI.switchToFrame(findTestObject(‘Page_Lening Berekenen - Lloyds Bank/iframe’), GlobalVariable.G_veryLongTimeOut)
WebUI.click(findTestObject(‘Page_Lening Berekenen - Lloyds Bank/iframe/button_Onderteken document’))

Object is getting highlighted on the web spy. can anyone helo

1 Like

Hello Brandon, Hope you’re doing great!!

I’ve a similar issue on my Payment page, where the script can able to identify and enter the card details which is under iframe whereas it could not identify and enter the exp date and cvv number which are located under the same iframe. Can you help me on this one?

Site link is - Made for riders, by riders. | Specialized.com

You can navigate to payment page by adding an item to cart and proceed. Any help in this regard would be greatly appreciated. Below are the screenshots for your attention!

Thanks in advance,
Ismail

(upload://l9Tbc4MnMeUs0a5If3Cx1SSDEq8.jpeg)

Looking at the HTML, they are NOT in the same iframe. Each field is contained in a separate iframe. For example, the Expiry Date and CVV fields are in two different iframes, as shown below:

So you will need to switch to the iframe for each field you are trying to set. Make sure you are switching back to default content between fields as well. Something like:

WebUI.switchToFrame(findTestObject('path/to/cc_number/iframe/object'), 30);
// Set credit card number...
WebUI.switchToDefaultContent();
WebUI.switchToFrame(findTestObject('path/to/expiry_date/iframe/object'), 30);
// Set expiry date...
WebUI.switchToDefaultContent();
WebUI.switchToFrame(findTestObject('path/to/cvv/iframe/object'), 30);
// Set cvv number...
WebUI.switchToDefaultContent();

Hello Brandon,

Thanks for your prompt reply.

If you see the elements of the 3 iframes, it is apparently having the same source URL. However on the Live site the src URL domain would be ‘checkoutshopper-live.adyen.com’ whereas for the test site the src URL domain would be ‘checkoutshopper-test.adyen.com’. Below are the elements copied from the 3 iframes.

<iframe src="https://checkoutshopper-live.adyen.com/checkoutshopper/assets/html/pub.v2.2615054254860704.aHR0cHM6Ly93d3cuc3BlY2lhbGl6ZWQuY29t.Ib4DgpI-g_RqBSB2BCHpckrx9eeNd5j6zriz3EKqors/securedFields.2.2.0.html?encryptOnly=true" <iframe src="https://checkoutshopper-live.adyen.com/checkoutshopper/assets/html/pub.v2.2615054254860704.aHR0cHM6Ly93d3cuc3BlY2lhbGl6ZWQuY29t.Ib4DgpI-g_RqBSB2BCHpckrx9eeNd5j6zriz3EKqors/securedFields.2.2.0.html?encryptOnly=true" <iframe src="https://checkoutshopper-live.adyen.com/checkoutshopper/assets/html/pub.v2.2615054254860704.aHR0cHM6Ly93d3cuc3BlY2lhbGl6ZWQuY29t.Ib4DgpI-g_RqBSB2BCHpckrx9eeNd5j6zriz3EKqors/securedFields.2.2.0.html?encryptOnly=true"

Hence am using one iframe object with src ‘starts with’ - https://checkoutshopper-test.adyen.com/checkoutshopper/

Also i’ve changed the test case based on your approach by switching to iframe in between test cases however and getting the same error as could not locate the element.

Kindly advise!
Ismail

Right, each iframe element looks exactly the same (same attributes, same values, etc.), however, they are still 3 separate elements nonetheless. If you simply use the same xpath for each iframe switch, it will always just pick the first one that it finds.

In this case, since you have no way of uniquely identifying them based on attributes, you will need to identify them by index. For instance, you could use a parameterized xpath and feed in an index like so:

xpath in your test object:

(//iframe[contains(@src, 'https://checkoutshopper')])[${index}]

call your test object with an index (the example below would find the second iframe):

WebUI.switchToFrame(findTestObject('path/to/test/object', ['index' : 2]), 30)

2 Likes

Oh, wow. This works pretty neat!! Many thanks @Brandon_Hein you are awesome!