intility / cypress-msal

A cypress plugin for projects using @azure/msal-browser.

@intility/cypress-msal

A cypress plugin for projects using @azure/msal-browser.

Installation

npm install @intility/cypress-msal

Usage

Register the package in cypress/support/e2e.js:

import "@intility/cypress-msal/command";

Configure the login command, and add it as a task in cypress.config.js:

import { defineConfig } from "cypress"
import generateLogin from "@intility/cypress-msal"

let publicClientConfig = {
  auth: {
    clientId: "APP_CLIENT_ID",
    authority: "https://login.microsoftonline.com/TENANT_ID",
  },
};

let requests = [
  {
    scopes: ["User.Read"],
  },
];

let login = generateLogin(publicClientConfig, requests);

export default defineConfig({
  // ...other cypress settings here...
  e2e: {
    setupNodeEvents(on, config) {
      // `on` is used to hook into various events Cypress emits
      on("task", {
        // register a task named login which calls the generated login from @intility/cypress-msal
        login,
      });
    }
  }
})

You can now login by using the login command before running your tests.

before(() => cy.login());

Azure Configuration

The App registration needs to be a Public Application to be able to use the Device Code flow.

generateLogin

Syntax

let login = generateLogin(publicClientConfiguration, requests);

Parameters

publicClientConfiguration

A Configuration that will be used to initialize a PublicClientApplication from @azure/msal-node.

requests

An array of Requests ({ scopes: string[] }) that will be used for acquireTokenByDeviceCode and acquireTokenSilent.

Return value

A task plugin named login that should be registered with on("task", { login }).

cy.login

Syntax

cy.login()

Return value

A Promise that get resolves when all tokens are acquired and registered in sessionStorage to be used by @azure/msal-browser.

cypress-msal's Issues

Plugins folder not supported

Docs say to include the code with the publicClientConfig, module.exports, etc in the /plugins/index.js file however I am using Cypress 10.4 and the plugins folder is no longer supported. Is there an example of how to use this with Cypress 10+?

cy.login is not a function

I followed setup instructions and when attempting to run a cypress test and getting the following error:

I did manually create a /plugins folder to house the needed index.js file given the change in Cypress 10. Thanks for you guidance on moving past this error!

TypeError: generateLogin is not a function

When following the README, [email protected] throws a TypeError.

Your configFile is invalid: /Users/.../.../cypress.config.ts

My cypress.config.ts:

import generateLogin from "@intility/cypress-msal";

let publicClientConfig = {
  auth: {
    clientId: "***",
    authority: "https://login.microsoftonline.com/***",
  },
};

let requests = [
  {
    scopes: ["User.Read"],
  },
];

let login = generateLogin(publicClientConfig, requests);

export default defineConfig({
  reporter: "junit",

  reporterOptions: {
    mochaFile: "reports/cypress.xml",
    toConsole: true,
  },

  component: {
    devServer: {
      framework: "react",
      bundler: "vite",
    },
  },

  e2e: {
    baseUrl: "https://localhost:3000",
    setupNodeEvents(on, config) {
      // `on` is used to hook into various events Cypress emits
      on("task", {
        // register a task named login which calls the generated login from @intility/cypress-msal
        login,
      });
    },
  },
});