Playwright MCP

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

# 基础启动
npx @playwright/mcp@latest

# 带配置启动
npx @playwright/mcp@latest \
  --browser chrome \
  --headless \
  --viewport-size "1920,1080" \
  --output-dir "./screenshots"

# AI助手可以执行如下复杂操作序列：

1. browser_navigate: "https://github.com/microsoft/playwright"
2. browser_snapshot: 获取页面结构
3. browser_click: 点击"Pull requests"标签
4. browser_type: 搜索特定PR "chore: make noWaitAfter a default"
5. browser_click: 打开目标PR
6. browser_click: 切换到"Checks"标签
7. browser_click: 展开"infra"检查套件
8. browser_take_screenshot: 截图保存结果

// 使用browser_generate_playwright_test生成的测试代码
import { test, expect } from '@playwright/test';

test('GitHub PR Checks Navigation', async ({ page }) => {
  // 打开GitHub仓库
  await page.goto('https://github.com/microsoft/playwright');
  
  // 点击Pull requests标签
  await page.getByRole('tab', { name: 'Pull requests' }).click();
  
  // 搜索特定PR
  await page.getByPlaceholder('Search pull requests').fill('chore: make noWaitAfter a default');
  
  // 打开PR详情
  await page.getByRole('link', { name: 'chore: make noWaitAfter a default' }).click();
  
  // 切换到Checks标签
  await page.getByRole('tab', { name: 'Checks' }).click();
  
  // 展开infra检查套件
  await page.getByText('infra').click();
  
  // 验证docs & lint任务存在
  await expect(page.getByText('docs & lint')).toBeVisible();
});

npx @playwright/mcp@latest \
  --browser chrome \
  --headless \
  --viewport-size "1920,1080" \
  --user-agent "Mozilla/5.0 Custom Agent" \
  --proxy-server "http://proxy:8080" \
  --block-service-workers \
  --ignore-https-errors \
  --save-trace \
  --output-dir "./automation-results" \
  --allowed-origins "*.example.com;*.trusted-site.com" \
  --caps "tabs,pdf,history,wait,files"

# 使用官方Docker镜像
docker run -p 3000:3000 \
  -e PLAYWRIGHT_BROWSERS_PATH=/usr/bin \
  --security-opt seccomp=unconfined \
  mcr.microsoft.com/playwright:latest \
  npx @playwright/mcp@latest --port 3000

# 自定义配置文件
docker run -v ./config:/app/config \
  -p 3000:3000 \
  playwright-mcp:latest \
  --config /app/config/playwright-mcp.json

// 扩展Playwright MCP功能
import { defineTool } from '@playwright/mcp';

const customTool = defineTool({
  capability: 'custom',
  schema: {
    name: 'browser_custom_action',
    title: 'Custom Browser Action',
    description: 'Execute custom browser automation',
    inputSchema: z.object({
      action: z.string().describe('Custom action to perform'),
      params: z.object({}).describe('Action parameters')
    }),
    type: 'destructive',
  },
  
  handle: async (context, params) => {
    const tab = context.currentTabOrDie();
    // 自定义逻辑实现
    const result = await tab.page.evaluate((action, params) => {
      // 在浏览器上下文中执行
      return window.customActions[action](params);
    }, params.action, params.params);
    
    return {
      code: [`// Custom action: ${params.action}`],
      action: () => Promise.resolve(result),
      captureSnapshot: true,
      waitForNetwork: true
    };
  }
});