18e - 视觉 AI 与变异测试

# JavaScript/TypeScript（Cypress 集成）
npm install @applitools/eyes-cypress --save-dev
 
# JavaScript/TypeScript（Playwright 集成）
npm install @applitools/eyes-playwright --save-dev
 
# Python（Selenium 集成）
pip install eyes-selenium

# 设置环境变量
export APPLITOOLS_API_KEY="your-api-key-here"

import { test } from '@playwright/test';
import { Eyes, Target, Configuration, BatchInfo } from '@applitools/eyes-playwright';
 
test('首页视觉回归检查', async ({ page }) => {
  const eyes = new Eyes();
  const config = new Configuration();
  config.setBatch(new BatchInfo('Sprint 42 视觉测试'));
  // 启用 Ultrafast Grid 跨浏览器测试
  config.addBrowser(1200, 800, 'chrome');
  config.addBrowser(1200, 800, 'firefox');
  config.addBrowser(1200, 800, 'safari');
  config.addDeviceEmulation({ deviceName: 'iPhone 15' });
  eyes.setConfiguration(config);
 
  await eyes.open(page, '我的应用', '首页视觉测试');
  await page.goto('https://myapp.com');
  await eyes.check('首页全屏', Target.window().fully());
  await eyes.check('导航栏', Target.region('#navbar'));
  await eyes.close();
});

npm install --save-dev @percy/cli @percy/playwright

import { test } from '@playwright/test';
import percySnapshot from '@percy/playwright';
 
test('产品列表页视觉快照', async ({ page }) => {
  await page.goto('https://myapp.com/products');
  // 等待动态内容加载完成
  await page.waitForSelector('.product-card');
  // 拍摄视觉快照
  await percySnapshot(page, '产品列表页', {
    widths: [375, 768, 1280],  // 响应式断点
    minHeight: 1024,
  });
});

# .github/workflows/visual-test.yml
name: Visual Regression Tests
on: [pull_request]
 
jobs:
  visual-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - name: Percy 视觉测试
        run: npx percy exec -- npx playwright test --grep @visual
        env:
          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

# 安装
npm install lost-pixel --save-dev

// lostpixel.config.ts
import { CustomProjectConfig } from 'lost-pixel';
 
export const config: CustomProjectConfig = {
  storybookShots: {
    storybookUrl: './storybook-static',
  },
  pageShots: {
    pages: [
      { path: '/', name: 'home' },
      { path: '/login', name: 'login' },
      { path: '/dashboard', name: 'dashboard' },
    ],
    baseUrl: 'http://localhost:3000',
  },
  generateOnly: false,
  failOnDifference: true,
};

传统测试失败流程：
  UI 变更 → 选择器失效 → 测试失败 → 人工修复 → 重新运行
  耗时：30 分钟 - 数小时

自愈测试流程：
  UI 变更 → 选择器失效 → AI 自动找到新选择器 → 测试通过
  耗时：0（自动完成）

请为以下页面设计视觉回归测试策略：

应用类型：[Web 应用 / 移动端 / 桌面端]
关键页面：[列出 5-10 个核心页面]
响应式断点：[375px, 768px, 1280px, 1920px]
浏览器要求：[Chrome, Firefox, Safari, Edge]

要求：
1. 为每个关键页面定义视觉检查点（全屏 + 关键区域）
2. 设计基线管理策略（何时更新基线、谁审批）
3. 处理动态内容（日期、随机数据、广告位）的方案
4. CI/CD 集成方案（PR 触发、主分支基线更新）
5. 误报处理流程（阈值设置、忽略区域）

变异测试工作流：
  源码 → 注入变异（如 > 改为 >=）→ 运行测试
    → 测试失败 → 变异体被"杀死" ✅（测试有效）
    → 测试通过 → 变异体"存活" ❌（测试不足）

变异分数 = 被杀死的变异体数 / 总变异体数 × 100%

# 步骤 1：安装
npm install --save-dev @stryker-mutator/core
 
# 步骤 2：初始化配置
npx stryker init
# 选择测试框架（Jest/Vitest/Mocha）和报告格式

