Création de tests IA avec Copilot

Le générateur de code intégré (codegen) de Playwright enregistre les interactions de votre navigateur en tant que code de test TypeScript. Combinez-le avec un assistant de codage IA pour nettoyer l’enregistrement, appliquer les conventions du kit de ressources Playwright Power Platform et produire des tests prêts pour la production sans écrire manuellement des sélecteurs.

Fonctionnement du flux de travail

1. Enregistrement: exécutez playwright codegen contre votre application Power Platform. Playwright capture chaque clic, remplissage et navigation en tant que code de test brut.
2. Coller : déposez le code enregistré dans votre conversation IA en même temps que les documents de l’API du kit de ressources ou vos instructions personnalisées.
3. Réécriture : Demandez à l'IA de réécrire l'enregistrement à l'aide de AppProvider, ModelDrivenAppPage, GridComponent et d'autres classes de la boîte à outils.
4. Révision : Vérifiez l'exactitude du test généré, ajustez les délais d'expiration, puis validez les modifications.

Ce flux de travail est particulièrement utile lorsque vous débutez avec l’API du kit de ressources ou que vous utilisez une application inconnue.

Étape 1 : Enregistrer avec le codegen Playwright

Utilisez l’outil codegen de Playwright pour enregistrer vos interactions de navigateur et générer le code de test brut que vous affinerez dans les étapes ultérieures.

Installer des navigateurs Playwright

Avant d’enregistrer, vérifiez que le navigateur Chromium est installé pour Playwright.

cd packages/e2e-tests
npx playwright install chromium

Exécuter codegen sur votre application

Démarrez le générateur de code de Playwright pointant vers l’URL de votre application Power Platform. Cela ouvre un navigateur en parallèle avec l’inspecteur Playwright, qui enregistre chaque interaction en tant que TypeScript.

npx playwright codegen --save-storage=.playwright-ms-auth/state-record.json \
  "https://apps.powerapps.com/play/<your-app-id>"

Cette commande ouvre un navigateur et un Playwright Inspector côte à côte. Interagir avec votre application : cliquez sur des boutons, remplissez des formulaires et naviguez. L’inspecteur enregistre chaque action en tant que TypeScript.

npx playwright codegen --load-storage=.playwright-ms-auth/state-<email>.json \
  "https://apps.powerapps.com/play/<your-app-id>"

Copier le code généré

Lorsque vous avez terminé, copiez le test généré à partir de l’inspecteur Playwright. Il ressemblera à ceci :

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
  await page.goto('https://apps.powerapps.com/play/...');
  await page.frameLocator('iframe[name="fullscreen-app-host"]')
    .locator('[data-control-name="icon3"]').click();
  await page.frameLocator('iframe[name="fullscreen-app-host"]')
    .locator('input[aria-label="Account Name"]').fill('Contoso');
  // ...
});

Étape 2 : Réécrire avec l’IA

Collez l’enregistrement dans votre conversation IA. Ensuite, demandez :

Réécrire cet enregistrement de génération de code Playwright en tant que test approprié à l’aide de l’ensemble d'outils Power Platform Playwright. Utiliser AppProvider pour lancer l'application, attribuer le localisateur de trame à une variable, ajouter des appels appropriés waitFor avant les interactions, et utiliser les assertions expect de @playwright/test.

Si vous avez configuré un fichier d’instructions personnalisé , l’IA applique automatiquement vos conventions de projet. Sinon, partagez l’extrait de code approprié à partir de canvas-application.md ou de model-driven-application.md en tant que contexte.

Exemple : test de canevas réécrit par IA

L’exemple suivant montre comment la sortie raw codegen se transforme en un test propre et facile à maintenir à l’aide de la boîte à outils Power Platform Playwright.

Avant (sortie codegen) :

test('test', async ({ page }) => {
  await page.goto('https://apps.powerapps.com/play/<app-id>');
  await page.frameLocator('iframe[name="fullscreen-app-host"]')
    .locator('[data-control-name="icon3"]').click();
  await page.frameLocator('iframe[name="fullscreen-app-host"]')
    .locator('input[aria-label="Account Name"]').fill('Contoso');
  await page.frameLocator('iframe[name="fullscreen-app-host"]')
    .locator('[data-control-name="IconButton_Accept1"] [role="button"]').click();
});

Après (réécriture par IA) :

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

