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

LavrovArtem · 2017-12-20T12:45:08Z

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.

testcafe-hammerhead/src/request-pipeline/header-transforms.js

Line 143 in bf87b68

'x-frame-options': (src, ctx) => {
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);
});

The text was updated successfully, but these errors were encountered:

neilmatillano · 2017-12-21T19:17:30Z

@LavrovArtem

Tried this proposal but I am blocked with few errors:

const patchAuth = new ClientFunction(() => {
Error: TypeScript compilation failed.
Only a void function can be called with the 'new' keyword.

Note that I already have this : import { Selector, Role, ClientFunction } from "testcafe"
So I removed the "new' keyword but I still get the error below.

For this line -- window.open = function (url) {
Error: TypeScript compilation failed.
/Users/admin/ark-e2e/tests/testCampaign_flow.ts (41, 9): Type '(url: string) => void' is not assignable to type '(url?: string, target?: string, features?: string, replace?: boolean) => Window'.
Type 'void' is not assignable to type 'Window'.

LavrovArtem · 2017-12-22T08:10:07Z

Hi @neilmatillano,
Fixed type script test:

import { ClientFunction } from 'testcafe';

const patchAuth = ClientFunction(() => {
    window['op' + 'en'] = 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);
    };
});

fixture `fixture`
    .page `your site`
	
test('test', async t => {
    await patchAuth();

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

But you also should find the testcafe-hammerhead/lib/request-pipeline/header-transforms.js file in the node_modules folder and replace current function of the x-frame-options property to the skip function ('x-frame-options': skip,).

neilmatillano · 2017-12-22T15:19:04Z

@LavrovArtem

I followed all the steps including updating the transforms js, but I am getting this error when running testcafe locally regarding the #auth-iframe

The specified selector does not match any element in the DOM tree.

Browser: Chrome 63.0.3239 / Mac OS X 10.13.2

  65 |    const loginBtn = Selector("input[name=\"login\"]")
  66 |    const signupBtn = Selector(elementWithIdOrClassName("btn btn-big btn-main-color"))
  67 |
  68 |    await testController
  69 |        .click(loginSelector)
> 70 |        .switchToIframe('#auth-iframe')

LavrovArtem · 2017-12-22T15:42:17Z

@neilmatillano
Maybe you lost a call of the patchAuth function.

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

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

neilmatillano · 2017-12-22T15:58:58Z

@LavrovArtem yeah i forgot, added now but get another error.
Sorry this is a bit hard to debug on my side... I cant get any more info

Request failed with status code 500

  Browser: Chrome 63.0.3239 / Mac OS X 10.13.2

     68 |    const signupBtn = Selector(elementWithIdOrClassName("btn btn-big btn-main-color"))
     69 |
     70 |
     71 |    await testController
     72 |        .click(loginSelector)
   > 73 |        .switchToIframe('#auth-iframe')

I also get these errors:

Failed to load resource: the server responded with a status of 400 (Bad Request)
hammerhead.js:2 Error while refreshing the token: Error: Request failed with status code 400
at createError (app.js?88d6c1acb5583bded9d1:17375)
at settle (app.js?88d6c1acb5583bded9d1:4833)
at XMLHttpRequest.handleLoad (app.js?88d6c1acb5583bded9d1:9789)
window.console.(anonymous function) @ hammerhead.js:2
:49196/BJCTWA9fG/http://localhost:8080/api/translations/keys Failed to load resource: the server responded with a status of 500 (Internal Server Error)

LavrovArtem · 2017-12-25T09:16:54Z

Hi @neilmatillano,
The 500 failed code maybe related with x-frame-options replacement. Be convinced that you correctly replaced function in /node_modules/testcafe/node_modules/testcafe-hammerhead/lib/request-pipeline/header-transforms.js.

neilmatillano · 2017-12-25T20:14:26Z

@LavrovArtem , is there anyway to remember in the browser the login for facebook that I previously did so I don't need to login again when I run testcafe? I tried using chrome:userProfile but it didnt help.

LavrovArtem · 2017-12-26T08:25:48Z

Hi @neilmatillano,
The User Roles feature should meet your need.

neilmatillano · 2017-12-26T09:38:27Z

@LavrovArtem , yes I tried this one but the problem is I still get redirected to the login page even after I saved the login.

neilmatillano · 2017-12-26T14:36:52Z

Or how about session cookies, is it supported in testcafe?

LavrovArtem · 2017-12-26T16:10:37Z

I've created example with User Roles for you:

import { ClientFunction, Role, Selector } from 'testcafe';

const patchAuth = ClientFunction(() => {
    window['op' + 'en'] = 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);
    };
});

const facebookAccUser = Role('<your site url>/login', async t => {
    await patchAuth();

    await t
        .click('.btn.btn-big.btn-fb')
        .switchToIframe('#auth-iframe')
        .typeText('#email', 'email')
        .typeText('#pass', 'pass')
        .click('#u_0_0')
        .switchToMainWindow();

    await Selector('#page-header-top-menu')();
});

fixture `fixture`
    .page `<your site url>`
    .beforeEach(async t => await t.useRole(facebookAccUser));
	
test('first test', async t => {
    await t.click(Selector('.dashboard-tab').nth(1));
});

test('second test', async t => {
    await t.click(Selector('.dashboard-tab').nth(2));
});

neilmatillano · 2017-12-26T16:46:28Z

@LavrovArtem , I'm sorry but I am getting an error with the example but I do appreciate your help in giving me the example.

- Error in Role initializer -
  Error on page "http://localhost:8080/login":
  
  Uncaught TypeError: Cannot read property 'call' of undefined
  
  Browser: Chrome 63.0.3239 / Mac OS X 10.13.2
```
24 |const facebookAccUser = Role('http://localhost:8080/login',
```
  async t => {
  25 | await patchAuth();
  26 |
  27 | await t
  
  28 | .click('.btn.btn-big.btn-fb')
  29 | .switchToIframe('#auth-iframe')
  30 | .typeText('#email', 'email')
  31 | .typeText('#pass', 'pass')
  32 | .click('#u_0_0')
  33 | .switchToMainWindow();

And I checked the fb login is present.

And also just to be clear, in header-transforms.js, I have this skipped option,

'x-frame-options': skip,
  /* function xFrameOptions(src, ctx) {
    if (src.indexOf('ALLOW-FROM') === -1) return src;

    src = src.replace('ALLOW-FROM', '').trim();

    var isCrossDomain = ctx.isIframe && !urlUtils.sameOriginCheck(ctx.dest.url, src);
    var proxiedUrl = ctx.toProxyUrl(src, isCrossDomain, ctx.contentInfo.contentTypeUrlToken);

    return 'ALLOW-FROM ' + proxiedUrl;
}, */

LavrovArtem · 2017-12-27T07:18:17Z

Hi @neilmatillano,
This error occurs on your site and TestCafe detects it. Please try to run TestCafe with the --skip-js-errors flag. (more information):

viking2917 · 2018-03-18T23:32:58Z

@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!

LavrovArtem · 2018-03-19T14:44:51Z

Hi @viking2917,
The Refused to display error maybe related with x-frame-options replacement.

skipped the x-frame-options header because it disallowed a login page loading in an iframe.

testcafe-hammerhead/src/request-pipeline/header-transforms.js

Line 143 in bf87b68

'x-frame-options': (src, ctx) => {

#1428 (comment)
#1428 (comment)

I will add PR which rid you from a node_modules code modification, as soon as possible.

viking2917 · 2018-03-19T22:02:01Z

Thanks @LavrovArtem I did modify the header-transforms.js to make the change to 'x-frame-options': skip, but it's possible I messed up somewhere along the way...

joshpitzalis · 2018-06-14T06:32:18Z

I am getting the same popup-blocked error

M {code: "auth/popup-blocked", message: "Unable to establish a connection with the popup. It may have been blocked by the browser."}

I have made sure that I skipped the x-frame-options in header-transfor.js:

tried jumping into chrome setting and allowing popups before the login button get clicked but no difference. Has anyone found a way around this yet?

LavrovArtem · 2018-06-14T15:11:23Z

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

MohamedRasool786 · 2018-06-21T10:10:32Z

@LavrovArtem

I have faced issue while clicking on a #googleSignInn button. It doesn't redirect to the google POPUP page.Below I attached my code

Expected Behaviour is to give my credentials in google popup page and then it should redirect to my homesite.

Thanks in advance

`import { ClientFunction, Role, Selector } from 'testcafe';

const patchAuth = ClientFunction(() => {
window['op' + 'en'] = function (url) {
var iframe = document.createElement('iframe');

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

document.body.appendChild(iframe);

};
});

const googleAccUser = Role('https://merida-web.herokuapp.com/', async t => {
await patchAuth();

await t
.click("#LoggIn")
.click("#googleSignInn")
.switchToIframe('#auth-iframe')
.typeText('#identifierId', '[email protected]')
.click("#identifierNext")
.typeText('#password', 'maduraiboys007')
.click("#passwordNext")
.switchToMainWindow();

await Selector('#page-header-top-menu')();
});

fixture Merida E2E Testing
.page https://merida-web.herokuapp.com/
.beforeEach(async t => await t.useRole(googleAccUser));

test('first test', async t => {
await t.click(Selector('.dashboard-tab').nth(2));
});`

LavrovArtem · 2018-06-21T13:12:23Z

Hi @joshpitzalis,
There are two header-transforms.js files which should be modified.

LavrovArtem · 2018-06-21T13:13:23Z

Hi @MohamedRasool786,
I will investigate it.

MohamedRasool786 · 2018-06-22T09:37:16Z

Hi @LavrovArtem

Thanks for your cool reply!
I have tried that too, It's not working to me, Am using firebase google authentication for log in.

Is it possible to do for firebase google authentication in Testcafe.

LavrovArtem · 2018-06-22T10:52:35Z

@MohamedRasool786
Unfortunately, I cannot find a workaround for google authentication.

MohamedRasool786 · 2018-06-22T11:32:28Z

@LavrovArtem
Thanks.
Is it possible to do using iFrames as like Facebook you did before in #1385

LavrovArtem · 2018-06-25T08:40:57Z

@MohamedRasool786
I just tried to use the same iframe workaround as for Facebook but Google authentication is more difficult.

miherlosev · 2020-02-13T11:40:17Z

We are developing a public API for operating with multiple windows simultaneously. Track DevExpress/testcafe#912 to be informed about our progress.

lock · 2020-02-23T18:38:25Z

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests. We recommend you ask TestCafe API, usage and configuration inquiries on StackOverflow.

LavrovArtem added the TYPE: proposal label Dec 20, 2017

LavrovArtem self-assigned this Dec 20, 2017

LavrovArtem mentioned this issue Dec 20, 2017

Facebook button unreachable in testcafe DevExpress/testcafe#1999

Closed

miherlosev mentioned this issue Jan 19, 2018

Add the capability to perform testing in multiple browser windows DevExpress/testcafe#912

Closed

miherlosev mentioned this issue Mar 16, 2018

Browser hangs / disconnects when running testcafe tests on docker DevExpress/testcafe#2194

Closed

LavrovArtem mentioned this issue Mar 20, 2018

[WIP]Add special url flag for the authentication via social networks in iframe #1539

Closed

LavrovArtem mentioned this issue Jun 22, 2018

Logging doesn't work on https://www.soudfa.com/signup #1385

Closed

NickCis mentioned this issue Oct 4, 2018

[RequestHook]: add methods for manipulation with response headers #1657

Closed

miherlosev closed this as completed Feb 13, 2020

lock bot added the STATE: Auto-locked Issues that were automatically locked by the Lock bot label Feb 23, 2020

lock bot locked as resolved and limited conversation to collaborators Feb 23, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

LavrovArtem commented Dec 20, 2017 •

edited

Loading

neilmatillano commented Dec 21, 2017 •

edited

Loading

LavrovArtem commented Dec 22, 2017 •

edited

Loading

neilmatillano commented Dec 22, 2017 •

edited

Loading

LavrovArtem commented Dec 22, 2017 •

edited

Loading

neilmatillano commented Dec 22, 2017 •

edited

Loading

LavrovArtem commented Dec 25, 2017 •

edited

Loading

neilmatillano commented Dec 25, 2017

LavrovArtem commented Dec 26, 2017

neilmatillano commented Dec 26, 2017

neilmatillano commented Dec 26, 2017

LavrovArtem commented Dec 26, 2017

neilmatillano commented Dec 26, 2017 •

edited

Loading

LavrovArtem commented Dec 27, 2017 •

edited

Loading

viking2917 commented Mar 18, 2018

LavrovArtem commented Mar 19, 2018

viking2917 commented Mar 19, 2018

joshpitzalis commented Jun 14, 2018

LavrovArtem commented Jun 14, 2018

MohamedRasool786 commented Jun 21, 2018

LavrovArtem commented Jun 21, 2018

LavrovArtem commented Jun 21, 2018

MohamedRasool786 commented Jun 22, 2018

LavrovArtem commented Jun 22, 2018

MohamedRasool786 commented Jun 22, 2018

LavrovArtem commented Jun 25, 2018 •

edited

Loading

miherlosev commented Feb 13, 2020

lock bot commented Feb 23, 2020

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

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

Comments

LavrovArtem commented Dec 20, 2017 • edited Loading

neilmatillano commented Dec 21, 2017 • edited Loading

LavrovArtem commented Dec 22, 2017 • edited Loading

neilmatillano commented Dec 22, 2017 • edited Loading

LavrovArtem commented Dec 22, 2017 • edited Loading

neilmatillano commented Dec 22, 2017 • edited Loading

LavrovArtem commented Dec 25, 2017 • edited Loading

neilmatillano commented Dec 25, 2017

LavrovArtem commented Dec 26, 2017

neilmatillano commented Dec 26, 2017

neilmatillano commented Dec 26, 2017

LavrovArtem commented Dec 26, 2017

neilmatillano commented Dec 26, 2017 • edited Loading

LavrovArtem commented Dec 27, 2017 • edited Loading

viking2917 commented Mar 18, 2018

LavrovArtem commented Mar 19, 2018

viking2917 commented Mar 19, 2018

joshpitzalis commented Jun 14, 2018

LavrovArtem commented Jun 14, 2018

MohamedRasool786 commented Jun 21, 2018

LavrovArtem commented Jun 21, 2018

LavrovArtem commented Jun 21, 2018

MohamedRasool786 commented Jun 22, 2018

LavrovArtem commented Jun 22, 2018

MohamedRasool786 commented Jun 22, 2018

LavrovArtem commented Jun 25, 2018 • edited Loading

miherlosev commented Feb 13, 2020

lock bot commented Feb 23, 2020

LavrovArtem commented Dec 20, 2017 •

edited

Loading

neilmatillano commented Dec 21, 2017 •

edited

Loading

LavrovArtem commented Dec 22, 2017 •

edited

Loading

neilmatillano commented Dec 22, 2017 •

edited

Loading

LavrovArtem commented Dec 22, 2017 •

edited

Loading

neilmatillano commented Dec 22, 2017 •

edited

Loading

LavrovArtem commented Dec 25, 2017 •

edited

Loading

neilmatillano commented Dec 26, 2017 •

edited

Loading

LavrovArtem commented Dec 27, 2017 •

edited

Loading

LavrovArtem commented Jun 25, 2018 •

edited

Loading