AI导哈

Playwright-MCP测试工具

一个结合MCP Playwright服务器与客户端的测试工具，支持UI和API测试，适用于自动化测试场景。

  • by cvenkatreddy
  • TypeScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 cvenkatreddy/playwright-mcp

使用说明

剧作家mcp

使用MCP Playwright服务器和MCP客户端（Windsurf/VS代码）的分步指南，支持UI和API测试

UI： nextjs.org

API https://fakerestapi.azurewebsites.net/

先决条件

  • 节点v18或更新版本
  • 剧作家mcp(https://github.com/microsoft/playwright-mcp)
  • MCP客户端（克劳德桌面、Windsurf、VS Code）

设置/安装

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

  • 使用任何编辑器（风帆/VS代码）打开，并使用剧作家初始化项目（只需在终端上运行以下命令并接受所有内容）

    • 安装依赖项
      • npm初始化playwright@latest

  • 配置MCP Playwright服务器

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}
  • 使用Claude Sonnet 4 LLM代理运行以下提示，为Next.js.org页脚链接生成UI测试
Use the available tools and navigate to nextjs.org website

analyse the content and create me a suite of tests which will test the footer links of nextjs website

place the tests in @testsfolder

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

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

运行所有脚部测试

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

运行特定测试类别

# Run only structure validation tests
npx playwright test tests/nextjs-footer.spec.ts --grep "should display all expected footer sections"

# Run only link validation tests
npx playwright test tests/footer-links-validation.spec.ts --grep "should validate"

# Run comprehensive tests
npx playwright test tests/footer-comprehensive.spec.ts

生成测试报告

npx playwright test --reporter=html

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

generate API tests in a folder api under tests with support of playwright-mcp server using schema accessed from https://fakerestapi.azurewebsites.net/swagger/v1/swagger.json, baseUrl: https://fakerestapi.azurewebsites.net/api/v1

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

运行生成的API测试

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

相关 MCP