test('should add a new account', async ({ page, context }) => {
  const app = new AppProvider(page, context);
  await app.launch({
    app: 'Accounts App',
    type: AppType.Canvas,
    mode: AppLaunchMode.Play,
    skipMakerPortal: true,
    directUrl: buildCanvasAppUrlFromEnv(),
  });

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

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

  // Click Add
  await canvasFrame.locator('[data-control-name="icon3"]').click();

  // Fill form
  await canvasFrame.locator('input[aria-label="Account Name"]').fill('Contoso');

  // Save
  await canvasFrame
    .locator('[data-control-name="IconButton_Accept1"] [role="button"]')
    .click();

  // Verify record appears
  const newItem = canvasFrame
    .locator('[data-control-part="gallery-item"]')
    .filter({ hasText: 'Contoso' });

  await expect(newItem).toBeVisible({ timeout: 30000 });
});

Étape 3 : Utiliser codegen en mode dirigé pour les applications basées sur des modèles

Pour les applications basées sur des modèles, enregistrez les interactions de grille et de formulaire de navigation :

npx playwright codegen --load-storage=.playwright-ms-auth/state-mda-<email>.json \
  "https://<org>.crm.dynamics.com/main.aspx?appid=<app-id>"

Ensuite, demandez à l’IA de réécrire à l’aide de ModelDrivenAppPage

« Réécrire cet enregistrement de génération de code pour utiliser ModelDrivenAppPage. » Remplacez les clics de grille brute page.locator() par mda.grid.filterByKeyword(), mda.grid.openRecord(), mda.form.getAttribute() et mda.form.save().

Utiliser gitHub Copilot Chat pour la création de tests

Dans VS Code avec GitHub Copilot, vous pouvez créer des tests directement dans le volet de conversation sans codegen :

1. Ouvrez le fichier de test approprié dans l’éditeur.

2. Ouvrez Copilot Chat (Ctrl+Shift+I).

3. Demande :

   « @workspace Écrire un test dans tests/northwind/canvas/canvas-app-crud.test.ts lequel ouvre la galerie, recherche l’élément intitulé « Northwind Traders », clique dessus, modifie le champ de téléphone et enregistre. »

Copilot lit votre fichier de test et votre kit de ressources existants pour produire du code de test contextuel précis.

Utiliser Claude pour des suites de test plus volumineuses

Claude (via Claude Code ou Claude.ai) excelle à générer plusieurs tests connexes à la fois :

« Étant donné la structure de l'application canvas [insérer le contenu de canvas-application.md], générez une suite de tests complète couvrant : (1) le chargement de la galerie avec des éléments, (2) le filtrage des résultats de recherche, (3) la création d'un nouvel enregistrement, (4) la modification d'un enregistrement existant, (5) la suppression d'un enregistrement. »

Claude génère les cinq tests dans une seule réponse, en suivant les modèles dans votre contexte.

Playwright CLI pour la rapide génération de tests

L’interface CLI Playwright fournit des utilitaires supplémentaires pour la gestion des tests :

# Install
npm install -g @playwright/cli

# Generate test stubs for a URL
playwright-cli generate --url "https://apps.powerapps.com/play/<app-id>"

# List all tests in a project
playwright-cli list

# Show test tree
playwright-cli show-tree packages/e2e-tests

Meilleures pratiques pour les tests générés par l’IA

• Passez toujours en revue les sélecteurs générés : l’IA peut créer des sélecteurs trop fragiles ou trop larges. Vérifiez les data-control-name valeurs par rapport au DOM réel.
• Vérifier les délais d’expiration : l’IA ne connaît pas le temps de chargement de votre application. Ajoutez des délais d’expiration de 60 secondes pour les appels de galerie waitFor sur les applications basées sur Dataverse.
• Utilisez des données de test uniques : les tests générés par l’IA utilisent souvent des chaînes codées en dur. Remplacez-les par des suffixes Date.now() pour éviter les conflits entre les exécutions de test.
• Valider avec expect: Les enregistrements codegen manquent souvent d’assertions. Demandez à l’IA d’ajouter des appels significatifs expect après chaque action.

Étapes suivantes

• Instructions personnalisées pour les agents IA
• Serveur MCP Playwright
• Exemples de tests

Voir aussi

• Documentation de codegen playwright
• Vue d’ensemble des tests assistés par l’IA
• Le guide de test d'application Canvas