testcafe: TestCafe hangs on click of submit button in an iframe when the click is submitting form and redirecting to a page of a different domain

Any update on this or possible work around?

@stella-jivkova This is indeed a different bug that has similar symptoms. Please open a new issue. Also, please attach a link to a repository that reproduces this bug so that we can run it and investigate.

@felis2803 the case is as follows: Our application is calling for 3DS verification of a credit card payment. The 3DS simulator loads on a new page and part of its contents (including the <form> to be submitted, a dropdown for choosing the response to be simulated and the submit button (of type <input>)) are inside of an iframe. Clicking the submit button is supposed to trigger addition of the slected response to the form data and then post the form data to a different domain. However, clicking the submit button triggers nothing and the execution is stuck at the 3DS simulator page.

Upon some investigation with our FE Dev we were able to detect that the submit form has an event listeren, which scope is being changed by TestCafe. I’m attaching a comparison of how things differ between the automated executin via TestCafe and a manual scenario.

Please, let me know if additional information is needed.

EDIT: After trying to work around the issue, there’s some important info to add - the <input> elements that fill the form data are not children of the form, but are separate elements also located inside the iframe. It looks like for some reason TestCafe is blocking the form’s access to those elements.

The workaround we’ve just found is to use ClientFunction() in order to recreate those elements as children of the form element and then use form.submit() directly, instead of triggering the submit with the Submit button.

@tomchan-bot There are no updates on this from our side. But as @Ogurecher mentioned above, there is a workaround one can do: switch to the iframe and click the submit button via ClientFunction instead of using the t.click action.

test('Switch and submit', async t => {
    await t.switchToIframe('iframe');
    await ClientFunction(() => document.querySelector('input').click());
});