qae2e-playwright

# Playwright E2E 测试方法论 ## 适用场景 - Web 项目需要编写端到端测试 - 门禁（Gate 1）要求 E2E 测试通过 - 需要覆盖关键用户流程的自动化验证 - 需要多浏览器/多视口兼容性验证 - 需要视觉回归测试 --- ## 1. 项目初始化 ### 1.1 安装 ```bash # 新项目初始化（推荐） npm init playwright@latest # 已有项目添加 npm install -D @playwright/test npx playwright install ``` ### 1.2 配置文件（`playwright.config.ts`） ```typescript import { defineConfig, devices } from '@playwright/test'; export default defineConfig({ testDir: './e2e', // 测试产物目录 outputDir: './e2e/test-results', // 全局超时 timeout: 30_000, expect: { timeout: 5_000 }, // 并行执行 fullyParallel: true, workers: process.env.CI ? 1 : undefined, // 失败重试（CI 中重试一次减少 flaky） retries: process.env.CI ? 1 : 0, // 报告 reporter: [ ['html', { outputFolder: './e2e/playwright-report' }], ['json', { outputFile: './e2e/test-results/results.json' }], // CI 中额外输出到 stdout ...(process.env.CI ? [['github'] as const] : []), ], // 全局配置 use: { baseURL: process.env.BASE_URL || 'http://localhost:3000', // 失败时自动截图 screenshot: 'only-on-failure', // 失败时录制 trace trace: 'on-first-retry', // 失败时录制视频 video: 'on-first-retry', }, // 多浏览器 + 移动端视口 projects: [ { name: 'chromium', use: { ...devices['Desktop Chrome'] } }, { name: 'firefox', use: { ...devices['Desktop Firefox'] } }, { name: 'webkit', use: { ...devices['Desktop Safari'] } }, { name: 'mobile-chrome', use: { ...devices['Pixel 5'] } }, { name: 'mobile-safari', use: { ...devices['iPhone 13'] } }, ], ...