第 7 课：MCP Tools

┌─────────────────────────────────────────────────────────────────┐
│  🎯 核心观点：MCP 让 AI 拥有了"手"，可以真正操作浏览器          │
├─────────────────────────────────────────────────────────────────┤
│  📚 你将学到：                                                   │
│    • 理解 MCP（Model Context Protocol）的架构和原理              │
│    • 掌握 Playwright MCP 进行 AI 驱动的浏览器自动化              │
│    • 了解市面上各种浏览器自动化 MCP 工具的特点                   │
│    • 学习其他对前端开发有帮助的 MCP 工具                         │
│    • 现场演示配置和使用 MCP 工具                                 │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────┐
│   MCP Client    │  ← Claude Desktop、IDE、自定义应用
│  (AI应用)       │
└────────┬────────┘
         │
         │ MCP Protocol (JSON-RPC)
         │
┌────────┴────────┐
│   MCP Server    │  ← Playwright、Puppeteer、GitHub等
│  (工具提供者)   │
└────────┬────────┘
         │
         │
┌────────┴────────┐
│   Actual Tool   │  ← 浏览器、文件系统、API等
│  (真实工具)     │
└─────────────────┘

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "playwright_click",
    "arguments": {
      "selector": "button[type='submit']"
    }
  }
}

{
  "jsonrpc": "2.0",
  "id": 1,
  "result": {
    "content": [
      {
        "type": "text",
        "text": "Successfully clicked button"
      }
    ]
  }
}

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

test('用户登录流程', async ({ page }) => {
  // 1. 导航到登录页
  await page.goto('https://example.com/login');

  // 2. 等待页面加载
  await page.waitForSelector('input[name="username"]');

  // 3. 填写用户名
  await page.fill('input[name="username"]', 'testuser@example.com');

  // 4. 填写密码
  await page.fill('input[name="password"]', 'Test123456');

  // 5. 点击登录按钮
  await page.click('button[type="submit"]');

  // 6. 等待跳转
  await page.waitForURL('**/dashboard');

  // 7. 验证登录成功
  await expect(page.locator('.user-name')).toContainText('testuser');

  // 8. 截图保存
  await page.screenshot({ path: 'login-success.png' });
});

请帮我为 https://example.com/login 的登录流程生成E2E测试。
测试账号：testuser@example.com
密码：Test123456
验证登录成功后能看到用户名。

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

test('用户登录流程', async ({ page }) => {
  // 导航到登录页
  await page.goto('https://example.com/login');

  // 填写登录表单
  await page.getByLabel('邮箱').fill('testuser@example.com');
  await page.getByLabel('密码').fill('Test123456');

  // 提交表单
  await page.getByRole('button', { name: '登录' }).click();

  // 验证登录成功
  await expect(page).toHaveURL(/.*dashboard/);
  await expect(page.getByText('testuser')).toBeVisible();
});

测试完整的购物流程：
1. 访问首页
2. 搜索"iPhone 15"
3. 选择第一个商品
4. 添加到购物车
5. 进入购物车
6. 修改数量为2
7. 进入结账页
8. 填写收货地址
9. 选择支付方式
10. 确认订单
11. 验证订单创建成功

请帮我为电商网站 https://shop.example.com 生成完整的购物流程测试。

流程：
1. 搜索"iPhone 15"
2. 选择第一个商品并添加到购物车
3. 修改数量为2
4. 结账并填写地址（使用测试地址：北京市朝阳区xxx）
5. 选择货到付款
6. 确认订单
7. 验证订单号生成

请生成完整的Playwright测试代码，包含所有断言。

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

