Support of the new window simulation into iframe for the login via social networks purposes

I’ve figured out that we have simple way to login via social networks. I’ve tried to log in to the site from an issue #1385 via a Facebook account and I’ve got it in two steps:

• skipped the x-frame-options header because it disallowed a login page loading in an iframe. https://github.com/DevExpress/testcafe-hammerhead/blob/bf87b68374d88c6f9e409268c31c3422aba8295c/src/request-pipeline/header-transforms.js#L143-L143
• added the patchAuth ClientFunction into the test.

const patchAuth = ClientFunction(() => {
    window.open = function (url) {
        var iframe = document.createElement('iframe');

        iframe.style.position = 'fixed';
        iframe.style.left = '200px';
        iframe.style.top = '150px';
        iframe.style.width = '400px';
        iframe.style.height = '300px';
        iframe.style['z-index'] = '99999999';;		
        iframe.src = url;
        iframe.id = 'auth-iframe';

        document.body.appendChild(iframe);
    };
});

Final test:

fixture `fixture`
    .page `https://www.soudfa.com/signup`;

test('test', async t => {
    await patchAuth();

    await t
        .click('button.facebook')
        .switchToIframe('#auth-iframe')
        .typeText('#email', 'email***')
        .typeText('#pass', 'pass***')
        .click('#u_0_0')
        .wait(30e3);
});

[LavrovArtem]

Hi @joshpitzalis, I need some time to investigate it.

[viking2917]

@LavrovArtem Thanks for this example. I am also trying to use Test Cafe to test my app with Facebook login (I am using Ionic and the Facebook login plugin as well)

When I follow your steps above, I get the following errors:

O {code: "auth/popup-blocked", message: "Unable to establish a connection with the popup. It may have been blocked by the browser."} "email: " undefined "code " "auth/popup-blocked" (from hammerhead.js line 2)

and

Refused to display 'http://192.168.1.82:54306/2Bt1Drjkn!i/https://m.facebook.com/login.php?skip_api_login=1&api_key=518797921496187&signed_next=1&next=https%3A%2F%2Fm.facebook.com%2Fv2.8%2Fdialog%2Foauth%3Fredirect_uri%3D.......' in a frame because it set 'X-Frame-Options' to 'deny'.

I think this is because the url of the frame opening the FB login is ‘http://192.168.1.82:54306/ …’ and my Facebook Login settings do not include that particular URL/port combination in the ‘Valid OAuth redirect URIs’ settings. But because test cafe generates a new port number every time, I don’t see any way to add it…not sure if that’s clear but wondering if you have any suggestions?

Thanks!