18b - Agentic E2E 测试：从脆弱脚本到自愈智能体

传统 E2E 测试：
  脚本 → 精确选择器 → 执行 → UI 变化 → 测试失败 ❌ → 人工修复

Agentic E2E 测试：
  自然语言意图 → AI 理解 → 动态定位 → 执行 → UI 变化 → 自动适应 ✅

# 传统 Playwright 测试
await page.goto('https://myapp.com/login');
await page.fill('#email', 'user@test.com');
await page.fill('#password', 'password123');
await page.click('button[type="submit"]');
await expect(page.locator('.dashboard')).toBeVisible();

# Agentic 自然语言测试（Bug0 风格）
1. 打开登录页面
2. 输入测试邮箱和密码
3. 点击登录按钮
4. 验证成功跳转到仪表板页面

Plan → Generate → Auto-heal → Triage → CI/CD
  │        │           │          │         │
  ▼        ▼           ▼          ▼         ▼
映射关键   AI 创建     UI 变化时   聚类相似   PR 冒烟 +
用户旅程   Playwright  自动更新    故障并     定时回归
          测试代码    定位器      去重

# 1. 访问 https://bug0.com/studio 注册账号
# 2. 连接你的 GitHub/GitLab 仓库
# 3. 提供你的 staging 环境 URL

// seed.spec.ts - 设置应用的基础环境
import { test } from '@playwright/test';
 
test('seed: login and navigate to dashboard', async ({ page }) => {
  await page.goto(process.env.STAGING_URL);
  await page.fill('[data-testid="email"]', process.env.TEST_EMAIL);
  await page.fill('[data-testid="password"]', process.env.TEST_PASSWORD);
  await page.click('button[type="submit"]');
  await page.waitForURL('**/dashboard');
});

# Bug0 的 AI 规划器会：
# 1. 从种子测试出发，探索你的应用
# 2. 在 specs/ 目录生成 Markdown 测试计划
# 3. 在 tests/ 目录生成 Playwright 测试文件
# 4. 验证选择器并添加断言

# 审查 AI 生成的测试
ls tests/
# → login.spec.ts
# → dashboard-navigation.spec.ts
# → settings-update.spec.ts
 
# 运行测试验证
npx playwright test
 
# 满意后提交到仓库
git add tests/ specs/
git commit -m "feat: add Bug0 generated E2E tests"

# .github/workflows/e2e-bug0.yml
name: Bug0 E2E Tests
 
on:
  pull_request:
    branches: [main]
  schedule:
    - cron: '0 */6 * * *'  # 每 6 小时回归测试
 
jobs:
  e2e:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
 
      - name: Install dependencies
        run: npm ci
 
      - name: Install Playwright browsers
        run: npx playwright install --with-deps chromium
 
      - name: Run E2E tests
        run: npx playwright test
        env:
          STAGING_URL: ${{ secrets.STAGING_URL }}
          TEST_EMAIL: ${{ secrets.TEST_EMAIL }}
          TEST_PASSWORD: ${{ secrets.TEST_PASSWORD }}
 
      - name: Upload test results
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: playwright-report
          path: playwright-report/
 
      # Bug0 自动分析失败并创建修复 PR
      - name: Notify Bug0
        if: failure()
        run: |
          curl -X POST https://api.bug0.com/webhook/test-results \
            -H "Authorization: Bearer ${{ secrets.BUG0_API_KEY }}" \
            -H "Content-Type: application/json" \
            -d '{"repo": "${{ github.repository }}", "run_id": "${{ github.run_id }}"}'

UI 变化检测 → 选择器失效？
  ├── 是 → 尝试代码级修复（属性回退）
  │     ├── 成功 → 更新选择器，继续执行
  │     └── 失败 → 启动视觉级修复
  │           ├── 截图分析 → 重新定位元素
  │           └── 生成新的交互代码
  └── 否 → 正常执行

# 1. 访问 https://app.mabl.com 注册
# 2. 创建工作区（Workspace）
# 3. 配置应用环境
#    - 添加 staging URL
#    - 配置测试凭证

