Automating M365 login with MFA in Playwright tests

I have been using Playwright to automate my tests for a long time, but one thing I struggled with was automating the login flow for Microsoft 365 with a multi-factor authentication (MFA) account. When using an MFA-enabled account, you must provide an additional manual step to complete the login process.

Show image

In my speaking sessions about Playwright, I have been saying it would be easier to use an account without MFA enabled, but only on a QA/test environment. But in reality, this is not always possible. Many companies have MFA enabled for all their accounts, and you need to deal with it. I decided to try it and see if it was possible to automate this.

In this post, I will show you how you can automate the login flow for Microsoft 365 with an MFA-enabled account using Playwright.

Playwright M365 starter template

To make it easier to follow along, I have created a Playwright M365 starter template, which you can use to test this out. You can find the template on GitHub: estruyf/testing-microsoft365-playwright-template.

Follow the installation steps in the README file to get the project running.

MFA-enabled account requirements

Before we start, we need an MFA-enabled account configured to use an authenticator app with a time-based one-time password (TOTP). The TOTP is a temporary code that changes every 30 seconds. This TOTP code is a common way to use MFA for various services but is also essential for this automation.

TOTP is an algorithm that generates a temporary code using a secret key and the current time. The best part about this algorithm is that we can make use of a library for Node.js called OTPAuth can be used to create the code, and this library allows us to automate the login flow.

Add a TOTP to your account

To add a TOTP to your account, you need to go to your account’s security settings. Here is how you can do it:

• Go to the Security info page of the account you want to use
• Click on the Add sign-in method button
• Select Authenticator app and click on Add
• Click on the I want to use a different authenticator app link
• Click on the Next button
• Click on the Can’t scan image? link
• Copy the Secret key and keep it safe as you will need it later

Show image

• Use your authenticator app to scan the QR code
• Click on the Next button
• Enter the code from your authenticator app and click on the Next button

If you want to use something other than an authenticator app to create the TOTP, the starter template also provides a script to generate the TOTP based on the secret key. You can run the following command to generate the TOTP:

1
# Replace `<secret key>` with the secret key you copied earlier.
2
npm run generate:otp -- <secret key>

Show image

The Playwright M365 starter template allows you to configure both the Microsoft Authenticator and the TOTP authentication methods.

Show image

Automating the login flow

Once your account is configured with the TOTP, you can automate the login flow. To understand how the login flow works, let’s go through the steps:

1. Open the login page
2. Enter the email address
3. Click on the Next button
4. Enter the password
5. Click on the Sign in button
6. Check if the account has the Microsoft Authenticator app configured
   • If yes, click on the Use another authentication method link and select the TOTP option
7. Enter the TOTP code
8. Click on the Next button
9. Click on the No/Yes button to stay signed in (it does not matter which one you choose for the tests)

Here is what it looks like in the code:

1
import { test as setup } from "@playwright/test";
2
import * as OTPAuth from "otpauth";
3

4
const AuthFile = "playwright/.auth/user.json";
5

6
setup("authenticate", async ({ page }) => {
7
  // 1. Open the login page
8
  await page.goto(process.env.M365_PAGE_URL || "");
9

10
  // 2. Enter the email address
11
  const emailInput = page.locator("input[type=email]");
12
  await emailInput.click();
13
  await emailInput.fill(process.env.M365_USERNAME || "");
14

15
  // 3. Click on the "Next" button
16
  await page.getByRole("button", { name: "Next" }).click();
17

18
  // 4. Enter the password
19
  const passwordInput = page.locator("input[type=password]");
20
  await passwordInput.click();
21
  await passwordInput.fill(process.env.M365_PASSWORD || "");
22

23
  // 5. Click on the "Sign in" button
24
  await page.locator("input[type=submit]").click();
25

26
  // 6. Check if the account has the Microsoft Authenticator app configured
27
  const otherWayLink = page.locator("a#signInAnotherWay");
28
  await otherWayLink.waitFor({ timeout: 2000 });
29
  if (await otherWayLink.isVisible()) {
30
    // Select the TOTP option
31
    await otherWayLink.click();
32

33
    const otpLink = page.locator(`div[data-value="PhoneAppOTP"]`);
34
    await otpLink.click();
35
  }
36

37
  // 7. Enter the TOTP code
38
  const otpInput = await page.waitForSelector("input#idTxtBx_SAOTCC_OTC");
39
  let totp = new OTPAuth.TOTP({
40
    issuer: "Microsoft",
41
    label: process.env.M365_USERNAME,
42
    algorithm: "SHA1",
43
    digits: 6,
44
    period: 30,
45
    secret: process.env.M365_OTP_SECRET,
46
  });
47
  const code = totp.generate();
48
  await otpInput.fill(code);
49

50
  // 8. Click on the "Next" button
51
  await page.locator("input[type=submit]").click();
52

53
  // 9. Click on the "Yes" button to stay signed in
54
  await page.locator("input[type=submit][value='Yes']").click();
55
  await page.waitForURL(process.env.M365_PAGE_URL || "");
56

57
  await page.context().storageState({ path: AuthFile });
58
});

As you do not want to run the authentication flow before every test, it is configured as a separate login flow in the Playwright M365 starter template. It is defined as a dependency on other projects. You can find this configuration in the playwright.config.ts file:

1
const USE_MFA = process.env.M365_OTP_SECRET ? true : false;
2

3
export default defineConfig({
4
  ...
5
  projects: [
6
    {
7
      name: "setup",
8
      testMatch: USE_MFA ? /mfa.setup.ts/ : /login.setup.ts/,,
9
    },
10
    {
11
      name: "chromium",
12
      use: {
13
        ...devices["Desktop Chrome"],
14
        viewport: {
15
          width: 2560,
16
          height: 1440,
17
        },
18
        storageState: AuthFile, // Using the auth (storage state) file
19
      },
20
      dependencies: ["setup"], // Setup will run first
21
    },
22
  ],
23
});

Using the Playwright M365 starter template locally

To use the Playwright M365 starter template locally, you need to follow these steps:

• Have the project cloned on your machine
• Follow the installation steps in the README file
• Configure the .env file with the following variables:

1
# The URL you want to test (e.g., `https://<tenant>.sharepoint.com/`)
2
M365_PAGE_URL=<the URL you want to test>
3
M365_USERNAME=<your email address>
4
M365_PASSWORD=<your password>
5

6
# When using the MFA login flow
7
M365_OTP_SECRET=<the secret key you copied>

• Run the tests using the following command:

1
npm test
2

3
# Or if you want to run the tests in the UI mode
4
npm run test:ui

Here is a video of the login flow in action:

Running tests in GitHub Actions

The Playwright M365 starter template provides a GitHub Actions workflow configuration for running the tests in a CI/CD pipeline. The workflow configuration is in the .github/workflows/e2e-testing.yml file.

To use the workflow, make sure to configure the following variables and secrets in your GitHub repository:

Variables

• M365_PAGE_URL: The URL you want to test (e.g., https://<tenant>.sharepoint.com/)

Secrets

• M365_USERNAME: Your email address
• M365_PASSWORD: Your password
• M365_OTP_SECRET: The secret key you copied

Conclusion

Automating the login flow for Microsoft 365 with an MFA-enabled account was easier than I thought. The Playwright M365 starter template provides a clean and reliable way to automate the login flow. This way, you can focus on writing your tests and not worry about the login flow.

You can find the Playwright M365 starter template on GitHub: estruyf/testing-microsoft365-playwright-template.