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-core');

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