Cypress Azure AD Login

Readme.md

Make sure to set maz-http-header-size like below since the AD token size is large

set NODE_OPTIONS=--max-http-header-size=120000&& npx cypress open

References:

1. https://gist.github.com/csuzw/845b589549b61d3a5fe18e49592e166f
2. cypress-io/cypress#2427

aadLogin.js

// In cypress/plugins folder
const puppeteer = require('puppeteer');

module.exports = {
  debuggingPort: '',
  setDebuggingPortMyService(port) {
    [, debuggingPort] = port;
    return null;
  },
  async aadLogin(options = {}) {
    const username = options.username;
    const password = options.password;
    const appUrl = options.appUrl;
    const emailSelector = "[name='loginfmt']";
    const passwordSelector = '[name=passwd]';
    const submitButtonSelector = 'input[type=submit]';

    const browser = await puppeteer.connect({
      browserURL: `http://localhost:${debuggingPort}`,
    });

    const page = await browser.newPage();
    await page.goto(appUrl);
    await page.waitForNavigation();

    if (page.url().startsWith(appUrl)) {
      // already logged in
      page.close();
      return {};
    }

    await page.waitForSelector(emailSelector);
    await page.type(emailSelector, username);
    await page.keyboard.press('Enter');
    await page.waitForNavigation();

    await page.waitForSelector(passwordSelector);
    await page.focus(passwordSelector);
    await page.waitFor(1000);
    await page.type(passwordSelector, password);
    await page.click(submitButtonSelector);

    await page.waitForNavigation();
    await page.waitForSelector(submitButtonSelector);
    await page.click(submitButtonSelector);
    await page.waitForNavigation();

    await page.waitFor(2000);
    await page.close();
    return {};
  },
};

index.js

// In cypress/plugins folder
const { setDebuggingPortMyService, aadLogin } = require('./aadLogin');

module.exports = (on, config) => {
  // // `on` is used to hook into various events Cypress emits
  // // `config` is the resolved Cypress config

  on('before:browser:launch', (browser = {}, args) => {
    const existing = args.args.find(arg => arg.slice(0, 23) === '--remote-debugging-port');
    // Here you will need to persist the port to your plugins, whatever they may be
    setDebuggingPortMyService(existing.split('='));
    return args;
  });

  on('task', { aadLogin });
};

I am having after successfully get cookie when I set that in cypress. Again Azure AD login screen opening in cypress test runner. Any idea what need to do? I able to see cookie is set but Why Azure AD again running.

cookies.forEach((cookie) => {
      if (cookie) {
        cy.setCookie(cookie.name, cookie.value, {
          domain: cookie.domain,
          expiry: cookie.expires,
          httpOnly: cookie.httpOnly,
          path: cookie.path,
          secure: false,
          sameSite: "lax",
        });
        Cypress.Cookies.defaults({ preserve: cookieName });
      }
    });

I am having after successfully get cookie when I set that in cypress. Again Azure AD login screen opening in cypress test runner. Any idea what need to do? I able to see cookie is set but Why Azure AD again running.

cookies.forEach((cookie) => {
      if (cookie) {
        cy.setCookie(cookie.name, cookie.value, {
          domain: cookie.domain,
          expiry: cookie.expires,
          httpOnly: cookie.httpOnly,
          path: cookie.path,
          secure: false,
          sameSite: "lax",
        });
        Cypress.Cookies.defaults({ preserve: cookieName });
      }
    });

Hello @manoj-mukherjee-maersk ,
I did have the same challenge. I overcome this by not accessing / visiting the same url which takes to Azure AD login screen.
Once you have saved the cookies that you get from the plugin code , In my cypress test I visit the homepage url which is different to the base url of the application and since the cookies are saved cypress happily navigates to home page of the application

Hi @Coding-Means-Always-Learning I tried to visit -> cy.visit("/dashboard"). In puppeteer login page tried to visit root of the app "/". My Every page are Auth protected. What did I am wrong here?

FYI: able to solve the issue by using only puppeteer.connect and debuggingport. Earlier when using puppeteer.launch its open another browser and from that cookies are set which cause again azure sso login. Not able to figure out why cypress remove when cookies from another browser instance.

According to the cypress changelog of V9.6.0 they have now implemented an experimental command which should allow us to easier test applications with for example Azure AD login screen. Look at the experimental command cy.origin(). Maybe this one solves a lot of the problems we had to work around.