Playwright MCP Project

用户注册和登录E2E测试

一个全面的端到端测试自动化项目，由 剧作家 并遵循 页面对象模型（POM） 图案。此项目测试用户注册、登录和对受保护资源的访问。

📋 目录

• 概述
• 先决条件
• 安装
• 项目结构
• 页面对象模型（POM）
• 运行测试
• 测试用例
• 配置

🎯 概述

该项目为具有用户身份验证的web应用程序提供自动化的端到端测试。它验证了：

• 用户注册：通过表单验证完成用户注册流程
• 用户登录：使用有效凭据成功进行身份验证
• 保护资源：登录后访问经过身份验证的区域

该项目遵循最佳实践，使用 页面对象模型模式 维护干净、可维护和可扩展的测试代码。

📦 先决条件

• Node.js v16+（建议使用LTS）
• npm v7+
• 正在运行的web应用程序位于 http://localhost:3000 （或在中配置 playwright.config.ts)

🚀 安装

1. 克隆存储库：

   git clone 
   cd pw-mcp-project

1. 安装依赖项：

   npm install

1. 安装Playwright浏览器：

   npx playwright install

📁 项目结构

pw-mcp-project/
├── pages/                              # Page Object Models
│   ├── BasePage.ts                     # Base class with common functionality
│   ├── RegisterPage.ts                 # Registration page object
│   ├── LoginPage.ts                    # Login page object
│   ├── ProtectedPage.ts                # Protected resources page object
│   └── index.ts                        # Centralized exports
├── tests/
│   └── 01-registration-and-login.spec.ts  # E2E test suite
├── playwright.config.ts                # Playwright configuration
├── package.json                        # Project dependencies
├── playwright-report/                  # HTML test reports
├── test-results/                       # Test execution results
└── README.md                           # This file

🏗️ 页面对象模型（POM）

POM是什么？

页面对象模型是一种将网页表示为类的设计模式。每个页面的UI组件和交互都封装在专用对象中，进行测试：

• 可维护的：选择器集中在一个地方
• 可重复使用的：通用方法可以在测试之间共享
• 可读的：测试侧重于业务逻辑，而不是实现细节
• 可扩展的：易于添加新页面和测试用例

页面对象

基础页面 (pages/BasePage.ts)

提供通用功能的基类：

• goto(path) -导航到页面路径
• waitForPageLoad() -等待页面完全加载
• getCurrentUrl() -获取当前页面URL

注册页面 (pages/RegisterPage.ts)

封装注册页面交互：

class RegisterPage {
  navigate(); // Go to registration page
  waitForPageReady(); // Wait for page to load
  fillFirstName(name); // Fill first name field
  fillLastName(name); // Fill last name field
  fillEmail(email); // Fill email field
  fillBirthDate(date); // Fill birth date
  closeDatePicker(); // Close date picker
  fillPassword(password); // Fill password
  submitRegistration(); // Submit form
  registerUser(userData); // Complete registration flow
  verifyRegistrationSuccess(); // Verify successful registration
}

登录 (pages/LoginPage.ts)

封装登录页面交互：

class LoginPage {
  navigate(); // Go to login page
  waitForPageReady(); // Wait for page to load
  fillEmail(email); // Fill email field
  fillPassword(password); // Fill password
  clickLoginButton(); // Click login button
  login(email, password); // Complete login flow
  verifyLoginSuccess(); // Verify successful login
  verifyNoAuthMessages(); // Check for auth errors
}

受保护页面 (pages/ProtectedPage.ts)

封装受保护的资源交互：

class ProtectedPage {
  navigateToProtectedPage(path); // Navigate to protected page
  verifyAccess(); // Verify access granted
  verifyContentIsVisible(); // Verify page content
  verifyFullAccess(); // Complete access verification
}

▶️ 运行测试

运行所有测试

npx playwright test

在UI模式下运行测试（交互式）

npx playwright test --ui

运行特定的测试文件

npx playwright test tests/01-registration-and-login.spec.ts

运行特定测试

npx playwright test -g "Register new user"

在调试模式下运行测试

npx playwright test --debug

查看测试报告

npx playwright show-report

📝 测试用例

测试1：使用有效凭据注册新用户

文件: tests/01-registration-and-login.spec.ts

测试完整的用户注册流程：

1. 导航到注册页面
2. 填写所有必填的注册字段
3. 提交报名表
4. 通过重定向验证注册成功

测试数据:

{
  firstName: 'John',
  lastName: 'Tester',
  email: 'test-user-{timestamp}@example.com',
  birthDate: '1990-01-15',
  password: 'TestPassword123!'
}

测试2：使用注册用户凭据登录

测试用户登录成功：

1. 导航到登录页面
2. 输入注册凭据
3. 提交登录表单
4. 验证登录和重定向是否成功
5. 验证没有身份验证错误消息

测试3：登录后访问受保护的资源

测试对已验证区域的访问：

1. 使用注册凭据登录
2. 等待登录完成
3. 导航到受保护的资源（BookShop帐户页面）
4. 验证对受保护内容的访问权限
5. 验证页面内容是否可见

⚙️ 配置

剧作家配置(playwright.config.ts)

关键配置设置：

{
  testDir: './tests',              // Test files location
  fullyParallel: true,            // Run tests in parallel
  forbidOnly: !!process.env.CI,   // Fail on .only in CI
  retries: process.env.CI ? 2 : 0, // Retry failed tests on CI
  reporter: 'html',               // HTML report output
  use: {
    baseURL: 'http://localhost:3000', // Application URL
    trace: 'on'                   // Collect trace on failure
  },
  projects: [
    { name: 'chromium', ... }     // Chromium browser
    // { name: 'firefox', ... }   // Uncomment for Firefox
    // { name: 'webkit', ... }    // Uncomment for Safari
  ]
}

环境设置

确保您的应用程序正在运行：

# Terminal 1: Start your application
npm run dev  # or your start command

# Terminal 2: Run tests
npm test

💡 最佳实践

1. 使用页面对象：始终通过页面对象与页面交互，而不是直接与页面交互
2. 保持测试干燥：重用页面对象方法以避免重复
3. 有意义的测试名称：使用清晰、描述性的测试名称
4. 等待策略：使用Playwright的内置等待，而不是硬编码的延迟
5. 错误处理：包括用于非关键验证的try-catch块
6. 测试隔离：由于以下原因，测试可以以任何顺序独立运行 test.describe.serial()

📊 测试报告

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

npx playwright show-report

测试报告包括：

• 通过/失败状态
• 执行时间
• 故障截图
• 视频录像
• 网络跟踪

🐛 故障排除

测试失败，显示“连接被拒绝”

• 确保应用程序在以下位置运行 http://localhost:3000
• 更新 baseURL 在 playwright.config.ts 如有需要

未找到选择器

• 检查页面已完全加载可见性断言
• 如果应用程序标记更改，则更新选择器
• 仅在页面对象文件中更新选择器

测试超时

• 增加测试或配置中的超时时间
• 检查网络连接
• 验证应用程序是否响应

📚 资源

• 剧作家文档
• 页面对象模型指南
• 最佳实践
• 调试指南

📄 许可证

国际学生中心

👤 作者

使用Playwright和页面对象模型模式为自动E2E测试而创建。