playwright-e2e-builder

# Playwright E2E 测试套件构建器 ## 何时使用 当您需要执行以下操作时使用此技能： - 在现有项目中从零开始设置 Playwright - 为关键用户工作流（注册、结账、仪表板）构建 E2E 测试 - 实现页面对象模型 (POM) 以获得可维护的测试架构 - 配置跨测试的认证状态持久化 - 使用截图设置视觉回归测试 - 通过分片 (sharding) 和重试机制将 Playwright 集成到 CI/CD 中 ## 第一阶段：探索（规划模式） 进入规划模式。在编写任何测试之前，先探索现有项目： ### 项目结构 - 确定技术栈：是 React、Next.js、Vue、SvelteKit 还是其他框架？ - 检查 Playwright 是否已安装 (`playwright.config.ts`, package.json 中的 `@playwright/test`) - 查找现有的测试目录 (`e2e/`, `tests/`, `__tests__/`) - 查找 Cypress、Selenium 或其他框架中的现有 E2E 测试（迁移上下文） - 查找开发服务器命令和端口 (`npm run dev`, `next dev` 等) ### 应用结构 - 识别主要路由/页面（查看路由配置、pages 目录或路由文件） - 查找认证工作流（登录页面 URL、认证 API 端点、令牌存储） - 检查组件中的测试 ID (`data-testid`, `data-test`, `data-cy` 属性) - 查找测试可能需要通过其播种数据的 API 路由 - 检查 `.env` 文件以获取测试特定的环境变量 ### CI/CD - 检查现有的 CI 配置 (`.github/workflows/`, `.gitlab-ci.yml`, `Jenkinsfile`) - 查找 Docker 或 docker-compose 设置（有助于保持测试环境一致） - 检查是否存在暂存/预览环境的 URL 模式 ## 第二阶段：访谈 (AskUserQuestion) 使用 AskUserQuestion 来澄清需求。分轮次提问。 ### 第一轮：范围与关键工作流 问题: "需要测试哪些关键用户工作流？" 标题: "工作流" multiSelect: true 选项: - "认证（注册、登录、登出、密码重置）" — 核心认证工作流 - "核心 CRUD（创建、读取、更新、删除主要资源）" — 主要数据操作 - "结账/支付（购物车、账单、确认）" — 电子商务或支付工作流 - "仪表板/管理（数据视图、筛选器、导出）" — 管理面板交互 问题: "应用程序大约有多少个页面/路由？" 标题: "应用规模" 选项: - "小型 (< 10 个路由)" — 落地页、认证、少量功能页面 - "中型 (10-30 个路由)" — 多个功能区域、设置、个人资料 - "大型 (30+