playwright-mcp

逐步指南，使用MCP Playwright服务器与MCP客户端windsurf/VS Code，支持UI和API测试

UI: nextjs.org

API: https://fakerestapi.azurewebsites.net/

预备条件

• Node v18或更新版本
• MCP Playwright服务器
• MCP客户端（Claude Desktop, Windsurf, VS Code）

安装设置

• 创建一个名为playwright-mcp的空项目/文件夹

• 使用任意编辑器（windsurf/VS Code）打开，并通过运行以下命令初始化Playwright项目

  • 安装依赖项
    • npm init playwright@latest

• 配置MCP Playwright服务器

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

• 运行以下提示，使用Claude Sonnet 4 LLM代理生成Next.js.org页脚链接的UI测试

使用可用工具导航到nextjs.org网站

分析内容并为nextjs网站的页脚链接创建一套测试

将测试放置在@testsfolder中

注意：生成的测试套件会根据所选LLM的不同而变化，相同的提示可能会产生不同的输出

接下来，需要在提示完成生成测试后运行测试

运行所有页脚测试

npx playwright test tests/nextjs-footer.spec.ts
npx playwright test tests/footer-links-validation.spec.ts
npx playwright test tests/footer-comprehensive.spec.ts

运行特定测试类别

# 仅运行结构验证测试
npx playwright test tests/nextjs-footer.spec.ts --grep "should display all expected footer sections"

# 仅运行链接验证测试
npx playwright test tests/footer-links-validation.spec.ts --grep "should validate"

# 运行综合测试
npx playwright test tests/footer-comprehensive.spec.ts

生成测试报告

npx playwright test --reporter=html

对https://fakerestapi.azurewebsites.net/的API测试

• 运行以下提示以生成该模式的API测试：https://fakerestapi.azurewebsites.net/swagger/v1/swagger.json

注意：生成的测试套件会根据所选LLM的不同而变化，相同的提示可能会产生不同的输出

运行生成的API测试

npx playwright test tests/api/fakerest.spec.ts