Testcafe fails to redirect during authentication flow that uses Microsoft as identity provider

[liviuavram]

What is your Test Scenario?

Hi,

I'm writing a test script for our application that uses oauth 2.0 login flow with Microsoft as identity provider. The flow works like this: The user clicks the microsoft button within the application, logs in with microsoft credentials and after Microsoft (Azure AD) has validated the user, the oauth asks another internal service for user details (permissions, assigned tenant etc), then this server responds to oauth with an extended token that the oauth sends to the application.

What is the Current behavior?

The current behavior is that the testcafe script doesn't perform the redirect from Microsoft to oauth, after it provided the login credentials. The script does the following: Navigates to the application URL, clicks the Microsoft login button, auto-redirect to microsoft login page where it provides my work email address, then auto-redirect to microsoft company login page where it provides the password, then auto-redirect to stay signed in page where it clicks on YES. After this, the redirect to Oauth should happen, but the testcafe is stuck in "working" state at the https://login.microsoftonline.com/kmsi?sso_reload=true URL, and the test fails after some time (The specified selector does not match any element in the DOM tree.).

Additionally, I asked a developer for some help (I'm QA), and if relevant, Testcafe along with microsoft or oauth slows down the redirect and sometimes it exceeds the 150ms request limit. Oauth logs also shown a 500 error code with the mention that the access token was already exchanged. If it was exchanged, testcafe didn't use it? Why not?

What is the Expected behavior?

Testcafe should redirect properly through the flow and execute the test, and then fail or succeed.

What is your web application and your TestCafe test code?

The web application is not public so I cannot link it, as it requires azure AD and is not accessible outside the company as far as i know.

Initially I had a different approach for the login process, as shown in my stackoverflow question here: https://stackoverflow.com/questions/57991156/testcafe-microsoft-authentication-fails-to-redirect-during-authentication-flow

But I decided to try useRole, which didn't work. Here's the code for the second approach, with sensitive info replaced:

Your complete test code (or attach your test files):

import {Role, Selector} from "testcafe";
import LandingPage from './pages/LandingPage';

fixture("My test")
const username = 'myworkemail';
const password = 'mypassword';
const landingPage = new LandingPage();
const testrole = Role("mytestwebapplication/FrontEnd", async t =>{
    await t
	        .click(Selector("span").withText("MICROSOFT"))
		.maximizeWindow()
		.typeText(Selector("#i0116"), username,{paste : true})
		.click(Selector("#idSIButton9"))
		.typeText(Selector("#passwordInput"), password)
		.click(Selector("#submitButton"))
		.click(Selector("#idSIButton9"));
		}, { preserveUrl: true })
		
test('Change Agent States', async (t) => {
	await t.useRole(testrole);
	const agentState1 = 'Active';
	
	await landingPage.changeState(agentState1);
	
	const agentState2 = 'Break';
	
	await landingPage.changeState(agentState2);
});

The LandingPage.ts is only relevant after login and redirect. After login, the application redirects to mytestwebapplication/FrontEnd/client/, if the user is not logged in, user will be redirected to microsoft login page, but the "MICROSOFT" button is not shown on this page (design choice).

Steps to Reproduce:

Described above.

Your Environment details:

• testcafe version: 1.5.0
• node.js version: 10.16.3
• command-line arguments: testcafe chrome Tests.ts
• browser name and version: Chrome 76.0.3809
• platform and version: Windows 10

[Farfurix]

@liviuavram

Hello,
 
I've reproduced the "microsoft login" issue under Windows 10 / TestCafe v1.5.0 / Chrome 77. But there is no "stuck in "working" state at the https://login.microsoftonline.com/kmsi?sso_reload=true".

Our team will research it and check for a suitable solution.

For team:

import { Role, Selector} from 'testcafe';

fixture("My test");

const username = '***';
const password = '***';

const testrole = Role('https://login.microsoftonline.com/', async t => {
    await t
        .typeText(
            Selector('input').withAttribute('type', 'email'),
            username
        )
        .click(Selector('#idSIButton9'))
        .typeText(
            Selector('input').withAttribute('type', 'password'),
            password
        )
        .click(Selector('#idSIButton9'))
        .click(Selector('#idBtn_Back'));
}, { preserveUrl: true });

test('Change Agent States', async t => {
    await t.useRole(testrole);

    await t.navigateTo('https://outlook.office.com/mail/inbox');

    await t.wait(15000);
});

Command:

chrome test.ts --disable-page-caching -e

[Farfurix]

@liviuavram

Could you please confirm that you are able to log into your application using the following test code (it works with the "https://www.office.com" URL on my side):

import { Role, Selector } from 'testcafe';

fixture('My test');

const username = '***';
const password = '***';

const testrole = Role('https://login.microsoftonline.com/', async t => {
    await t
        .typeText(
            Selector('input').withAttribute('type', 'email'),
            username
        )
        .click(Selector('#idSIButton9'))
        .typeText(
            Selector('input').withAttribute('type', 'password'),
            password
        )
        .click(Selector('#idSIButton9'))
        .click(Selector('#idBtn_Back'));
}, { preserveUrl: true });

test('Login', async t => {
    await t.navigateTo('https://www.office.com'); // Use your application URL here

    await t.useRole(testrole);

    await t.debug();
});

Result:

[liviuavram]

H @Farfurix ,

Thank you very much for your help so far.

I had to modify your code just a bit to fit the "Taking you to your organization sign in page" step, but when the t.navigateTo (myapplicationURL) is supposed to happen, debug notice is shown, and fails with error:

A JavaScript error occurred on "https://webshell.suite.office.com/iframe/TokenFactoryIframe#id_token=eyJ0eXAiOiJKV[..] (my access token, probably).

Repeat test actions in the browser and check the console for errors.
      If you see this error, it means that the tested website caused it. You can fix it or disable tracking
      JavaScript errors in TestCafe. To do the latter, enable the "--skip-js-errors" option.
      If this error does not occur, please write a new issue at:
      "https://github.com/DevExpress/testcafe/issues/new?template=bug-report.md".

      JavaScript error details:
      TypeError: Cannot read property 'length' of undefined
          at r.getRequestInfo

After re-executing the test and opening dev tools console, I can see a bunch of errors in the console. Attached screenshot.

I would like to add that I installed testcafe on a pipeline VM and surprisingly.. it works there, but it doesn't work on other VMs within the same domain. The first differences I noticed are that my current npm is v6.9.0 (I tried a bunch of versions) and the npm on that working VM is v5.6.0.

Another difference is that the working VM has another automation framework installed globally.
I'm not as stuck as I was yesterday, because at least I can test the scripts and write new ones, but I'm still lost as to why it works on that specific VM, but doesn't on others with pretty much the same packages installed.

[aleks-pro]

Hello @liviuavram ,

I reproduced one of the errors from the screenshot. We will address it in a separate issue. But there is no guarantee that this problematic behavior leads to the original authentication problem.
To be able to fix the issue, we need to reproduce it on our side. So if possible, provide us with a simple example project on which we can reproduce it.
 
You wrote:
>>> I would like to add that I installed testcafe on a pipeline VM and surprisingly.. it works there, but it doesn't work on other VMs within the same domain.
This is might occur because of differences in network settings of different virtual machines.

[maximkoev]

I have the similar problem. Auth flow in my product is azure-okta-azure redirects. When redirect happens from okta there is an token in url. Auth fails because service can't parse this token. There is unexpected for service some "http://localhost:**" before original url

[Dmitry-Ostashev]

@maximkoev Could you please describe your case in greater detail? Also, it would help if you send us a test example for research.

[maximkoev]

@maximkoev Could you please describe your case in greater detail? Also, it would help if you send us a test example for research.

Hi @Dmitry-Ostashev , i've created separete issue, please check
#4929

[liviuavram]

Hi! Just passing by to let you know that I found the solution to this problem. If you are facing this issue, run your script with this: node --max-http-header-size=1024000 ./node_modules/testcafe/bin/testcafe.js chrome <your test file>

[Ogurecher]

@liviuavram, Thank you for sharing your solution.