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

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

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!

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+?