test.describe('电商购物流程', () => {
  test('完整购物流程测试', async ({ page }) => {
    // 1. 访问首页
    await page.goto('https://shop.example.com');

    // 2. 搜索商品
    await page.getByPlaceholder('搜索商品').fill('iPhone 15');
    await page.getByRole('button', { name: '搜索' }).click();

    // 3. 等待搜索结果加载
    await page.waitForSelector('.product-list');

    // 4. 选择第一个商品
    await page.locator('.product-item').first().click();

    // 5. 等待商品详情页加载
    await expect(page.locator('h1.product-title')).toContainText('iPhone 15');

    // 6. 添加到购物车
    await page.getByRole('button', { name: '加入购物车' }).click();

    // 7. 等待添加成功提示
    await expect(page.locator('.toast-success')).toBeVisible();

    // 8. 进入购物车
    await page.getByRole('link', { name: '购物车' }).click();

    // 9. 修改数量为2
    await page.locator('input[type="number"]').fill('2');
    await page.locator('button.update-quantity').click();

    // 10. 等待价格更新
    await page.waitForTimeout(1000);

    // 11. 进入结账页
    await page.getByRole('button', { name: '去结算' }).click();

    // 12. 填写收货地址
    await page.getByLabel('收货人').fill('测试用户');
    await page.getByLabel('手机号').fill('13800138000');
    await page.getByLabel('详细地址').fill('北京市朝阳区测试大厦');

    // 13. 选择支付方式
    await page.getByLabel('货到付款').check();

    // 14. 确认订单
    await page.getByRole('button', { name: '提交订单' }).click();

    // 15. 验证订单创建成功
    await expect(page).toHaveURL(/.*order\/success/);

    // 16. 获取订单号
    const orderNumber = await page.locator('.order-number').textContent();
    expect(orderNumber).toMatch(/\d{10,}/);

    // 17. 截图保存
    await page.screenshot({ path: `order-${orderNumber}.png` });

    console.log(`订单创建成功，订单号：${orderNumber}`);
  });
});

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

test.describe('视觉回归测试', () => {
  test('首页视觉对比', async ({ page }) => {
    await page.goto('https://example.com');

    // Playwright内置的视觉对比
    await expect(page).toHaveScreenshot('homepage.png', {
      maxDiffPixels: 100, // 允许100个像素差异
    });
  });

  test('响应式布局对比', async ({ page }) => {
    await page.goto('https://example.com');

    // 桌面端
    await page.setViewportSize({ width: 1920, height: 1080 });
    await expect(page).toHaveScreenshot('desktop.png');

    // 平板端
    await page.setViewportSize({ width: 768, height: 1024 });
    await expect(page).toHaveScreenshot('tablet.png');

    // 移动端
    await page.setViewportSize({ width: 375, height: 667 });
    await expect(page).toHaveScreenshot('mobile.png');
  });

  test('组件视觉对比', async ({ page }) => {
    await page.goto('https://example.com/components');

    // 只截取特定组件
    const button = page.locator('.primary-button');
    await expect(button).toHaveScreenshot('button.png');

    // 悬停状态
    await button.hover();
    await expect(button).toHaveScreenshot('button-hover.png');

    // 激活状态
    await button.click();
    await expect(button).toHaveScreenshot('button-active.png');
  });
});

请为我们的设计系统组件库生成完整的视觉回归测试。
组件列表：Button、Input、Select、Modal、Tooltip
每个组件需要测试：默认状态、悬停状态、禁用状态、错误状态

npm install -g @modelcontextprotocol/server-playwright

npx @modelcontextprotocol/server-playwright

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-playwright"
      ]
    }
  }
}

请帮我打开 https://example.com 并截图

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-playwright"
      ],
      "env": {
        "PLAYWRIGHT_BROWSER": "chromium",  // 或 "firefox", "webkit"
        "PLAYWRIGHT_HEADLESS": "false",    // 显示浏览器窗口
        "PLAYWRIGHT_SLOW_MO": "100"        // 每个操作延迟100ms，方便观察
      }
    }
  }
}

请帮我测试注册表单的所有验证规则：
- 邮箱格式验证
- 密码强度验证（至少8位，包含大小写字母和数字）
- 两次密码必须一致
- 手机号格式验证
- 验证码必填

URL: https://example.com/register

请测试网站的多语言切换功能：
1. 默认是中文
2. 切换到英文，验证关键文案已翻译
3. 切换到日文，验证关键文案已翻译
4. 刷新页面，验证语言设置保持

URL: https://example.com
关键文案：导航栏、首页标题、按钮文字

请帮我测试页面加载性能：
1. 记录首屏加载时间
2. 记录最大内容绘制（LCP）
3. 记录首次输入延迟（FID）
4. 记录累积布局偏移（CLS）

URL: https://example.com

请检查页面的无障碍性：
1. 所有图片是否有alt属性
2. 表单是否有label
3. 按钮是否有可访问的名称
4. 颜色对比度是否符合WCAG标准
5. 键盘导航是否正常

