Exemples de tests

Le référentiel comprend un ensemble complet d’exemples de tests ciblant un environnement Northwind Traders. Ces exemples illustrent la gamme complète de modèles de test pris en charge par le kit de ressources et servent de point de départ pour vos propres tests.

Exemples de suites de test

Exécuter les exemples

Suivez ces étapes pour configurer votre environnement et exécuter les exemples de suites de test sur un environnement Northwind Traders.

Prerequisites

1. Clonez le référentiel et installez les dépendances :

   git clone https://github.com/microsoft/power-platform-playwright-samples.git
   cd power-platform-playwright-samples
   node common/scripts/install-run-rush.js install
   

2. Configurer des variables d’environnement dans packages/e2e-tests/.env:

   MS_AUTH_EMAIL=testuser@contoso.com
   MS_USER_PASSWORD=<password>
   CANVAS_APP_URL=https://apps.powerapps.com/play/<app-id>
   MODEL_DRIVEN_APP_URL=https://<org>.crm.dynamics.com/main.aspx?appid=<app-id>
   CUSTOM_PAGE_NAME=AccountsCustomPage
   

3. Authentifier:

   cd packages/e2e-tests
   npm run auth:headful
   npm run auth:mda:headful
   

Exécuter tous les exemples de tests

Pour exécuter chaque test dans le référentiel, exécutez la commande suivante à partir du packages/e2e-tests répertoire :

cd packages/e2e-tests
npx playwright test

Exécuter une suite unique

Vous pouvez cibler une suite de test spécifique en transmettant son chemin d’accès au fichier ou au dossier à la playwright test commande :

npx playwright test tests/northwind/canvas
npx playwright test tests/northwind/mda/model-driven-crud.test.ts

Exécuter avec l’interface utilisateur Playwright

Utilisez l’indicateur --ui pour lancer l’exécuteur de test interactif de Playwright, qui vous permet de regarder, de déboguer et de réexécuter les tests visuellement :

npx playwright test --ui

Exemple CRUD de l’application Canevas

Le test d’application Canvas (canvas-app-crud.test.ts) test d’application Canvas (canvas-app-crud.test.ts) montre comment :

• Lancez directement une application canevas à l'aide de skipMakerPortal: true.
• Attendez qu’une galerie se charge avec un délai d’expiration de 60 secondes.
• Sélectionnez un élément de galerie par contenu texte.
• Remplissez un formulaire de commande et enregistrez-le.
• Vérifiez que les modifications apparaissent dans la galerie.

Modèles clés utilisés :

// Wait for gallery with sufficient timeout
await canvasFrame
  .locator('[data-control-part="gallery-item"]')
  .first()
  .waitFor({ state: 'visible', timeout: 60000 });

// Select gallery item by title text
const galleryItem = canvasFrame
  .locator('[data-control-part="gallery-item"]')
  .filter({
    has: canvasFrame
      .locator('[data-control-name="Title1"]')
      .getByText('Order 001', { exact: true }),
  });

Exemple CRUD piloté par modèle

Le test piloté par modèle (model-driven-crud.test.ts) montre comment :

• Lancez une application basée sur un modèle à l’aide de directUrl.
• Accédez à une vue de grille par nom d’entité.
• Filtrez la grille par mot clé et valeur de colonne.
• Lit les valeurs de cellule par le nom du schéma de colonne.
• Ouvrez un enregistrement et modifiez un champ.
• Enregistrer et vérifier sur le formulaire avant de quitter la page.
• Supprimez un enregistrement via la barre de commandes.

Modèles clés utilisés :

// Filter and wait for grid
await mda.grid.filterByKeyword('ORD-TEST');
await mda.grid.waitForGridLoad();

// Read cell value and open record
const orderNumber = await mda.grid.getCellValue(0, 'nwind_ordernumber');
await mda.grid.openRecord({ rowNumber: 0 });

// Save form and verify
await mda.form.save();
expect(await mda.form.isDirty()).toBe(false);

Exemple de CRUD pour pages personnalisées

Le test de page personnalisé (custom-page-crud.test.ts) montre comment :

• Lancez une application basée sur des modèles et accédez à une page personnalisée via le plan.
• Étendre toutes les interactions à iframe[name="fullscreen-app-host"].
• Créez un enregistrement dans la page de canevas incorporée.
• Actualisez la galerie en naviguant jusqu'à l'écran d'accueil de l'application puis en revenant.
• Vérifiez que l’enregistrement nouvellement créé s’affiche.

Modèles clés utilisés :

// Navigate to custom page via sitemap
const sidebarItem = page.locator(`[role="presentation"][title="${CUSTOM_PAGE_NAME}"]`).first();
await sidebarItem.waitFor({ state: 'visible', timeout: 30000 });
await sidebarItem.click();

// Scope to canvas iframe
const canvasFrame = page.frameLocator('iframe[name="fullscreen-app-host"]');

// Refresh by navigating to app root and back
await page.goto(MODEL_DRIVEN_APP_URL, { waitUntil: 'load', timeout: 60000 });
await sidebarItem.click();

Étendre les exemples

Pour adapter les exemples à votre environnement :

• Remplacez les noms d’entités : mettre à jour nwind_orders, nwind_ordernumberet les noms de schémas similaires pour correspondre à vos tables Dataverse.
• Remplacer les noms de contrôle : Mettez à jour data-control-name les valeurs pour qu’elles correspondent aux contrôles de votre application canevas.
• Remplacez les URL de l'application : redirigez CANVAS_APP_URL et MODEL_DRIVEN_APP_URL vers vos propres applications.
• Remplacer les noms de colonnes : Mettez à jour les noms d’affichage comme 'Order Number' dans les appels getCellValue().

Étapes suivantes

• Vue d’ensemble des tests assistés par l’IA
• Modèle de page objet
• Informations de référence sur la configuration

Voir également

• Tester des applications de canevas
• Tester des applications basées sur des modèles
• Tester des pages personnalisées
• Guide d’authentification