Need an updated way to do e2e testing

[andrewalderson]

Core Library

MSAL.js (@azure/msal-browser)

Wrapper Library

MSAL Angular (@azure/msal-angular)

Public or Confidential Client?

Public

Description

I am submitting this because I don't think that issue #8109 was fully addresses.

I have an Angular SPA that is using Playwright for e2e testing. This project uses the latest version of the libraries from this repo. With the latest versions of the libraries the Playwright Testing Samples no longer work. This is because the schema used for caching tokens has diverged between the browser and node libraires in the latest versions and these samples use an older version of the browser library. I can successfully use the node library in Playwright during test setup to request tokens using the ROPC flow, save them and inject them into sessionStorage for each test. The problem is the browser library doesn't recognize the schema that was used to create the cache keys by the node library so it thinks there are no accounts loaded and the app gets redirected to the IDP during the tests.

The solution to this is:

1. use a POST request to the token endpoint to get the tokens and manually creating the cache keys by 'copying' code that isn't part of the public API. This is fragile but does work.
2. Redirect to the IDP during test setup in the browser to login and after redirect back to the application, get the tokens from browser storage and save them for use in tests. This also works but I am now using a UI that I don't have control over and can change (or MFA could be enforced on all accounts in the future) which can cause my tests to break. I am also now making a network request that my tests depend on and can fail.

The browser library has a method (loadExternalTokens) for situations like this but of course it does not work in Playwright (it works in Cypress) because test setup in Playwright doesn't run in the browser.

My request is that either the node library token cache schema is always kept in sync with the browser library or there is an API introduced to the browser library that doesn't require a browser environment and that, given a response from the token endpoint (or a mock response) will create a cacheable key/value data structure with the correct schema that we can save and load into browser storage when needed.

[tnorling]

loadExternalTokens is still the recommended way to do this regardless of testing framework. In playwright you can run code in the browser using the page.evaluate API.

Rough pseudo-code:

const config = <your PCA config>;
const req = <request object with scopes, etc>;
const res = <server response>; // This can be hardcoded test tokens or real tokens obtained using direct calls to the auth service or ROPC

await page.evaluate((config, req, res) => {
  const pca = new msal.PublicClientApplication(config);
  await pca.getTokenCache().loadExternalTokens(req, res, {});
}, config, req, res);

I'll mark this as a documentation fix and leave this open until we can update the sample & docs.

[andrewalderson]

@tnorling I was having trouble trying to instantiate an instance of PublicClientApplication in Playwright but you gave me an idea. In your pseudo-code 'msal' needs to be an object on window so I added a script tag to the page that loads the library from node_modules since newer versions of the libraries aren't available on the CDN (according to docs):

  const moduleFile = path.resolve(
    __dirname,
    '../../../node_modules/@azure/msal-browser/lib/msal-browser.min.js',
  );

  await page.addScriptTag({
    path: moduleFile,
    type: 'module',
  });

  await page.evaluate(
    async ([tokenResponse, authority, clientId, scopes]) => {
      const pca = new (window as any).msal.PublicClientApplication({
        auth: { authority, clientId },
      });
      await pca
        .getTokenCache()
        .loadExternalTokens({ authority, scopes }, tokenResponse, {
          extendedExpiresOn: tokenResponse.expires_in,
        });
    },
    [externalTokenResponse, authority, clientId, scopes] as const,
  );

I have loaded the msal browser library but I am now getting an error
Error: page.evaluate: BrowserAuthError: crypto_nonexistent: The crypto object or function is not available.

I am still debugging this and any thoughts would be appreciated

EDIT: This error is coming from that fact that crypto.subtle is missing even though it is supposed to exist in localhost environments and according to microsoft/playwright#5158 is available.
Adding this to page.evaluate

    console.log('CRYPTO AVAILABLE: ', window.crypto);
    console.log('SUBTLE CRYPTO AVAILABLE: ', window.crypto.subtle);

shows that window.crypto is available but window.crypto.subtle is not.

Also checking if the context is secure with window.isSecureContext returns false.

Also, the error message is a little confusing. This is the code that generates it:

export function validateCryptoAvailable(
    skipValidateSubtleCrypto: boolean
): void {
    if (!window) {
        throw createBrowserAuthError(
            BrowserAuthErrorCodes.nonBrowserEnvironment
        );
    }
    if (!window.crypto) {
        throw createBrowserAuthError(BrowserAuthErrorCodes.cryptoNonExistent);
    }
    if (!skipValidateSubtleCrypto && !window.crypto.subtle) {
        throw createBrowserAuthError(
            BrowserAuthErrorCodes.cryptoNonExistent,
            SUBTLE_SUBERROR
        );
    }
}

The error is coming from the last conditional but the SUBTLE_SUBERROR is not displayed in the output.

Also, as a note I like when I see comments in other peoples code that were obviously copy/pasted and were not updated for the new context. At least I am not the only one :)