devlab-web-test-e2e

Web E2E 测试专家技能

专注 Vue/React 前端项目的浏览器端到端测试能力。

基于 Playwright + AI Agent 实现从测试计划生成 → 代码生成 → 失败修复的完整闭环。

触发条件

当用户提到以下关键词时触发此 Skill：

• "Vue/React 组件测试" / "web component test"
• "浏览器自动化测试" / "browser automation"
• "Playwright 测试" / "E2E 测试"
• "视觉回归测试" / "visual regression"
• "Flaky test 治理" / "不稳定测试修复"

技术栈依赖

核心 CLI

# 必须安装
npm install -D @playwright/test

# 可选增强
npm install -D vitest  # 单元测试补充

AI Agent 初始化

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 探索分析

// 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);

输出物：

# UI Structure Analysis
- 路由表：`/, /login, /dashboard, /settings`
- 主要组件：登录表单、导航栏、数据表格、操作按钮
- 交互点：47 个可点击元素，12 个表单字段

Step 1.2: 生成测试计划

# 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 password
    And I click "Sign In" button
    Then I should see the dashboard
    And I should receive a welcome message
    
  Scenario Outline: Login validation
    When I enter "<email>" as email
    And I submit the form
    Then I should see error "<error_message>"

    Examples:
      | email          | error_message       |
      | invalid        | Invalid email format|
      | empty@         | Invalid email format|
      |                | Email is required   |

Phase 2: Playwright 测试代码生成