Override SPFx context properties during Playwright E2E tests

While creating new E2E tests for a SharePoint Framework solution, I wanted to test the solution with different permission sets. Usually, when you run your tests, you start these up with a user with the required permissions to run the tests. Instead of creating a new user with different permissions or different sites/pages to perform the tests, I looked into the possibility of overriding the context properties of SPFx.

By overriding the context properties, you can perform the tests against the same page and, in my case, the same user but with different permissions.

How to override the context properties

You first need access to the context object to override the context properties. When working in an SPFx solution, you can access it from this.context, but during an E2E test, you need to get access to it differently.

There is a moduleLoaderPromise property on the window object, a promise that resolves to the moduleLoader object together with the spClientSidePageContext object.

To gain access, you can use the following code:

1
// Wait until the `moduleLoaderPromise` is available
2
await page.waitForFunction(() => (window as any).moduleLoaderPromise);
3

4
// Get the `context` object
5
await page.evaluate(() => {
6
  const moduleLoader = (window as any).moduleLoaderPromise;
7
  if (!moduleLoader?.context) {
8
    console.log("Module loader context is not available");
9
    return;
10
  }
11

12
  return moduleLoader.context;
13
});

With the context object, you can override the properties. For example, in my case, I want to override the permissions of the web object to mock a user with owner, member, or visitor permissions.

1
const overridePermissions = async (page: Page, permission: "owner" | "member" | "visitor",) => {
2
  await page.waitForFunction(() => (window as any).moduleLoaderPromise);
3

4
  await page.evaluate(async ({ permission, type }) => {
5
    const moduleLoader = await (window as any).moduleLoaderPromise;
6
    if (!moduleLoader.context) {
7
      console.log("Module loader context is not available");
8
      return;
9
    }
10

11
    // Visitor permissions
12
    let permissionValue = { High: 176, Low: 138612833 };
13

14
    if (permission === "owner") {
15
      // Owner permissions
16
      permissionValue = { High: 2147483647, Low: 4294705151 };
17
    } else if (permission === "member") {
18
      // Member permissions
19
      permissionValue = { High: 432, Low: 1011028719 };
20
    }
21

22
    moduleLoader.context._pageContext._web.permissions._value = permissionValue;
23
  }, { permission, type, });
24
};

With the overridden permissions, you can perform your tests against the same page. You can use the overridePermissions function to switch between permission sets.

1
test.describe("Permissions", () => {
2
  test(`Full control`, async ({ page }) => {
3
    await page.goto(`<your url>`, {
4
      waitUntil: "domcontentloaded",
5
    });
6

7
    await overridePermissions(page, "owner");
8

9
    // Perform your tests
10
  });
11
});

Conclusion

By overriding the context properties of SPFx, you can perform your E2E tests against the same page but with mocked properties, allowing you to test your solution quicker without creating new users, pages, or sites for each test case.

Of course, for in-depth testing of your solution, it would be better to use a user with the correct permission set, but for simple cases like when your solution needs to show or hide certain elements, the current solution is a perfect fit.