Serveur MCP playwright pour les tests Power Platform

Le serveur Playwright MCP est un serveur Model Context Protocol qui offre aux assistants de codage d'IA un accès direct à une session de navigateur en temps réel. Au lieu de deviner des sélecteurs à partir de captures d’écran ou de documentation, l’IA peut inspecter le DOM réel, cliquer sur des éléments et observer la navigation, puis générer des tests de playwright précis à partir de ce qu’il trouve.

Pourquoi utiliser playwright MCP pour les tests Power Platform

Les applications Power Platform présentent des défis spécifiques pour la création de tests :

• Les contrôles Canvas ont des attributs qui sont spécifiques à l'application et non documentés.
• Les éléments de la galerie imbriquent plusieurs éléments locatables, de sorte que le sélecteur approprié dépend de la structure exacte.
• Vous devez traverser la limite iframe (iframe[name="fullscreen-app-host"]) avant toute interaction de contrôle.
• Les vues soutenues par Dataverse peuvent prendre 30 à 60 secondes pour se charger.

À l’aide de Playwright MCP, l’assistant IA peut :

• Accédez à votre canevas ou à votre application basée sur des modèles.
• Inspectez les noms de contrôle et les étiquettes ARIA sur le DOM rendu réel.
• Générez des sélecteurs correctement délimités à l’iframe.
• Interactions temporelles avec des temps d'attente appropriés en fonction du comportement observé.

Installer le serveur MCP Playwright

Installez le serveur Playwright MCP globalement à l’aide de npm afin que votre assistant de codage IA puisse se connecter à une session de navigateur en direct.

npm install -g @playwright/mcp

Ou utilisez npx pour l'exécuter sans installation globale :

npx @playwright/mcp

Configurer votre assistant IA pour utiliser MCP

Après avoir installé le serveur, configurez votre assistant de codage IA pour qu’il se connecte. Les sections suivantes montrent la configuration des éditeurs populaires.

VS Code (GitHub Copilot)

Ajoutez le code suivant à vos paramètres utilisateur ou à .vscode/settings.json :

{
  "github.copilot.chat.experimental.mcp.servers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp"]
    }
  }
}

Claude (claude.ai ou Claude Code)

Créez ou mettez à jour votre CLAUDE.md ou .claude/settings.json pour inclure le serveur MCP. Dans Claude Code, ajoutez le serveur via la /mcp commande ou en modifiant ~/.claude/settings.json:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp"]
    }
  }
}

Curseur / Planche à voile

Dans Curseur, ajoutez le serveur sous Paramètres → SERVEURs IA → MCP :

{
  "name": "playwright",
  "command": "npx @playwright/mcp"
}

Connecter l’IA à votre application Power Platform

1. Démarrez votre application Power Platform dans un navigateur (mode d'exécution ou créer un portail).

2. Indiquez à votre assistant IA de se connecter au navigateur en cours d’exécution :

   « Se connecter au navigateur et accéder à https://apps.powerapps.com/play/<your-app-id>»

3. Demandez à l’IA d’inspecter l’application et de générer un test :

   « Inspectez l'application canevas et rédigez un test Playwright qui ouvre la galerie des commandes, clique sur le premier élément, et vérifie le champ du numéro de commande. »

L’IA inspecte le DOM via le serveur MCP, identifie les valeurs, note la data-control-name limite iframe et génère des localisateurs délimités, tous sans ouvrir DevTools.

Exemple : Générer un test d’application Canvas

Invitez votre assistant IA :

À l’aide du serveur Playwright MCP, connectez-vous à l’application Canvas en cours d’exécution sur <url>. Identifiez le nom du contrôle de la galerie et le nom du contrôle de l'étiquette du titre. Ensuite, écrivez un test Playwright qui :

1. Attend que la galerie se charge
2. Filtre les éléments pour trouver un élément intitulé « Northwind Traders »
3. Clique sur cet élément
4. Vérifie qu’un panneau de détails s’affiche »

L'IA utilise les outils browser_navigate, browser_snapshot, et browser_click du serveur MCP, puis émet du code de test comme :

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

test('find and click Northwind Traders in gallery', async ({ page, context }) => {
  const app = new AppProvider(page, context);
  await app.launch({
    app: 'Orders App',
    type: AppType.Canvas,
    mode: AppLaunchMode.Play,
    skipMakerPortal: true,
    directUrl: buildCanvasAppUrlFromEnv(),
  });

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

  // Wait for gallery (control name found via MCP inspection)
  await canvasFrame
    .locator('[data-control-name="Gallery1"] [data-control-part="gallery-item"]')
    .first()
    .waitFor({ state: 'visible', timeout: 60000 });

  // Click item by title (control name found via MCP inspection)
  const item = canvasFrame
    .locator('[data-control-part="gallery-item"]')
    .filter({
      has: canvasFrame
        .locator('[data-control-name="Title1"]')
        .getByText('Northwind Traders', { exact: true }),
    });

  await item.click();

  // Verify details panel
  await expect(canvasFrame.locator('[data-control-name="DetailPanel1"]')).toBeVisible();
});

Exemple : Générer un test d’application piloté par modèle

Invite:

"Accédez à <model-driven-app-url>. Inspectez la AG Grid et recherchez l’en-tête de colonne pour les numéros de commande. Écrivez un test qui filtre par « ORD-001 », lit la première cellule et vérifie la valeur. »

L’IA navigue, inspecte la structure de grille, identifie le nom du schéma de colonne et génère :

await mda.grid.filterByKeyword('ORD-001');
await mda.grid.waitForGridLoad();
const orderNumber = await mda.grid.getCellValue(0, 'nwind_ordernumber');
expect(orderNumber).toContain('ORD-001');

Outils MCP disponibles

Le serveur MCP Playwright expose les outils suivants aux assistants IA :

Résoudre les problèmes de connexion MCP

Étapes suivantes

• Création de tests d’IA avec Copilot
• Instructions personnalisées pour les agents IA
• Exemples de tests

Voir aussi

• serveur MCP Playwright sur GitHub
• Vue d’ensemble des tests assistés par l’IA
• Tester des applications de canevas