Playwright Testing Framework

Playwright 测试框架

本项目使用 Playwright 对 Zeigo Network Dashboard 进行端到端（E2E）测试，包含 UI 和 API 测试。

我们使用的工具

Playwright 通过以下功能，为现代 Web 应用提供可靠的端到端测试：

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

文档

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

结构

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

先决条件

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

2. 环境设置：创建 .env 文件，并添加以下配置：

   # Base URLs
   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. 运行测试：

测试执行选项

使用 VS Code 测试资源管理器

• 打开 VS Code
• 点击活动栏中的测试图标（烧杯图标）
• 点击播放按钮运行所有测试
• 或点击各测试旁边的播放按钮，运行单项测试

使用命令行

基本测试命令

# Run all tests
npx playwright test

# Run tests in headed mode
npx playwright test --headed

# Run tests in specific browser
npx playwright test --project=chromium

# Debug mode
npx playwright test --debug

# Generate tests with Codegen
npx playwright codegen

针对特定环境运行测试

Windows PowerShell

# Test environment
$env:CI="true"; $env:target_env="test"; npx playwright test --reporter=list

# PreProd environment
$env:CI="true"; $env:target_env="preprod"; npx playwright test --reporter=list

macOS/Linux

# Test environment
CI=1 target_env="test" npx playwright test --reporter=list

# PreProd environment
CI=1 target_env="preprod" npx playwright test --reporter=list

运行特定测试

# Run by test name
npx playwright test -g "name of my test" --project=chromium

# Run specific test file
npx playwright test tests/specific-test.spec.js

# Run tests with specific tag
npx playwright test --grep @tag_name

针对特定浏览器运行测试

# Chrome
npm run regression:chromium

# Safari
npm run regression:safari

# All browsers in headless mode
npm run regression

# All browsers in headed mode
npm run regression:headed

测试调度器

如需分批运行测试并设置延迟：

.\run_tests_scheduler.bat

测试资源管理器功能

• 🔍 以树状视图浏览测试
• ▶️ 运行/调试单项测试或测试文件
• 🔄 重新运行失败的测试
• 📊 内联查看测试结果
• 🎯 跳转到测试定义
• 📋 按状态或标签筛选测试
• 🎯 使用断点调试测试

你可以将两个 MCP 服务（context7 和 playwright）用于不同用途，但它们无法在同一个终端会话中同时运行。使用方法如下：

---

如何使用各个 MCP 服务

1. Context7 MCP 服务：

   • 用途：提供最新的特定版本文档和代码示例。
   • 用法：
     • 启动服务：

       npx -y @upstash/context7-mcp@latest
       

     • 在提示词中添加 use context7，即可获取准确且结合上下文的回答。

2. Playwright MCP 服务：

   • 用途：增强 Playwright 的 UI 测试能力。
   • 用法：
     • 启动服务：

       npx playwright-mcp
       

     • 使用它与 Playwright 交互，处理高级测试场景。

---

它们能同时运行吗？

• 同一个终端：不能。每个服务都会接管终端的输入/输出，因此一个终端会话中只能运行一个 MCP 服务。
• 不同终端：可以。你可以在不同的终端会话中同时运行两个服务。

---

如何同时运行两个服务

1. 打开两个终端窗口。
2. 在第一个终端中，启动 Context7 MCP 服务：

   npx -y @upstash/context7-mcp@latest
   

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

   npx playwright-mcp
   

---

如何一起使用

• Context7：

  • 用它获取库和工具的文档或代码示例。
  • 示例：在提示词中添加 use context7，以获取准确的回答。

• Playwright：

  • 用它执行高级 UI 测试，或与 Playwright 的 MCP 功能交互。
  • 示例：在 MCP 服务运行时执行 Playwright 测试。