Web自动化测试框架

剧作家演示项目

这个项目展示了使用自动化进行端到端测试的方法 剧作家，一个用于Web应用的现代测试框架。

🚀 快速入门

# Install dependencies
npm install

# Install browsers
npm run install-browsers

# Run tests with UI (interactive mode)
npm run test:ui

# Run all tests
npm test

# View test report
npm run report

📋 目录

• 概述
• 先决条件
• 安装
• 项目结构
• 可用的测试
• 运行测试
• 浏览器配置
• 测试报告
• 使用 Jenkins 实现 CI/CD（持续集成/持续交付）
• 做出贡献

🎯 概述

此存储库包含针对各种网络应用的自动化测试，包括：

• Booking.com（注：这是一个在线旅游服务平台的名称，直接翻译为“预订网”或保留原英文名均可，根据语境和习惯选择。） - 飞机票务预订功能
• SauceDemo（注：这是一个专有名词，通常指一个用于演示或测试的Sauce Labs平台实例，直接翻译为“萨斯演示”可能不够准确，但在此处为保持原文形式，故直接给出音译加意译的结合，实际使用时可能需要根据上下文调整） - 电子商务登录、结账及响应式测试

这些测试是用TypeScript编写的，并利用了Playwright的跨浏览器测试功能。

🛠 先决条件

对于本地开发：

• Node.js （版本18或更高）
• npm（Node Package Manager，节点包管理器） 或者 纱线

对于Jenkins CI/CD：

• Docker （在Jenkins服务器/代理上必需）
• Jenkins（注：这是一个专有名词，通常指一个持续集成工具，直接音译即可） 使用Docker Pipeline插件

可选（用于本地Docker测试）：

• Docker Desktop（桌面版） （如果你想在本地测试Jenkins环境）

📦 安装

本地开发环境设置

1. 克隆仓库：

git clone https://github.com/qascript20/playwright-mcp-demo.git
cd "Playwright Demo"

2. 安装 Node.js 依赖项：

npm install

3. 安装 Playwright 浏览器：

npm run install-browsers

4. （可选）为浏览器安装系统依赖项：

npm run install-deps

快速入门

安装完成后，请验证您的设置：

# Run a quick test to verify everything works
npm run test:login

# View the test report
npm run report

故障排除

如果您遇到问题：

1. 浏览器安装问题：

npm run install-deps

2. 权限问题（macOS/Linux）：

sudo npm run install-deps

3. 清理测试产物：

rm -rf test-results playwright-report

4. 一些测试在外部网站上失败：
   • `booking.spec.ts` 测试可能会因 booking.com 的更改而偶尔失败
   • 登录、结账和响应式测试应该能够稳定通过，因为它们是在测试 saucedemo.com
   • 这是在测试实时网站时的预期行为

📁 项目结构

Playwright Demo/
├── tests/                     # Main test directory
│   ├── booking.spec.ts        # Flight booking tests (Booking.com)
│   ├── checkout.spec.ts       # E-commerce checkout tests
│   ├── login.spec.ts          # Login functionality tests
│   ├── responsive-login.spec.ts # Responsive design tests
│   └── generate-tests.prompt.md # Test generation guidelines
├── e2e/                       # Additional E2E tests
│   └── example.spec.ts        # Example test file
├── tests-examples/            # Example tests from Playwright
│   └── demo-todo-app.spec.ts  # Todo app demo tests
├── playwright-report/         # HTML test reports (generated)
├── test-results/             # Test execution results and artifacts (generated)
├── playwright.config.js      # Playwright configuration
├── package.json              # Project dependencies and NPM scripts
└── README.md                 # This documentation file

关键文件：

