Rediger

Del via

Get started with Power Platform Playwright samples

This guide helps you get started with Power Platform Playwright samples by cloning the repository, configuring environment variables, authenticating, and running your first end-to-end test.

Prerequisites

Before you begin, make sure you have:

  • Node.js 20 or later
  • Git
  • A Power Platform environment with at least one app deployed
  • A user account with access to the app you want to test

Note

The sample tests in this repository target the Northwind Traders solution. You can use your own app by following the same patterns. See Sample tests for setup instructions.

Step 1: Clone the repository

git clone https://github.com/microsoft/power-platform-playwright-samples.git
cd power-platform-playwright-samples

Step 2: Install dependencies

The repository uses Rush to manage the monorepo. Install dependencies with:

node common/scripts/install-run-rush.js install

If you prefer to work directly with the e2e-tests package:

cd packages/e2e-tests
npm install

Step 3: Install browsers

Install Microsoft Edge (the default browser for Power Platform tests):

cd packages/e2e-tests
npx playwright install msedge

Step 4: Configure your environment

Copy the environment template and fill in your values:

cp .env.example .env

Open .env and set the required variables:

# Power Apps
POWER_APPS_BASE_URL=https://make.powerapps.com
POWER_APPS_ENVIRONMENT_ID=<your-environment-guid>

# Model-driven app (for model-driven app tests)
MODEL_DRIVEN_APP_URL=https://<org>.crm.dynamics.com/main.aspx?appid=<app-guid>

# Canvas app (for canvas tests)
CANVAS_APP_ID=<canvas-app-guid>
CANVAS_APP_TENANT_ID=<tenant-guid>

# Authentication
MS_AUTH_EMAIL=<your-test-user@domain.com>
MS_AUTH_CREDENTIAL_TYPE=password
MS_USER_PASSWORD=<password>

Tip

For CI/CD pipelines, use certificate-based authentication instead of passwords. See the authentication guide for details.

For the full list of environment variables, see Environment variables reference.

Step 5: Authenticate

Authentication runs once to capture a browser storage state that all tests reuse.

Authenticate to Power Apps

Run the following command. A browser window opens for you to sign in:

npm run auth:headful

The storage state is saved to .playwright-ms-auth/state-<email>.json.

Authenticate to the model-driven app (optional)

If you're testing model-driven apps, run a second authentication against the Dynamics 365 domain:

npm run auth:mda:headful

The model-driven app storage state is saved to .playwright-ms-auth/state-mda-<email>.json.

Note

Authentication storage states expire with the session. Repeat these steps when tests start failing with authentication errors, or configure CI/CD authentication to renew state automatically.

Step 6: Run the tests

Run all tests:

npx playwright test

Run only canvas app tests:

npx playwright test tests/northwind/canvas --project=default

Run only model-driven app tests:

npx playwright test tests/northwind/mda --project=model-driven-app

View the HTML report after the run:

npx playwright show-report

Step 7: Write your first Power Platform Playwright test

The following example shows a minimal canvas app test. Create a file at tests/my-app/my-app.test.ts:

import { test, expect } from '@playwright/test';
import { AppProvider, AppType, AppLaunchMode } from 'power-platform-playwright-toolkit';

const CANVAS_APP_URL = process.env.CANVAS_APP_URL!;

test('should load the app and display the gallery', async ({ page, context }) => {
  const app = new AppProvider(page, context);

  await app.launch({
    app: 'My Canvas App',
    type: AppType.Canvas,
    mode: AppLaunchMode.Play,
    skipMakerPortal: true,
    directUrl: CANVAS_APP_URL,
  });

  const canvasApp = app.getCanvasAppPage();
  const canvasFrame = page.frameLocator('iframe[name="fullscreen-app-host"]');

  await expect(canvasFrame.locator('[data-control-name="Gallery1"]')).toBeVisible();
});

Run the test:

npx playwright test tests/my-app/my-app.test.ts --project=default

Next steps

See also

  • Last updated on