URL: https://example.com

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-puppeteer"
      ]
    }
  }
}

请使用Puppeteer帮我完成以下操作：
1. 打开 https://admin.example.com/login
2. 登录（账号：admin，密码：admin123）
3. 导航到用户管理页面
4. 截图保存当前用户列表
5. 导出用户数据为JSON格式

{
  "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": [
        "-y",
        "@browserbasehq/mcp-server-browserbase"
      ],
      "env": {
        "BROWSERBASE_API_KEY": "your-api-key",
        "BROWSERBASE_PROJECT_ID": "your-project-id"
      }
    }
  }
}

await page.click('#submit-btn');

await stagehand.act('点击提交按钮');

import Stagehand from '@browserbasehq/stagehand';

const stagehand = new Stagehand({
  env: 'LOCAL',  // 或 'BROWSERBASE'
  modelName: 'claude-sonnet-4-20250514',
});

await stagehand.init();
await stagehand.page.goto('https://shop.example.com');

// 用自然语言操作
await stagehand.act('在搜索框中输入iPhone 15并搜索');
await stagehand.act('点击第一个搜索结果');
await stagehand.act('选择颜色为蓝色');
await stagehand.act('点击加入购物车');

// 提取结构化数据
const productInfo = await stagehand.extract({
  instruction: '提取当前商品的名称、价格和库存信息',
  schema: {
    name: 'string',
    price: 'number',
    stock: 'number',
  },
});

console.log(productInfo);
// { name: 'iPhone 15 蓝色', price: 5999, stock: 128 }

{
  "mcpServers": {
    "selenium": {
      "command": "npx",
      "args": [
        "-y",
        "selenium-mcp-server"
      ]
    }
  }
}

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-playwright"]
    },
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    },
    "browserbase": {
      "command": "npx",
      "args": ["-y", "@browserbasehq/mcp-server-browserbase"],
      "env": {
        "BROWSERBASE_API_KEY": "your-api-key",
        "BROWSERBASE_PROJECT_ID": "your-project-id"
      }
    }
  }
}

{
  "mcpServers": {
    "firecrawl": {
      "command": "npx",
      "args": [
        "-y",
        "firecrawl-mcp"
      ],
      "env": {
        "FIRECRAWL_API_KEY": "your-api-key"
      }
    }
  }
}

请帮我抓取以下三个竞品网站的定价页面，提取所有套餐的名称、价格和功能列表：
1. https://competitor-a.com/pricing
2. https://competitor-b.com/pricing
3. https://competitor-c.com/pricing

请整理成对比表格。

请抓取 https://old-docs.example.com 的所有文档页面，
转换成Markdown格式，保持原有的目录结构。

请抓取 https://dribbble.com/search/dashboard 的前20个设计作品，
提取每个作品的标题、作者、标签和图片链接。

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "your-token"
      }
    }
  }
}

请帮我审查 PR #42 的代码变更：
1. 获取PR的所有文件变更
2. 检查是否有明显的bug或安全问题
3. 检查代码风格是否一致
4. 给出改进建议
5. 在PR上添加审查评论

我们的E2E测试发现了以下问题：
1. 登录页面在Safari上布局错乱
2. 购物车数量更新后价格没有刷新
3. 移动端导航菜单无法关闭

请为每个问题创建一个GitHub Issue，添加"bug"标签，分配给前端团队。

请帮我在GitHub上创建一个新的前端项目仓库：
- 名称：my-dashboard
- 描述：管理后台前端项目
- 使用React + TypeScript模板
- 添加.gitignore（Node.js）
- 添加MIT License
- 创建develop分支
- 创建初始的Issue模板

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": [
        "-y",
        "@upstash/context7-mcp"
      ]
    }
  }
}

请查询Tailwind CSS v4的最新文档，告诉我v4相比v3有哪些破坏性变更。

请查询Next.js 15的App Router文档，告诉我如何实现并行路由（Parallel Routes）。
给我一个完整的代码示例。

node --version
# 确保版本 >= 18

npm --version

mkdir mcp-demo && cd mcp-demo
npm init -y

npm install -D @playwright/test
npx playwright install

code ~/Library/Application\ Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-playwright"
      ]
    }
  }
}

请打开百度首页，截图给我看。