1. 在 mabl 控制台点击 "New Test"
2. 输入起始 URL（如 https://staging.myapp.com）
3. mabl Trainer 打开浏览器，开始录制
4. 像正常用户一样操作应用
5. 在关键步骤添加断言（Assert）
6. 保存测试

# 安装 mabl CLI
npm install -g @mablhq/mabl-cli
 
# 登录
mabl auth login
 
# 列出可用测试
mabl tests list --workspace-id <your-workspace-id>
 
# 在本地运行测试
mabl tests run --id <test-id> --environment <env-id>

1. 进入 Settings → Auto-Healing
2. 启用 "GenAI Auto-Healing"
3. 配置修复策略：
   - Element Matching Sensitivity: Medium（推荐）
   - Auto-approve minor fixes: 开启
   - Notify on major changes: 开启
4. 保存设置

# .github/workflows/e2e-mabl.yml
name: mabl E2E Tests
 
on:
  pull_request:
    branches: [main]
  push:
    branches: [main]
 
jobs:
  mabl-tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
 
      - name: Install mabl CLI
        run: npm install -g @mablhq/mabl-cli
 
      - name: Run mabl tests
        env:
          MABL_API_KEY: ${{ secrets.MABL_API_KEY }}
        run: |
          mabl deployments create \
            --application-id <app-id> \
            --environment-id <env-id> \
            --await-completion \
            --timeout 3600
 
      - name: Check results
        if: always()
        env:
          MABL_API_KEY: ${{ secrets.MABL_API_KEY }}
        run: mabl deployments status --id $DEPLOYMENT_ID

1. 在 GitHub Marketplace 安装 mabl GitHub App
2. 在 mabl 控制台关联 GitHub 仓库
3. 配置触发规则：
   - PR 创建时运行冒烟测试
   - 合并到 main 时运行完整回归
4. 测试结果自动显示在 PR Checks 中

测试执行 → 元素定位失败
  │
  ▼
第 1 层：属性匹配（id, class, text, aria-label）
  ├── 匹配成功 → 自动修复，记录变更
  └── 匹配失败 ↓
  
第 2 层：ML 特征匹配（位置、大小、上下文、DOM 结构）
  ├── 置信度 > 阈值 → 自动修复
  └── 置信度 < 阈值 ↓

第 3 层：GenAI 分析（截图对比 + 语义理解）
  ├── 找到替代路径 → 建议修复，等待审批
  └── 无法修复 → 标记为真实失败，通知团队

# 方式 A：下载桌面版（推荐）
# 访问 https://katalon.com/download
# 选择对应操作系统版本下载安装
 
# 方式 B：使用 Katalon Runtime Engine（CI/CD 用）
# 下载 KRE 命令行版本
# Linux
wget https://download.katalon.com/latest/Katalon_Studio_Engine_Linux_64.tar.gz
tar -xzf Katalon_Studio_Engine_Linux_64.tar.gz

1. 打开 Katalon Studio
2. 进入 Project Settings → Self-Healing → WebUI
3. 勾选 "Enable Self-Healing"
4. 配置定位器优先级：
   ┌─────────────────────────────────────┐
   │ ☑ XPath        优先级: 1           │
   │ ☑ Attributes   优先级: 2           │
   │ ☑ CSS          优先级: 3           │
   │ ☑ Image        优先级: 4           │
   └─────────────────────────────────────┘
5. 勾选 "Auto-replace broken locators after execution"

1. 进入 Project Settings → Self-Healing → WebUI
2. 勾选 "Enable AI Self-Healing"
3. 选择 AI 分析的数据源：
   ☑ Screenshots（截图分析）
   ☑ Page source（页面源码）
   ☑ Test execution logs（执行日志）
   注意：数据源越多，准确率越高，但处理速度越慢
4. 点击 Apply and Close

1. 进入 Katalon Studio → Preferences → StudioAssist
2. 启用 StudioAssist
3. 配置 AI 模型（默认使用 Katalon 内置模型）
4. 可选：配置 Agent Mode 的 MCP Server 连接