// stryker.config.mjs
/** @type {import('@stryker-mutator/api/core').PartialStrykerOptions} */
export default {
  mutate: ['src/**/*.ts', '!src/**/*.test.ts', '!src/**/*.spec.ts'],
  testRunner: 'vitest',
  reporters: ['html', 'clear-text', 'progress', 'dashboard'],
  coverageAnalysis: 'perTest',
  // 增量模式：只测试变更的代码
  incremental: true,
  incrementalFile: '.stryker-incremental.json',
  // 超时设置
  timeoutMS: 60000,
  // 阈值设置
  thresholds: {
    high: 80,
    low: 60,
    break: 50,  // 低于 50% 变异分数则构建失败
  },
};

# 步骤 3：运行变异测试
npx stryker run
 
# 增量模式（CI 推荐）
npx stryker run --incremental

# 步骤 1：安装
cargo install cargo-mutants
 
# 步骤 2：运行（在项目根目录）
cargo mutants
 
# 步骤 3：只测试特定文件
cargo mutants --file src/sync_engine.rs
 
# 步骤 4：并行执行（加速）
cargo mutants --jobs 4
 
# 步骤 5：查看结果
cat mutants.out/caught.txt    # 被杀死的变异体
cat mutants.out/missed.txt    # 存活的变异体（需要关注！）
cat mutants.out/timeout.txt   # 超时的变异体

# .github/workflows/mutation-test.yml
name: Mutation Testing
on:
  schedule:
    - cron: '0 2 * * 1'  # 每周一凌晨 2 点运行
  workflow_dispatch:       # 支持手动触发
 
jobs:
  mutation-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: taiki-e/install-action@v2
        with:
          tool: cargo-mutants
      - name: Run mutation tests
        run: cargo mutants --jobs 4 -- --release
      - name: Upload results
        uses: actions/upload-artifact@v4
        with:
          name: mutation-results
          path: mutants.out/

# 步骤 1：安装
pip install mutmut
 
# 步骤 2：运行
mutmut run
 
# 步骤 3：查看存活的变异体
mutmut results
 
# 步骤 4：查看具体变异体详情
mutmut show 42  # 查看第 42 号变异体
 
# 步骤 5：生成 HTML 报告
mutmut html

# setup.cfg 配置
[mutmut]
paths_to_mutate=src/
tests_dir=tests/
runner=python -m pytest -x --tb=short

<!-- pom.xml -->
<plugin>
  <groupId>org.pitest</groupId>
  <artifactId>pitest-maven</artifactId>
  <version>1.17.4</version>
  <configuration>
    <targetClasses>
      <param>com.myapp.*</param>
    </targetClasses>
    <targetTests>
      <param>com.myapp.*Test</param>
    </targetTests>
    <mutationThreshold>80</mutationThreshold>
    <outputFormats>
      <param>HTML</param>
      <param>XML</param>
    </outputFormats>
  </configuration>
</plugin>

# 运行
mvn org.pitest:pitest-maven:mutationCoverage

请分析以下代码的变异测试结果，并建议如何改进测试套件：

存活的变异体列表：
[粘贴 mutants.out/missed.txt 或 Stryker 报告中存活的变异体]

源代码：
[粘贴相关源代码]

现有测试：
[粘贴现有测试代码]

要求：
1. 分析每个存活变异体为什么没被测试捕获
2. 为每个存活变异体编写能杀死它的测试用例
3. 识别测试套件中的系统性盲区（如缺少边界值测试、缺少错误路径测试）
4. 建议变异分数的合理目标（考虑项目类型和风险等级）

模糊测试演进：

第一代：随机模糊测试（Dumb Fuzzing）
  → 纯随机输入，效率低

第二代：覆盖率引导模糊测试（Coverage-Guided Fuzzing）
  → AFL/libFuzzer，追踪代码覆盖率，优先变异触发新路径的输入
  → 效率提升 10-100 倍

第三代：AI 增强模糊测试（AI-Enhanced Fuzzing）
  → LLM 理解输入格式和程序语义，生成高质量种子
  → 结合覆盖率反馈 + 语义反馈，发现更深层漏洞

# 步骤 1：安装
cargo install cargo-fuzz
 
# 步骤 2：初始化模糊测试目标
cargo fuzz init
 
