Playwright Code By Shubham

剧作家E2E测试

使用Playwright构建的全面的端到端测试套件，按测试类型和领域组织。

项目结构

PLAYWRIGHT-E2E-TESTS/
├── .github/                    # CI/CD configuration
├── .vscode/                    # VS Code settings (MCP config)
├── config/                     # Environment-specific configurations
├── data/                       # Static test data and constants
├── debug/                      # Debug outputs and logs
├── logs/                       # Test and application logs
├── resources/                  # Test resources (images, files, etc.)
├── tests/                      # Test specifications
│   ├── api/                    # API endpoint tests
│   ├── demo/                   # Demo scenarios
│   ├── devices/                # Device/responsive tests
│   ├── e2e/                    # End-to-end workflows
│   ├── functional/             # Feature-specific tests
│   ├── helpers/                # Test utility functions
│   └── page-objects/           # Page Object Model files
├── playwright-report/          # Test execution HTML reports
├── .env                        # Local environment variables (not committed)
├── .env.example                # Environment template
├── package.json                # Project dependencies
├── playwright.config.ts        # Playwright test configuration
└── README.md                   # This file

设置

先决条件

• Node.js v18+（已验证：v22.14.0）
• npm v8+（已验证：11.6.0）

安装

# Clone or navigate to the project
cd PLAYWRIGHT-E2E-TESTS

# Install dependencies
npm install

# Install Playwright browsers
npx playwright install --with-deps

配置

1. 复制 .env.example 到 .env 并填写您的值：

   cp .env.example .env

1. 更新 playwright.config.ts 如果需要（baseURL、workers、重试等）

运行测试

所有测试

npx playwright test

UI测试（标题）

npx playwright test --headed

特定测试文件

npx playwright test tests/e2e/login.spec.ts

调试模式

npx playwright test --debug

生成测试报告

npx playwright show-report

测试组织

• API测试 (tests/api/)–REST API端点验证
• E2E测试 (tests/e2e/)–完整的用户工作流程
• 功能测试 (tests/functional/)–功能级场景
• 设备测试 (tests/devices/)–跨设备/响应测试
• 演示测试 (tests/demo/)–示例/演示测试

页面对象

页面对象模型文件位于 tests/page-objects/ 为了可维护性和可重用性。

辅助工具和实用程序

常见的测试实用程序和帮助程序位于 tests/helpers/.

CI/CD

CI工作流在中配置 .github/workflows/.测试运行于：

• 铬 （主浏览器）
• 多操作系统 （Windows、macOS、Linux-请参阅GitHub操作工作流）

故障排除

• 测试失败，显示“未找到浏览器”：运行 npx playwright install --with-deps
• 超时问题：调整 timeout 在 playwright.config.ts
• 网络错误：验证 BASE_URL 在 .env 匹配您的测试环境

贡献

添加新测试时：

1. 遵循现有文件夹结构
2. 使用页面对象模型模式
3. 添加描述性测试名称
4. 更新 .env.example 如果需要新的变量
5. 提交前运行完整套件

资源

• 剧作家官方文档
• 最佳实践
• 调试指南