• playwright.config.js - 浏览器、设备和测试设置的主要配置
• package.json - 依赖项和便捷的NPM脚本
• tests/*.spec.ts - 为不同功能编写单独的测试套件

🧪 可用测试

预订测试（booking.spec.ts）

• 航班预订测试从伦敦到巴黎的单程航班预订
• 涵盖机场选择、搜索功能和预订流程

登录测试（login.spec.ts）

• 用户身份验证测试
• 有效/无效凭证场景

结账测试（Checkout Tests）checkout.spec.ts)

• 电子商务购买流程
• 购物车管理与支付流程

响应性测试（responsive-login.spec.ts)

• 移动设备和桌面视口测试
• 响应式设计验证

🚀 运行测试

使用 NPM 脚本（推荐）

运行所有测试

npm test

使用可视化界面运行测试

npm run test:ui

在有界面模式下运行测试（可见浏览器）

npm run test:headed

调试测试

npm run test:debug

在特定浏览器中运行测试

npm run test:chromium    # Chrome/Chromium
npm run test:firefox     # Firefox
npm run test:webkit      # Safari/WebKit
npm run test:mobile      # Mobile Chrome (Pixel 5)

运行特定的测试套件

npm run test:booking     # Flight booking tests
npm run test:login       # Login functionality tests
npm run test:checkout    # Checkout process tests

查看测试报告

npm run report

直接使用 Playwright CLI

运行所有测试

npx playwright test

运行特定的测试文件

npx playwright test booking.spec.ts
npx playwright test login.spec.ts
npx playwright test checkout.spec.ts
npx playwright test responsive-login.spec.ts

使用特定选项运行测试

npx playwright test --headed           # Visible browser
npx playwright test --debug            # Debug mode
npx playwright test --project=firefox  # Specific browser
npx playwright test --grep="login"     # Tests matching pattern

🌐 浏览器配置

该项目配置为在多个浏览器和设备上运行测试：

• 桌面浏览器：

  • 铬（Chrome）
  • Firefox（火狐浏览器）
  • WebKit (Safari)

• 移动设备：

  • Pixel 5（移动版Chrome）
  • iPhone 12（移动版Safari浏览器）

当前配置详情：

• 基本URL： https://www.saucedemo.com
• 测试目录： ./tests
• 输出目录: test-results
• 并行执行已启用以加快测试运行速度
• 重试在CI上重试2次，本地0次
• 追踪首次重试时启用以进行调试
• 工人1个在CI（可能是指某种容量或限制），本地无限制

配置可以自定义为 playwright.config.js。

📊 测试报告

运行测试后，查看HTML报告：

npx playwright show-report

报告内容包括：

• 测试执行结果
• 故障的截图和视频
• 用于调试的跟踪文件
• 性能指标

🚀 使用Jenkins实现持续集成/持续交付（CI/CD）

这个项目包含一个全面的Jenkinsfile，它使用官方的Playwright Docker镜像，以确保在CI（持续集成）环境中执行测试的一致性和可靠性。

Jenkins 设置

该管道使用官方的 Playwright Docker 镜像： mcr.microsoft.com/playwright:v1.55.1-focal

主要特点：

• 基于Docker的执行 为了保持环境的一致性
• 参数化构建 带有浏览器和测试套件的选择
• 并行执行 能力
• 全面报道 以HTML和JUnit格式
• 工件归档 用于调试失败的测试

管道参数：

• BROWSER选择浏览器（全部、Chromium、Firefox、WebKit、移动版Chrome）
• TEST_SUITE选择测试套件（全部、预订、登录、结账、响应式）
• HEADED_MODE以带头模式运行（在 Docker 中禁用）
• GREP_PATTERN运行匹配特定模式的测试

所需的 Jenkins 插件：

• Docker Pipeline 插件
• HTML 发布器插件
• JUnit 插件
• 管道插件

Jenkins 配置：

1. 确保Jenkins代理上已安装Docker
2. 创建一个新的流水线作业
3. 指向包含 Jenkinsfile 的仓库
4. 根据需要配置构建参数

该管道自动：

• 设置Playwright环境
• 安装依赖项
• 根据参数运行测试
• 生成HTML和JUnit报告
• 存档测试工件和痕迹

🔧 配置选项

关键配置选项 playwright.config.js:

• 并行执行并行运行测试以加快执行速度
• 重试对于不稳定的测试，在CI上自动重试（重试2次）
• 追踪首次重试时启用以进行调试
• 基本URLSauceDemo 测试的默认基础 URL
• 记者用于详细测试结果的HTML报告生成器

💻 开发指南

本地开发工作流程

1. 以UI模式开始开发 （建议用于测试开发）：

npm run test:ui

2. 调试失败的测试：

npm run test:debug

3. 以带界面模式运行测试 查看浏览器操作：

npm run test:headed

4. 检查测试结果：

npm run report

可用的 NPM 脚本

🤝 贡献（或“参与贡献”）

1. 为仓库创建分支（或：克隆仓库）
2. 创建一个特性分支： git checkout -b feature-name
3. 按照现有模式编写测试
4. 测试您的更改： npm test
5. 确保所有测试在本地通过
6. 提交拉取请求

测试编写指南

• 使用描述性测试名称来说明预期行为
• 遵循“准备-行动-断言”模式
• 为动态内容添加适当的等待时间 expect() 断言
• 使用 page.getByRole()， page.getByText()，或者 page.getByTestId() 用于可靠的筛选器
• 为不稳定元素包含错误处理和重试逻辑
• 尽可能在多个浏览器上进行测试

📝 笔记

• 在CI（持续集成）环境中，测试配置为自动重试
• 在首次重试时生成跟踪文件，以调试失败的测试
• 该项目支持桌面和移动测试场景
• 所有测试均使用TypeScript，以提高类型安全性和集成开发环境（IDE）支持

🔗 有用链接

• Playwright 文档
• Playwright API 参考文档
• 最佳实践

如需提问或报告问题，请在仓库中提交一个问题。