hammerhead.js __get$(document, "location").ancestorOrigins returns <unreadable>

[ssemrau]

What is your Scenario?

Fuse Microform iframes should be shown in given div containers.
See this doc: https://developer.cybersource.com/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ/microform-integ-getting-started/setting-up-client-side.html

What is the Current behavior?

When I test it manually all works fine, when I run the test script I get the issue that __get$(document, "location").ancestorOrigins returns value unreadable as per screenshot below

What is the Expected behavior?

__get$(document, "location").ancestorOrigins returns 'http://localhost:12345'

What is your public website URL? (or attach your complete example)

https://flex-microform-hammerhead-issue.azurewebsites.net/

What is your TestCafe test code?

import { Selector } from 'testcafe';

fixture('Azure')
    .page('about:blank');

test('Azure', async t => {    
    await t
        .maximizeWindow()        
        .navigateTo('https://flex-microform-hammerhead-issue.azurewebsites.net/');

    var mainWindow = await t.getCurrentWindow() 

    try {
        await t
            .typeText('#cardholderName', 'Tester')
            .wait(1000);
        
        await t.debug();

        await t
            .switchToIframe('#number-container > iframe')
            .typeText('[name="number"]', '4111111111111111')
            .switchToWindow(mainWindow);
        
        await t
            .switchToIframe(`#securityCode-container > iframe`)
            .typeText('[name="securityCode"]', '123')
            .switchToWindow(mainWindow);

        await t
            .click('#pay-button');    

        await t
            .wait(1000)
            .click('#pay-button');    
    } catch (ex) {
        console.error(ex);
    }

    await t.debug();
});

Your complete configuration file

.testcaferc.json
{ "skipJsErrors": true, "hostname": "localhost", "port1": 12345, "port2": 12346 }

Your complete test report

No response

Screenshots

Steps to Reproduce

1. Run automated script in chrome
2. When script stops open dev tools
3. Switch to Console
4. Unclock the page and press Mount Security Code button
5. Expected error should be

correlationId: undefined
details: undefined
informationLink: "https://www.cybersource.com/products/payment_security/secure_acceptance"
message: "You have not supplied a valid capture context."
name: "MicroformError"
reason: "CAPTURE_CONTEXT_INVALID"

6. Open iframe.min.js and format it it so that it's not minified, add breakpoint in line 2772 as per screenshot below
   
7. Press Mount Security Code button again and in debug inspect document and __get$(document, "location") variables

TestCafe version

1.18.6

Node.js version

v14.17.6

Command-line arguments

testcafe chrome azure.js

Browser name(s) and version(s)

Chrome 101.0.4951.54 / Windows 10

Platform(s) and version(s)

Windows

Other

No response

[Aleksey28]

Hi @ssemrau,

Thank you for your example. I reproduced the issue. Please share your project with the code for further research.

[ssemrau]

Hi @ssemrau,

Thank you for your example. I reproduced the issue. Please share your project with the code for further research.

Hi @Aleksey28,
what would you like me to share? Code of the application? Code of Microform?

[Aleksey28]

Please share the code of your application where you use this microform. I need a complete example that I can use to reproduce the issue locally without complex settings. This will speed up our research.

[ssemrau]

There is github repository provided by Cybersource which is also provider of Microform
I used this https://github.com/CyberSource/cybersource-flex-samples-dotnet/tree/master/flex-microform-sample as example. It's in .net 4.6 but there are as well node.js examples which are very similar.
I tried as well run testcafe 1.13 and it seems Microform works better, it fails sometimes, but it's more stable. Just a hint.
Of course downgrading to 1.13.0 is not a solution as we would like to use the latest version of testing framework.

[Aleksey28]

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

[testcafe-build-bot]

@ssemrau, I prepared a proof-of-concept fix, please try it in your environment. You can install it with the following command:

npm install https://github.com/DevExpress/testcafe/files/8813356/testcafe-1.19.0.tar.gz

You also should add --hostname localhost to TestCafe arguments, otherwise you will get a cryptography error.

testcafe-hammerhead-24.5.19.tar.gz
testcafe-1.19.0.tar.gz

[ssemrau]

I can confirm that fix works as expected.
Thanks a lot for you engagement and effort!

[github-actions]

Release v2.1.0-rc.1 addresses this.