# 假设我们已经有一个Todo应用
cd todo-app
npm run dev
# 应用运行在 http://localhost:3000

请帮我为运行在 http://localhost:3000 的Todo应用生成完整的E2E测试。

这个应用的功能包括：
1. 添加新的Todo项
2. 标记Todo为已完成
3. 删除Todo项
4. 筛选（全部/未完成/已完成）
5. 清除所有已完成项

请先操作一遍应用了解界面，然后生成Playwright测试代码。
要求：
- 使用 @playwright/test 框架
- 使用语义化选择器（getByRole, getByLabel, getByText）
- 每个功能一个测试用例
- 包含充分的断言
- 添加中文注释

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

test.describe('Todo应用E2E测试', () => {

  test.beforeEach(async ({ page }) => {
    // 每个测试前访问应用首页
    await page.goto('http://localhost:3000');
  });

  test('添加新的Todo项', async ({ page }) => {
    // 在输入框中输入Todo内容
    await page.getByPlaceholder('你需要做什么？').fill('学习MCP Tools');

    // 按回车键添加
    await page.getByPlaceholder('你需要做什么？').press('Enter');

    // 验证Todo项已添加到列表中
    await expect(page.getByText('学习MCP Tools')).toBeVisible();

    // 验证输入框已清空
    await expect(page.getByPlaceholder('你需要做什么？')).toHaveValue('');

    // 添加第二个Todo
    await page.getByPlaceholder('你需要做什么？').fill('写E2E测试');
    await page.getByPlaceholder('你需要做什么？').press('Enter');

    // 验证两个Todo都存在
    await expect(page.getByText('学习MCP Tools')).toBeVisible();
    await expect(page.getByText('写E2E测试')).toBeVisible();

    // 验证计数器显示正确
    await expect(page.getByText('2项待办')).toBeVisible();
  });

  test('标记Todo为已完成', async ({ page }) => {
    // 先添加一个Todo
    await page.getByPlaceholder('你需要做什么？').fill('待完成的任务');
    await page.getByPlaceholder('你需要做什么？').press('Enter');

    // 点击复选框标记为完成
    await page.getByRole('checkbox', { name: '待完成的任务' }).check();

    // 验证Todo显示为已完成状态（有删除线样式）
    const todoItem = page.getByText('待完成的任务');
    await expect(todoItem).toHaveCSS('text-decoration-line', 'line-through');

    // 验证计数器更新
    await expect(page.getByText('0项待办')).toBeVisible();
  });

  test('删除Todo项', async ({ page }) => {
    // 添加一个Todo
    await page.getByPlaceholder('你需要做什么？').fill('要删除的任务');
    await page.getByPlaceholder('你需要做什么？').press('Enter');

    // 悬停在Todo项上显示删除按钮
    await page.getByText('要删除的任务').hover();

    // 点击删除按钮
    await page.getByRole('button', { name: '删除' }).click();

    // 验证Todo已被删除
    await expect(page.getByText('要删除的任务')).not.toBeVisible();
  });

  test('筛选功能', async ({ page }) => {
    // 添加两个Todo
    await page.getByPlaceholder('你需要做什么？').fill('任务A');
    await page.getByPlaceholder('你需要做什么？').press('Enter');

    await page.getByPlaceholder('你需要做什么？').fill('任务B');
    await page.getByPlaceholder('你需要做什么？').press('Enter');

    // 完成任务A
    await page.getByRole('checkbox', { name: '任务A' }).check();

    // 筛选"未完成"
    await page.getByRole('link', { name: '未完成' }).click();
    await expect(page.getByText('任务A')).not.toBeVisible();
    await expect(page.getByText('任务B')).toBeVisible();

    // 筛选"已完成"
    await page.getByRole('link', { name: '已完成' }).click();
    await expect(page.getByText('任务A')).toBeVisible();
    await expect(page.getByText('任务B')).not.toBeVisible();

    // 筛选"全部"
    await page.getByRole('link', { name: '全部' }).click();
    await expect(page.getByText('任务A')).toBeVisible();
    await expect(page.getByText('任务B')).toBeVisible();
  });

  test('清除所有已完成项', async ({ page }) => {
    // 添加三个Todo
    const todos = ['任务1', '任务2', '任务3'];
    for (const todo of todos) {
      await page.getByPlaceholder('你需要做什么？').fill(todo);
      await page.getByPlaceholder('你需要做什么？').press('Enter');
    }

    // 完成任务1和任务3
    await page.getByRole('checkbox', { name: '任务1' }).check();
    await page.getByRole('checkbox', { name: '任务3' }).check();

    // 点击"清除已完成"按钮
    await page.getByRole('button', { name: '清除已完成' }).click();

    // 验证已完成的任务被删除
    await expect(page.getByText('任务1')).not.toBeVisible();
    await expect(page.getByText('任务3')).not.toBeVisible();

    // 验证未完成的任务仍然存在
    await expect(page.getByText('任务2')).toBeVisible();

    // 验证计数器正确
    await expect(page.getByText('1项待办')).toBeVisible();
  });

});

