Playwright 测试框架项目

此项目包含使用 Playwright 进行端到端（E2E）测试的 Zeigo 网络仪表盘的 UI 和 API 测试。

我们正在使用的工具

Playwright 为现代 Web 应用提供了可靠的端到端测试功能，其特点包括：

• 支持多浏览器测试
• 支持跨平台测试
• 支持多种语言（TypeScript、JavaScript、Python、.NET、Java）
• 移动网页测试支持
• 并行测试执行
• 内置调试工具

文档资源

• Playwright 官方文档
• 运行测试指南

项目结构

• .vscode/：工作区特定设置。
• ui-tests/specs/：UI 测试规范文件。
• api-tests/specs/：API 测试规范文件。
• pages/：页面对象模型（POM）文件。
• utils/：工具函数或帮助程序。
• .env：环境变量文件。
• .gitignore：版本控制要排除的文件。

先决条件

1. Node.js：安装 Node.js v20 或更高版本

2. 环境设置：创建一个 .env 文件，包含以下配置：

   # 基础 URL
   API_BASE_URL=https://your-api-url
   UI_BASE_URL=https://your-ui-url
   

快速入门

1. 安装 Playwright 和依赖项：

   npm install
   npx playwright install
   npm install dotenv
   

2. 安装 VS Code Playwright 插件：

   code --install-extension ms-playwright.playwright
   

3. 运行测试

测试执行选项

• UI 测试：通过 npm run test:ui 执行 UI 测试。
• API 测试：通过 npm run test:api 执行 API 测试。
• 调试：使用 Playwright 调试工具进行调试。

使用 Playwright 的高级功能

创建自定义断言

// custom-assertions.ts
export async function customAssertion(page: Page, expectedText: string) {
  await page.waitForSelector('text=Hello World');
}

使用数据驱动测试

import { defineScenario } from 'playwright-cucumber';

defineScenario('数据驱动测试', ({ Given, When, Then }) => {
  Given('用户输入 {string} 和 {string}', async function (username, password) {
    // 测试步骤
  });
});

并行执行测试

npm run test --parallel=4

两个 MCP 服务器的使用说明

Playwright 的调试命令

playwright codegen https://example.com

关闭正在运行的 Playwright 服务

pkill -f "node playwright"

使用 Playwright 拦截 API 请求

page.setRequestInterception(true);
page.on('request', request => {
  if (request.url().includes('api')) {
    request.respond({
      status: 200,
      body: JSON.stringify({ message: '测试响应' })
    });
  }
});

Playwright 的网络记录功能

playwright dev --trace-dir traces

如何同时运行两个 MCP 服务器

1. 打开两个终端窗口。

2. 在第一个终端中，启动 Context7 MCP 服务器：

   npx -y @upstash/context7-mcp@latest
   

3. 在第二个终端中，启动 Playwright MCP 服务器：

   npx playwright-mcp
   

注意事项

• 同一终端：不能同时运行两个 MCP 服务器，因为每个服务器都会占用终端的输入/输出。
• 不同终端：可以分别在两个终端中运行这两个服务器。

这样翻译后的文档保持了原文的信息完整性和技术准确性，同时确保内容易于中文读者理解。