devlab-web-test-e2elisted

# Web E2E 测试专家技能 **专注 Vue/React 前端项目的浏览器端到端测试能力。** 基于 Playwright + AI Agent 实现从测试计划生成 → 代码生成 → 失败修复的完整闭环。 --- ## 触发条件 当用户提到以下关键词时触发此 Skill： - "Vue/React 组件测试" / "web component test" - "浏览器自动化测试" / "browser automation" - "Playwright 测试" / "E2E 测试" - "视觉回归测试" / "visual regression" - "Flaky test 治理" / "不稳定测试修复" --- ## 技术栈依赖 ### 核心 CLI ```bash # 必须安装 npm install -D @playwright/test # 可选增强 npm install -D vitest # 单元测试补充 ``` ### AI Agent 初始化 ```bash npx playwright init-agents --loop=claude # 或 npx playwright init-agents --loop=codex ``` --- ## 功能范围 ### Phase 1: 测试场景识别与计划生成 **输入**： - 应用 URL（本地开发环境） - （可选）PRD/User Story 描述 - （可选）现有测试代码模式参考 **输出**： - `specs/features/*.md` — 功能测试计划（Gherkin 格式） - `specs/regression.md` — 视觉回归检查清单 - `specs/performance.md` — 性能基准要求 **工作流程**： #### Step 1.1: UI 探索分析 ```typescript // AI 自动打开浏览器扫描应用 const page = await context.newPage(); await page.goto('http://localhost:3000'); // 提取关键元素 const elements = await page.locator('button, input, a').all(); const routes = await extractRoutes(page); ``` **输出物**： ```markdown # UI Structure Analysis - 路由表：`/, /login, /dashboard, /settings` - 主要组件：登录表单、导航栏、数据表格、操作按钮 - 交互点：47 个可点击元素，12 个表单字段 ``` #### Step 1.2: 生成测试计划 ```gherkin # specs/features/user-authentication.md Feature: User Authentication As a registered user I want to log in securely So that I can access my account Scenario: Successful login with valid credentials Given I am on the login page When I enter valid email and passw