# 步骤 3：创建模糊测试目标
cargo fuzz add parse_input

// fuzz/fuzz_targets/parse_input.rs
#![no_main]
use libfuzzer_sys::fuzz_target;
use my_crate::parser::parse;
 
fuzz_target!(|data: &[u8]| {
    if let Ok(input) = std::str::from_utf8(data) {
        // 模糊测试解析器：任何输入都不应导致 panic
        let _ = parse(input);
    }
});

# 步骤 4：运行模糊测试
cargo fuzz run parse_input -- -max_total_time=300  # 运行 5 分钟
 
# 步骤 5：查看崩溃
ls fuzz/artifacts/parse_input/
 
# 步骤 6：最小化崩溃输入
cargo fuzz tmin parse_input fuzz/artifacts/parse_input/crash-xxx

// fuzz_target.cpp
#include <cstdint>
#include <cstddef>
 
extern "C" int LLVMFuzzerTestOneInput(const uint8_t *data, size_t size) {
    // 被测函数：任何输入都不应导致未定义行为
    process_input(data, size);
    return 0;
}

# 编译（启用 AddressSanitizer + UndefinedBehaviorSanitizer）
clang++ -g -fsanitize=fuzzer,address,undefined \
  -o fuzz_target fuzz_target.cpp my_library.cpp
 
# 运行
./fuzz_target corpus/ -max_total_time=600

// MyFuzzTest.java
import com.code_intelligence.jazzer.api.FuzzedDataProvider;
import com.code_intelligence.jazzer.junit.FuzzTest;
 
public class MyFuzzTest {
    @FuzzTest
    void fuzzParser(FuzzedDataProvider data) {
        String input = data.consumeRemainingAsString();
        // 任何输入都不应导致未捕获异常
        try {
            MyParser.parse(input);
        } catch (ParseException e) {
            // 预期的异常，忽略
        }
        // 其他异常（如 NullPointerException）会被报告为 bug
    }
}

AI 增强模糊测试工作流：

1. 静态分析 → 提取控制流/数据流信息
2. 构造结构化 Prompt → 发送给 LLM
3. LLM 生成语法有效且语义多样的输入种子
4. 覆盖率引导模糊器接管 → 基于种子进行变异
5. 语义反馈（程序状态变化、异常类型）→ 优先探索新行为
6. 循环迭代 → 持续发现更深层漏洞

请为以下函数生成模糊测试的初始种子语料库：

函数签名：[粘贴函数签名]
输入格式：[描述输入格式，如 JSON、XML、自定义协议]
已知约束：[列出输入约束]

要求：
1. 生成 20-30 个多样化的有效输入（覆盖不同分支）
2. 生成 10 个边界值输入（极大值、极小值、空值）
3. 生成 5 个接近无效但仍合法的输入（边界探测）
4. 每个输入附带简短说明（测试哪个代码路径）
5. 输出为可直接放入 corpus/ 目录的格式

// visual-tests/checkout.spec.ts
import { test } from '@playwright/test';
import percySnapshot from '@percy/playwright';
 
test('结账流程视觉回归', async ({ page }) => {
  await page.goto('/checkout');
  await page.fill('#email', 'test@example.com');
  await percySnapshot(page, '结账-填写邮箱', { widths: [375, 1280] });
 
  await page.click('#next-step');
  await page.waitForSelector('.payment-form');
  await percySnapshot(page, '结账-支付信息', { widths: [375, 1280] });
});

# 前端：StrykerJS 测试购物车逻辑
npx stryker run --mutate "src/cart/**/*.ts"
# 目标：变异分数 > 80%
 
# 后端核心：cargo-mutants 测试价格计算
cargo mutants --file src/pricing.rs
# 目标：变异分数 > 85%

// fuzz/fuzz_targets/fuzz_price_calc.rs
#![no_main]
use libfuzzer_sys::fuzz_target;
use pricing::calculate_total;
 
fuzz_target!(|data: &[u8]| {
    if let Ok(input) = serde_json::from_slice::<PriceRequest>(data) {
        // 价格计算不应 panic，且结果不应为负数
        if let Ok(total) = calculate_total(&input) {
            assert!(total >= 0.0, "价格不应为负数");
        }
    }
});