Playwright MCP server for Power Platform testing

The Playwright MCP server is a Model Context Protocol server that gives AI coding assistants direct access to a live browser session. Instead of guessing selectors from screenshots or documentation, the AI can inspect the real DOM, click elements, and observe navigation – then generate precise Playwright tests from what it finds.

Why use Playwright MCP for Power Platform testing

Power Platform apps present specific challenges for test authoring:

• Canvas controls have data-control-name attributes that are app-specific and not documented.
• Gallery items nest multiple locatable elements, so the right selector depends on the exact structure.
• You must cross the iframe boundary (iframe[name="fullscreen-app-host"]) before any control interaction.
• Dataverse-backed views might take 30–60 seconds to populate.

By using Playwright MCP, the AI assistant can:

• Navigate to your canvas or model-driven app.
• Inspect control names and ARIA labels on the actual rendered DOM.
• Generate selectors that are correctly scoped to the iframe.
• Time interactions with appropriate waits based on observed behavior.

Install the Playwright MCP server

Install the Playwright MCP server globally by using npm so your AI coding assistant can connect to a live browser session.

npm install -g @playwright/mcp

Or use npx to run it without a global install:

npx @playwright/mcp

Configure your AI assistant to use MCP

After installing the server, configure your AI coding assistant to connect to it. The following sections show the setup for popular editors.

VS Code (GitHub Copilot)

Add the following code to your .vscode/settings.json or user settings:

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

Claude (claude.ai or Claude Code)

Create or update your CLAUDE.md or .claude/settings.json to include the MCP server. In Claude Code, add the server through the /mcp command or by editing ~/.claude/settings.json:

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

Cursor / Windsurf

In Cursor, add the server under Settings → AI → MCP Servers:

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

Connect the AI to your Power Platform app

1. Start your Power Platform app in a browser (play mode or make portal).

2. Tell your AI assistant to connect to the running browser:

   "Connect to the browser and navigate to https://apps.powerapps.com/play/<your-app-id>"

3. Ask the AI to inspect the app and generate a test:

   "Inspect the canvas app and write a Playwright test that opens the Orders gallery, clicks the first item, and verifies the order number field."

The AI inspects the DOM through the MCP server, identifies the data-control-name values, notes the iframe boundary, and generates scoped locators - all without you opening DevTools.

Example: Generate a canvas app test

Prompt your AI assistant:

"Using the Playwright MCP server, connect to the running canvas app at <url>. Find the gallery control name and the title label control name. Then write a Playwright test that:

1. Waits for the gallery to load
2. Filters items to find one titled 'Northwind Traders'
3. Clicks that item
4. Verifies a details panel appears"

The AI uses the MCP server's browser_navigate, browser_snapshot, and browser_click tools, then emits test code like:

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

Example: Generate a model-driven app test

Prompt:

"Navigate to <model-driven-app-url>. Inspect the AG Grid and find the column header for order numbers. Write a test that filters by 'ORD-001', reads the first cell, and verifies the value."

The AI navigates, inspects the grid structure, identifies the column schema name, and generates:

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

Available MCP tools

The Playwright MCP server exposes the following tools to AI assistants:

Troubleshoot MCP connection issues

Next steps

• AI test authoring with Copilot
• Custom instructions for AI agents
• Sample tests

See also

• Playwright MCP server on GitHub
• AI-assisted testing overview
• Test canvas apps