// Katalon Groovy 脚本示例
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import com.kms.katalon.core.testobject.TestObject
 
// 定义测试对象（多定位器策略）
TestObject loginButton = findTestObject('Page_Login/btn_Submit')
// Katalon 自动为该对象维护多个定位器：
// - XPath: //button[@type='submit']
// - CSS: button.login-btn
// - Attributes: [data-testid='login-submit']
// - Image: 登录按钮截图
 
// 执行测试
WebUI.openBrowser('')
WebUI.navigateToUrl('https://staging.myapp.com/login')
WebUI.setText(findTestObject('Page_Login/input_Email'), 'test@example.com')
WebUI.setText(findTestObject('Page_Login/input_Password'), 'password123')
WebUI.click(loginButton)  // 如果主定位器失败，自动尝试备选定位器
WebUI.verifyElementPresent(findTestObject('Page_Dashboard/div_Welcome'), 10)
WebUI.closeBrowser()

# .github/workflows/e2e-katalon.yml
name: Katalon E2E Tests
 
on:
  pull_request:
    branches: [main]
  push:
    branches: [main]
 
jobs:
  katalon-tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - name: Run Katalon tests
        uses: katalon-studio/run-katalon-studio-tests@v1
        with:
          version: '10.1.0'
          projectPath: '${{ github.workspace }}'
          args: >-
            -testSuitePath="Test Suites/Regression"
            -browserType="Chrome (headless)"
            -retry=1
            -selfHealing=true
            -apiKey=${{ secrets.KATALON_API_KEY }}
 
      - name: Upload reports
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: katalon-reports
          path: Reports/

// Jenkinsfile
pipeline {
    agent any
    
    stages {
        stage('Checkout') {
            steps {
                checkout scm
            }
        }
        
        stage('Run Katalon Tests') {
            steps {
                sh '''
                    ./katalonc \
                      -projectPath="${WORKSPACE}" \
                      -testSuitePath="Test Suites/Regression" \
                      -browserType="Chrome (headless)" \
                      -selfHealing=true \
                      -apiKey=${KATALON_API_KEY} \
                      -reportFolder="Reports"
                '''
            }
        }
        
        stage('Publish Results') {
            steps {
                junit 'Reports/**/*.xml'
                archiveArtifacts artifacts: 'Reports/**/*', allowEmptyArchive: true
            }
        }
    }
    
    post {
        failure {
            slackSend channel: '#qa-alerts',
                      message: "Katalon E2E 测试失败: ${env.BUILD_URL}"
        }
    }
}

# 1. 访问 https://app.testim.io 注册（可用 7 天免费试用）
# 2. 创建新项目
# 3. 安装 Testim 浏览器扩展（Chrome）
# 4. 配置测试环境 URL

1. 在 Testim 控制台点击 "New Test"
2. 输入起始 URL
3. Testim 打开浏览器，开始录制
4. 执行用户操作（点击、输入、导航）
5. AI 自动为每个元素生成 Smart Locator
6. 添加验证步骤（Validation）
7. 保存测试

1. 在 Testim 控制台选择 "Agentic Test"
2. 用自然语言描述测试需求：

   "测试用户注册流程：
    - 打开注册页面
    - 填写姓名、邮箱、密码
    - 点击注册按钮
    - 验证显示欢迎消息
    - 验证用户能访问仪表板"

3. AI 自动生成测试步骤和断言
4. 审查并调整生成的测试
5. 运行验证

// testim.config.js - 自定义 Smart Locator 权重
module.exports = {
  locatorStrategy: {
    // 优先使用 data-testid 属性
    preferredAttributes: ['data-testid', 'data-cy', 'aria-label'],
    // Smart Locator 置信度阈值
    confidenceThreshold: 0.85,
    // 启用视觉匹配作为回退
    enableVisualFallback: true,
    // 自动更新定位器
    autoUpdateLocators: true
  }
};

# .github/workflows/e2e-testim.yml
name: Testim E2E Tests
 
on:
  pull_request:
    branches: [main]
  push:
    branches: [main]
 
