Démarrer avec les exemples Playwright de Power Platform

Ce guide vous aide à commencer à utiliser des exemples Power Platform Playwright en clonant le référentiel, en configurant des variables d’environnement, en authentifiant et en exécutant votre premier test de bout en bout.

Prerequisites

Avant de commencer, assurez-vous d’avoir :

  • Node.js 20 ou version ultérieure
  • Git
  • Un environnement Power Platform avec au moins une application déployée
  • Un compte d’utilisateur ayant accès à l’application que vous souhaitez tester

Note

Les exemples de tests de ce référentiel ciblent la solution Northwind Traders . Vous pouvez utiliser votre propre application en suivant les mêmes modèles. Consultez les exemples de tests pour obtenir des instructions de configuration.

Étape 1 : Cloner le référentiel

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

Étape 2 : Installer les dépendances

Le référentiel utilise Rush pour gérer le monorepo. Installez les dépendances avec :

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

Si vous préférez travailler directement avec le e2e-tests package :

cd packages/e2e-tests
npm install

Étape 3 : Installer les navigateurs

Installez Microsoft Edge (navigateur par défaut pour les tests Power Platform) :

cd packages/e2e-tests
npx playwright install msedge

Étape 4 : Configurer votre environnement

Copiez le modèle d’environnement et renseignez vos valeurs :

cp .env.example .env

Ouvrez .env et définissez les variables requises :

# 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>

Conseil / Astuce

Pour les pipelines CI/CD, utilisez l’authentification basée sur des certificats au lieu de mots de passe. Pour plus d’informations, consultez le guide d’authentification .

Pour obtenir la liste complète des variables d’environnement, consultez la référence des variables d’environnement.

Étape 5 : S’authentifier

L’authentification s’exécute une fois pour capturer un état de stockage du navigateur que tous les tests réutilisent.

S’authentifier auprès de Power Apps

Exécutez la commande suivante : Une fenêtre de navigateur s’ouvre pour vous connecter :

npm run auth:headful

L’état de stockage est enregistré dans .playwright-ms-auth/state-<email>.json.

S’authentifier auprès de l’application pilotée par modèle (facultatif)

Si vous testez des applications basées sur des modèles, exécutez une deuxième authentification sur le domaine Dynamics 365 :

npm run auth:mda:headful

L’état de stockage de l’application pilotée par le modèle est enregistré dans .playwright-ms-auth/state-mda-<email>.json.

Note

Les états de stockage d’authentification expirent avec la session. Répétez ces étapes lorsque les tests commencent à échouer avec des erreurs d’authentification ou configurez l’authentification CI/CD pour renouveler automatiquement l’état.

Étape 6 : Exécuter les tests

Exécutez tous les tests :

npx playwright test

N’exécutez que les tests d’application Canvas :

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

Exécutez uniquement les tests d’application pilotés par modèle :

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

Affichez le rapport HTML après l’exécution :

npx playwright show-report

Étape 7 : Écrire votre premier test Power Platform Playwright

L’exemple suivant montre un test d'application canvas minimal. Créez un fichier à l’adresse tests/my-app/my-app.test.tssuivante :

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();
});

Exécutez le test :

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

Étapes suivantes

Voir également

  • Last updated on