端到端测试套件

一个基于Playwright构建的全面端到端测试套件,支持多种测试类型和领域,适用于Web应用的自动化测试。

  • by ShubhamTaralekar
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 ShubhamTaralekar/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
    
  2. 更新 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. 提交前运行完整套件

资源