jobs:
  testim-tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
 
      - name: Install Testim CLI
        run: npm install -g @testim/testim-cli
 
      - name: Run Testim tests
        run: |
          testim \
            --token ${{ secrets.TESTIM_TOKEN }} \
            --project ${{ secrets.TESTIM_PROJECT_ID }} \
            --grid "Testim-Grid" \
            --suite "Regression" \
            --report-file testim-report.xml \
            --base-url ${{ secrets.STAGING_URL }}
 
      - name: Publish test results
        if: always()
        uses: dorny/test-reporter@v1
        with:
          name: Testim Results
          path: testim-report.xml
          reporter: junit

# 安装 Testim CLI
npm install -g @testim/testim-cli
 
# 运行指定测试套件
testim \
  --token "$TESTIM_TOKEN" \
  --project "$TESTIM_PROJECT_ID" \
  --grid "Testim-Grid" \
  --suite "Smoke" \
  --parallel 4 \
  --timeout 600000 \
  --report-file results.xml
 
# 运行带标签的测试
testim \
  --token "$TESTIM_TOKEN" \
  --project "$TESTIM_PROJECT_ID" \
  --label "critical" \
  --base-url "https://staging.myapp.com"

元素特征提取：
  ┌──────────────────────────────────────┐
  │ 属性特征: id, class, name, type      │
  │ 文本特征: innerText, placeholder     │
  │ 位置特征: x, y, width, height       │
  │ 结构特征: DOM 路径, 父子关系         │
  │ 视觉特征: 颜色, 字体, 边框           │
  └──────────────────────────────────────┘
           │
           ▼
  AI 模型计算综合相似度分数
           │
           ▼
  选择最高置信度的定位策略
           │
           ▼
  执行成功 → 记录并优化模型
  执行失败 → 尝试下一策略 → 全部失败 → 报告真实故障

代码提交（PR）
  │
  ▼
┌─────────────────────────────────┐
│ 第 1 层：单元测试（秒级）        │  ← 每次提交
│ 第 2 层：API/集成测试（分钟级）   │  ← 每次提交
│ 第 3 层：E2E 冒烟测试（5-10 分钟）│  ← 每次 PR
│ 第 4 层：E2E 完整回归（30-60 分钟）│  ← 合并到 main / 定时
└─────────────────────────────────┘

# 通用模式：PR 冒烟 + 定时回归
name: E2E Testing Pipeline
 
on:
  pull_request:
    branches: [main, develop]
  schedule:
    - cron: '0 2 * * *'  # 每天凌晨 2 点回归
 
jobs:
  # PR 触发：只运行冒烟测试
  smoke-tests:
    if: github.event_name == 'pull_request'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Run smoke tests
        run: |
          # 替换为你选择的工具命令
          npx playwright test --grep @smoke
        timeout-minutes: 15
 
  # 定时触发：运行完整回归
  regression-tests:
    if: github.event_name == 'schedule'
    runs-on: ubuntu-latest
    strategy:
      matrix:
        browser: [chromium, firefox, webkit]
    steps:
      - uses: actions/checkout@v4
      - name: Run regression tests
        run: |
          npx playwright test --project=${{ matrix.browser }}
        timeout-minutes: 60
 
  # 测试结果通知
  notify:
    needs: [smoke-tests, regression-tests]
    if: always() && contains(needs.*.result, 'failure')
    runs-on: ubuntu-latest
    steps:
      - name: Notify Slack
        uses: slackapi/slack-github-action@v2
        with:
          webhook: ${{ secrets.SLACK_WEBHOOK }}
          payload: |
            {
              "text": "⚠️ E2E 测试失败: ${{ github.repository }} - ${{ github.ref }}"
            }

# 使用 Preview Deployments 进行 PR 测试
jobs:
  deploy-preview:
    runs-on: ubuntu-latest
    outputs:
      preview-url: ${{ steps.deploy.outputs.url }}
    steps:
      - uses: actions/checkout@v4
      - id: deploy
        name: Deploy preview
        run: |
          # Vercel / Netlify / Railway 部署预览
          echo "url=https://pr-${{ github.event.number }}.preview.myapp.com" >> $GITHUB_OUTPUT
 
  e2e-on-preview:
    needs: deploy-preview
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Wait for preview
        run: |
          npx wait-on ${{ needs.deploy-preview.outputs.preview-url }} --timeout 120000
 
      - name: Run E2E on preview
        env:
          BASE_URL: ${{ needs.deploy-preview.outputs.preview-url }}
        run: npx playwright test

