Start testing your Power Apps with Playwright

Earlier this year, I was asked if it was possible to test Power Apps with Playwright. My answer was that it should be possible, as it is still a web application that gets created. Over the last few months, I have been working on and testing a project where I used Playwright to test a solution created in Power Apps.

As the whole Power Platform becomes increasingly popular, it is also important to start testing these solutions as they become more complex and are used in more critical business processes. Microsoft also provides two ways of testing your Power Apps, but they are not as flexible as Playwright. I also believe it is best to use a testing platform that many testers are already familiar with. This way, you can use the same testing platform for all your applications.

In this blog post, I will show you how you can start testing your Power Apps with Playwright.

Getting started

The first thing you need is an app to test; if you don’t have one yet, you can create one in the Power Apps portal.

For my example, I have created a simple app with two screens. The first screen is created to test the control behavior, and the second screen has a gallery that shows an inventory of stickers.

Show image

Besides the app, you also need an account to be used for running the tests.

The Playwright project

Clone the Microsoft 365 Playwright Template repository to get started. This repository contains a template you can use to start testing your Microsoft 365 solutions, such as Power Apps, SharePoint, Teams, and more.

1
git clone [email protected]:estruyf/testing-microsoft365-playwright-template.git

After you have cloned the repository, you can install the dependencies.

1
npm install

Copy the .env.sample file to .env and update the values with your credentials.

1
cp .env.sample .env

Add the URL of your Power App to the M365_PAGE_URL variable.

Authentication

To start testing, Playwright first needs to authenticate before it can load your Power App. The template already contains the necessary code, so you must provide the credentials information (username, password, …) in the .env file.

As MFA (Multi-Factor Authentication) is recommended, you will have to provide a TOTP (Time-based One-Time Password) secret in the .env file. More information on how you can get this secret can be found in the automating Microsoft 365 login with multi-factor authentication in Playwright tests article.

Writing the tests

The template already contains a test file, tests/power-apps.spec.ts. In this file, you can write your tests.

Typically, to get started with a new test, I start with the following base:

1
import { test, expect, Page } from "@playwright/test";
2
import { getAppFrame } from "playwright-m365-helpers";
3

4
test.describe("Power Apps", () => {
5
  let page: Page;
6

7
  test.beforeAll(async ({ browser }) => {
8
    page = await browser.newPage();
9
    await page.goto(process.env.M365_PAGE_URL || "", {
10
      waitUntil: "domcontentloaded",
11
    });
12

13
    const splashScreen = page.locator("#playerSplashScreen");
14
    await splashScreen.waitFor({ state: "hidden" });
15
  });
16

17
  test.afterAll(async () => {
18
    await page.close();
19
  });
20

21
  test("Check if canvas is loaded", async () => {
22
    await getAppFrame(page);
23
  });
24
});

In this test, the Power App is loaded and checked to see if the app canvas is shown with the getAppFrame function. This function is part of the playwright-m365-helpers package, which I created to help you interact with Microsoft 365 solutions.

Behind the getAppFrame function, the following code is executed:

1
const iframe = page.frameLocator("iframe#fullscreen-app-host");
2
const publishedCanvas = iframe.locator("#publishedCanvas");
3
await expect(publishedCanvas).toBeVisible();

This code checks if the canvas is visible. If it is not, the test will fail.

The app canvas is the main part of Power Apps, it is an iframe in which all the controls are placed/loaded. Once you have the canvas, you can start interacting with the controls.

In my example, I want to test whether the gallery is loaded and the items are shown. To do this, I have created the following test:

1
test("Check if sticker inventory screen works", async ({ page }) => {
2
  // Retrieve the canvas
3
  const canvas = await getAppFrame(page);
4

5
  // Get the button for the next page and click it
6
  const nextButton = getButton(canvas, "NextBtn_1");
7
  await nextButton.click();
8

9
  // Wait for the connector response
10
  const response = await waitForConnectorResponse(
11
    page,
12
    "sharepointonline/4aee3a63496d4e3f998c3910ba712bf2",
13
    { logging: false }
14
  );
15

16
  const data = await response.json();
17
  const totalItem = data.value.length;
18

19
  // Get the gallery and check if it is visible
20
  const gallery = getControlByName(canvas, "Gallery1");
21
  await expect(gallery).toBeVisible();
22

23
  // Get the gallery items and check if the total shown stickers is the same as the total items in the response
24
  const galleryItems = getGalleryItems(gallery);
25
  await expect(galleryItems).toHaveCount(totalItem);
26

27
  // Check if we can view the description of the second item
28
  const secondItem = galleryItems.nth(1);
29
  const descriptionLabel = getLabel(secondItem, "DescriptionLabel");
30
  await expect(descriptionLabel).not.toBeVisible();
31

32
  const infoBtn = getControlByName(secondItem, "InfoBtn");
33
  await infoBtn.click();
34

35
  await expect(descriptionLabel).toBeVisible();
36

37
  await page.screenshot({
38
    path: "screenshots/inventory-result-description.png",
39
  });
40
});

Above, you can see a test that checks if the gallery is loaded and if the items are shown. It also checks if the description of the second item is shown when the info button is clicked.

Helper functions

The playwright-m365-helpers package contains a set of helper functions to interact with your Power App. Most of these functions like getButton, getControlByName, … all use the name of the control to find it. This name can be set and retrieved while editing your Power App (or use your browser developer tools).

Show image

Another helpful function is the waitForConnectorResponse one. Typically, when you test a web app and want to wait for an API response, you can use page.waitForResponse. In Power Apps, all calls to your APIs are done through connectors (**/invoke API calls). The waitForConnectorResponse function simplifies this process, and all you need to provide is the connector ID.

The connector ID is found in the URL when opening the connector from the connections page in your Power Apps portal.

Show image

Running the tests

Once you have written your tests, you can run them by executing the following command:

1
# Running tests in your terminal
2
npx playwright test
3

4
# Running tests in UI mode
5
npx playwright test --ui

UI mode is useful when writing new tests or verifying existing ones.

Show image

Conclusion

Testing your Power Apps with Playwright is a great way to ensure your applications work as expected. This allows you to catch issues before they reach your users.

The next step is integrating these tests into your CI/CD pipeline. This way, you can run these tests automatically after each update or on a schedule.