SSO Login Question: (Refer Issue #5053)

[neeldeep]

Hi Contributors
I had posted this question already which was closed and it seems the question wasn't answered accurately, hence posting this again.

Step 1: When I load application URL, a popup window opes.

Step 2: After user enters the email, another Login Prompt is shown.

I have been able to get through Step 1, but now how do I handle step 2, where the Login Prompt is being shown.

I.amOnPage('/');

I.usePlaywrightTo('handle ms login', async ({ browser, context, page }) => {

    const contexts = await browser.contexts(); 

    const loginPage=await contexts[0].pages()[1];

// The below code is used for the first screenshot, to enter User Email
   await loginPage.fill('input[type="email"][name="loginfmt"]', 'UserEmail');
   await Promise.all([
    loginPage.click('input[type="submit"]'),
    loginPage.waitForNavigation({ waitUntil: 'networkidle0' })
]);
// This code does't work, and I am not able to enter the Username & Password
await loginPage.type('Username', 'Hello');
await loginPage.type('Password', '12345');

  }); 

[pavelfeldman]

The reason I closed it was that it did not look like a description of the issue with Playwright. I guess stack overflow or our Slack would be a better place to ask a question so that community could help answering it.

What I did:

npx playwright-cli codegen microsoft.com

Then I logged in and looked at the snippet it produced. I distilled it a bit to remove redirects and here is what I've got:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({
    headless: false
  });
  const context = await browser.newContext();

  // Open new page
  const page = await context.newPage();
  await page.goto('https://www.microsoft.com');

  // Click a[aria-label="Sign in to your account"]
  await Promise.all([
    page.waitForNavigation(),
    page.click('a[aria-label="Sign in to your account"]')
  ]);

  // Fill input[aria-label="Enter your email, phone, or Skype."]
  await page.fill('input[aria-label="Enter your email, phone, or Skype."]', 'john.smith@gmail.com');

  // Click input[type="submit"]
  await Promise.all([
    page.waitForNavigation(),
    page.click('input[type="submit"]')
  ]);

  // Fill input[name="passwd"]
  await page.fill('input[name="passwd"]', 'foobar');

  // Click input[type="submit"]
  await Promise.all([
    page.waitForNavigation(),
    page.click('input[type="submit"]')
  ]);

  // Close page
  await page.close();
})();

[neeldeep]

Thanks for sharing this, however page.fill will not work for this authentication popup as there is no Dom Content yet. This is similar to a Basic Auth popup window.

[neeldeep]

OK I got around this issue setting the HTTP headers before submit.

I.amOnPage('/');
I.usePlaywrightTo('handle ms login', async ({ browser, context, page }) => {
 // use browser, page, context objects inside this function


    const contexts = await browser.contexts(); 

    const authPage=await contexts[0].pages()[1];

    await authPage.waitForNavigation();

// MS login page

   await authPage.fill('input[type="email"][name="loginfmt"]', 'Your Email');

// Setting the UserName & Password Before Actually Submitting the Form
  await contexts[0].setHTTPCredentials({

  username: 'UserName',

  password: 'Password'

});


await Promise.all([

    authPage.click('input[type="submit"]'),

    authPage.waitForNavigation({ waitUntil: 'networkidle0' })

   
]);


const appPage=await contexts[0].pages()[1];

await appPage.waitForNavigation();

  });

However not sure if this is the best solution out there and looking for other suggestions or improvements for this.

[pavelfeldman]

setHTTPCredentials is deprecated, you should create context with httpCredendials instead. Other than that, it seems like it does work for you, so closing!

[shamprasadrh]

I think another related issue is that Microsoft keeps changing the login behavior for example they add an intermediate step for KMSI(Keep Me Signed in) which comes occasionally.

[bheemreddy181]

We should do something similar to this https://medium.com/version-1/using-cypress-to-test-azure-active-directory-protected-spas-47d04f5add9

[SrihithaMukka]

Hey,
Did you implement automation of SSO login using Playwright? If so, how did you do that?