你是一个 QA 工程师。根据以下用户故事，生成 Agentic E2E 测试用例。
每个测试用例用自然语言描述步骤和预期结果。

用户故事：
[粘贴用户故事]

验收标准：
[粘贴验收标准]

要求：
1. 覆盖正常流程和至少 2 个异常流程
2. 每个步骤描述用户的意图，而非具体的 UI 操作
3. 断言描述预期的业务结果，而非 DOM 状态
4. 标注测试优先级（P0/P1/P2）

将以下手动测试用例转换为 Agentic E2E 测试格式。
去除所有硬编码的选择器和精确的 UI 描述，
改用意图驱动的自然语言描述。

原始测试用例：
[粘贴手动测试步骤]

转换要求：
1. 用"做什么"替代"怎么做"
2. 用业务语言替代技术语言
3. 保留所有验证点
4. 添加数据变体说明

页面截图 → 视觉模型分析
  │
  ├── 元素识别：按钮、输入框、链接、图片...
  ├── 文本提取：OCR 识别页面文字
  ├── 布局理解：元素间的空间关系
  └── 状态判断：加载中、错误、成功...

# 使用多模态 LLM 进行视觉测试验证（概念示例）
import base64
from openai import OpenAI
 
client = OpenAI()
 
def visual_test_assertion(screenshot_path: str, expected_state: str) -> bool:
    """使用视觉 AI 验证页面状态"""
    with open(screenshot_path, "rb") as f:
        image_data = base64.b64encode(f.read()).decode()
 
    response = client.chat.completions.create(
        model="gpt-4o",
        messages=[
            {
                "role": "user",
                "content": [
                    {
                        "type": "text",
                        "text": f"分析这个网页截图，判断是否满足以下条件：{expected_state}\n"
                                f"回答 PASS 或 FAIL，并简要说明原因。"
                    },
                    {
                        "type": "image_url",
                        "image_url": {"url": f"data:image/png;base64,{image_data}"}
                    }
                ]
            }
        ]
    )
 
    result = response.choices[0].message.content
    return result.startswith("PASS")
 
# 使用示例
assert visual_test_assertion(
    "screenshots/dashboard.png",
    "页面显示了用户仪表板，包含欢迎消息和至少 3 个数据卡片"
)

你的团队情况是？
│
├── 初创/小团队（< 10 人），预算有限
│   ├── 只需 Web 测试 → Bug0 Studio（$699/月）
│   └── 需要多平台 → Katalon Free
│
├── 中型 SaaS 团队（10-50 人）
│   ├── 重视开发者体验 → Bug0 托管（$2,500/月）
│   ├── 重视低代码 + 全面测试类型 → mabl
│   └── 需要 Playwright 代码所有权 → Bug0
│
├── 大型企业（50+ 人）
│   ├── 已使用 Tricentis 生态 → Testim
│   ├── 需要多平台（Web + 移动 + API + 桌面）→ Katalon Ultimate
│   └── 需要全托管 QA 服务 → QA Wolf
│
└── 特殊需求
    ├── Salesforce 测试 → Testim Salesforce
    ├── 需要自主探索发现测试路径 → Octomind
    └── 需要视觉 AI 零选择器方案 → Docket / Bug0

第 1 周：接入 Bug0，AI 探索核心用户旅程
  → 自动生成 50 个 Playwright 测试覆盖 P0 流程

第 2 周：审查断言，补充业务验证逻辑
  → 调整 15 个测试的断言条件

第 3 周：接入 CI/CD，PR 冒烟 + 每日回归
  → 配置 GitHub Actions 工作流

第 4 周：扩展覆盖率到 80%
  → AI 补充 30 个测试覆盖 P1 流程