Testcafe-hammerhead: Can't typeText into Braintree Hosted Payment input fields

[Jayele1]

What is your Test Scenario?

I'm attempting to input test credit card info into Braintree hosted payment fields.
Each input field is its own iframe so I'm doing the following.

await t.switchToIframe(selector);
await t.typeText(selector, num);

example of Braintree hosted fields
https://developers.braintreepayments.com/guides/hosted-fields/overview/javascript/v2

What is the Current behavior?

The input field is clicked but text is not typed in

Get this error in the console

What is the Expected behavior?

After switching iFrames
should be able to type text into the input field

Your Environment details:

• testcafe version: v1.8.3
• node.js version: v10.15.3
• command-line arguments: testcafe safari e2e/tests/ --selector-timeout 6000 --assertion-timeout 6000 --skip-js-errors
• browser name and version: Safari 13.1
• platform and version: macOS 10.14
• other:

[aleks-pro]

Hello @Jayele1 ,

Thank you for the information. I have reproduced the issue in the following test:

import { Selector } from 'testcafe';

fixture `New Fixture`
    .page `https://developers.braintreepayments.com/guides/hosted-fields/overview/javascript/v2`;

test('New Test', async t => {
    await t
        .switchToIframe(Selector('[title="Codepen example of a Hosted Fields integration"]'))
        .switchToIframe(Selector('#result-iframe'))
        .switchToIframe(Selector('#braintree-hosted-field-number'))

        .click(Selector('#credit-card-number'))
        .typeText(Selector('#credit-card-number'), '12345')
        .expect(Selector('#credit-card-number').value).eql('12345');
});

We will research it and update this thread as soon as we have any news.

[Jayele1]

Thank you!

[rob4629]

Is this a duplicate of DevExpress/testcafe#4793 ?

[AlexKamaev]

@rob4629
This issue looks very similar to DevExpress/testcafe#4793. We need to research it thoroughly to say whether it is a duplicate of DevExpress/testcafe#4793.

[AlexKamaev]

@rob4629 @Jayele1
I researched this issue and found that it is not related to DevExpress/testcafe#4793. The cause of the issue is very similar to https://github.com/DevExpress/testcafe-hammerhead/issues/2012. However, we still need to do some research. I'll move this issue to the testcafe-hammerhead repository.

@Jayele1, you mentioned that you cannot type text into the input field. However, the problem is in codepen iframe. Did you try to use braintree input fields in your project without codepen? Are there any problems?

UPD.
When I reproduced this issue, I got the iframe did not load content error but not the blocked a frame with origin error. However, I checked DevExpress/testcafe#4793 on Safari one more time and got the blocked a frame with origin error. So these issues still can be related.

[Jayele1]

Hi @AlexKamaev, yes where I am seeing the error is a project without codepen. Also I ran the same test on chrome instead of safari and it was able to work for me. So this looks like a safari specific issue like you found here DevExpress/testcafe#4793 Thanks for your help!