npx playwright test --headed

npx playwright test --reporter=html
npx playwright show-report

npx playwright test --update-snapshots

/* 修改前 */
.add-button {
  background-color: #3b82f6; /* 蓝色 */
}

/* 修改后 */
.add-button {
  background-color: #22c55e; /* 绿色 */
}

npx playwright test

npx playwright test --update-snapshots

请帮我为Todo应用创建完整的视觉回归测试：
1. 空状态页面截图
2. 添加3个Todo后的列表截图
3. 标记1个为完成后的截图
4. 移动端视图（375px宽度）截图
5. 暗色模式截图（如果支持的话）

每个截图都要做视觉对比。

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

test.describe('Todo应用视觉回归测试', () => {

  test('空状态页面', async ({ page }) => {
    await page.goto('http://localhost:3000');
    await expect(page).toHaveScreenshot('empty-state.png');
  });

  test('包含Todo项的列表', async ({ page }) => {
    await page.goto('http://localhost:3000');

    // 添加3个Todo
    const todos = ['学习TypeScript', '写单元测试', '部署到生产环境'];
    for (const todo of todos) {
      await page.getByPlaceholder('你需要做什么？').fill(todo);
      await page.getByPlaceholder('你需要做什么？').press('Enter');
    }

    await expect(page).toHaveScreenshot('todo-list.png');
  });

  test('包含已完成项的列表', async ({ page }) => {
    await page.goto('http://localhost:3000');

    // 添加并完成一个Todo
    await page.getByPlaceholder('你需要做什么？').fill('已完成的任务');
    await page.getByPlaceholder('你需要做什么？').press('Enter');
    await page.getByRole('checkbox', { name: '已完成的任务' }).check();

    await page.getByPlaceholder('你需要做什么？').fill('未完成的任务');
    await page.getByPlaceholder('你需要做什么？').press('Enter');

    await expect(page).toHaveScreenshot('mixed-state.png');
  });

  test('移动端视图', async ({ page }) => {
    await page.setViewportSize({ width: 375, height: 667 });
    await page.goto('http://localhost:3000');

    await page.getByPlaceholder('你需要做什么？').fill('移动端测试');
    await page.getByPlaceholder('你需要做什么？').press('Enter');

    await expect(page).toHaveScreenshot('mobile-view.png');
  });

  test('暗色模式', async ({ page }) => {
    // 模拟暗色模式
    await page.emulateMedia({ colorScheme: 'dark' });
    await page.goto('http://localhost:3000');

    await page.getByPlaceholder('你需要做什么？').fill('暗色模式测试');
    await page.getByPlaceholder('你需要做什么？').press('Enter');

    await expect(page).toHaveScreenshot('dark-mode.png');
  });

});

import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
import { z } from 'zod';

// 创建MCP Server
const server = new McpServer({
  name: 'my-internal-tool',
  version: '1.0.0',
});

// 注册工具
server.tool(
  'deploy_to_staging',
  '部署应用到预发布环境',
  {
    branch: z.string().describe('要部署的分支名'),
    env: z.enum(['staging', 'preview']).describe('目标环境'),
  },
  async ({ branch, env }) => {
    // 调用内部部署API
    const result = await fetch('https://internal-api.example.com/deploy', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ branch, env }),
    });

    const data = await result.json();

    return {
      content: [
        {
          type: 'text',
          text: `部署成功！\n环境：${env}\n分支：${branch}\n访问地址：${data.url}`,
        },
      ],
    };
  }
);

// 启动服务器
const transport = new StdioServerTransport();
await server.connect(transport);