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 });
};

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.