Resources 实施手册

# E2E 测试模式实施手册 此文件包含技能引用的详细模式、清单和代码示例。 ## 核心概念 ### 1. E2E 测试基础 **E2E 测试内容：** - 关键用户旅程（登录、结账、注册） - 复杂交互（拖放、多步表单） - 跨浏览器兼容性 - 真实 API 集成 - 身份验证流程 **E2E 不测试内容：** - 单元级逻辑（使用单元测试） - API 契约（使用集成测试） - 边缘情况（太慢） - 内部实现细节 ### 2. 测试哲学 **测试金字塔：** / /E2E ← 少量，专注于关键路径 /───── /Integr ← 较多，测试组件交互 /──────── /Unit Tests ← 大量，快速，隔离 /──────────── **最佳实践：** - 测试用户行为，而非实现细节 - 保持测试独立性 - 确保测试确定性 - 优化速度 - 使用 data-testid，而非 CSS 选择器 ## Playwright 模式 ### 设置与配置 typescript // playwright.config.ts import { defineConfig, devices } from '@playwright/test'; export default defineConfig({ testDir: './e2e', timeout: 30000, expect: { timeout: 5000, }, fullyParallel: true, forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, workers: process.env.CI ? 1 : undefined, reporter: [ ['html'], ['junit', { outputFile: 'results.xml' }], ], use: { baseURL: 'http://localhost:3000', trace: 'on-first-retry', screenshot: 'only-on-failure', video: 'retain-on-failure', }, projects: [ { name: 'chromium', use: { ...devices['Desktop Chrome'] } }, { name: 'firefox', use: { ...devices['Desktop Firefox'] } }, { name: 'webkit', use: { ...devices['Desktop Safari'] } }, { name: 'mobile', use: { ...devices['iPhone 13'] } }, ], }); ### 模式 1：页面对象模型 (Page Object Model) typescript // pages/LoginPage.ts import { Page, Locator } from '@playwright/test'; export class LoginPage { readonly page: Page; readonly emailInput: Locator; readonly passwordInput: Locator; readonly loginButton: Locator; readonly errorMessage: Locator; constructor(page: Page) { this.page = page; this.emailInput = page.getByLabel('Email'); this.passwordInput = page.getByLabel('Password'); this.loginButton = page.getByRole('