compatibility-testing

兼容性测试

浏览器引擎

浏览器驱动的检查（视口模拟、响应式验证、跨浏览器截图）应通过 qe-browser fleet 技能（.claude/skills/qe-browser/）进行。Vibium 由 aqe init 安装。快速参考：

# Viewport emulation per breakpoint
vibium viewport 375 667   # mobile
vibium viewport 768 1024  # tablet
vibium viewport 1920 1080 # desktop

# Full device emulation (user-agent, DPR, touch)
vibium emulate-device "iPhone 15"

# Visual diff per viewport
for vp in "375 667 mobile" "768 1024 tablet" "1920 1080 desktop"; do
  read w h name <<< "$vp"
  vibium viewport $w $h
  node .claude/skills/qe-browser/scripts/visual-diff.js --name "homepage-$name"
done

目前，跨浏览器（Firefox/Safari）仍需使用 Playwright 或云设备农场——Vibium 的 BiDi 后端在 v26.3.x 版本中仅支持 Chrome。

<default_to_action> 验证跨浏览器／平台兼容性时：

1. 定义浏览器矩阵（覆盖 95% 以上的用户）
2. 测试响应式断点（手机、平板、桌面）
3. 并行在不同浏览器／设备上运行
4. 使用云服务覆盖设备（BrowserStack、Sauce Labs）
5. 比较不同平台上的视觉截图

快速兼容性检查清单：

• Chrome、Firefox、Safari、Edge（最新版本及 N-1 版本）
• Mobile Safari（iOS）、Mobile Chrome（Android）
• 屏幕尺寸：320px、768px、1920px
• 对关键流程，使用实际目标设备进行测试

成功的关键因素：

• 用户会通过 100 多种浏览器／设备组合访问
• 在用户使用的环境中测试，而不是在开发环境中测试
• 云测试可将 10 小时的工作缩短至 15 分钟 </default_to_action>

快速参考卡

适用时机

• 发布前
• CSS／布局更改后
• 开拓新市场时
• 验证响应式设计时

---

使用 Playwright 进行跨浏览器测试

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
    { name: 'mobile-chrome', use: { ...devices['Pixel 5'] } },
    { name: 'mobile-safari', use: { ...devices['iPhone 12'] } }
  ]
});

// Run: npx playwright test --project=chromium --project=firefox

---

云测试集成

// BrowserStack configuration
const capabilities = {
  'browserName': 'Chrome',
  'browser_version': '118.0',
  'os': 'Windows',
  'os_version': '11',
  'browserstack.user': process.env.BROWSERSTACK_USER,
  'browserstack.key': process.env.BROWSERSTACK_KEY
};

// Parallel execution across devices
const deviceMatrix = [
  { os: 'Windows', browser: 'Chrome' },
  { os: 'OS X', browser: 'Safari' },
  { os: 'Android', device: 'Samsung Galaxy S24' },
  { os: 'iOS', device: 'iPhone 15' }
];

---

Agent 驱动的兼容性测试

// Cross-platform visual comparison
await Task("Compatibility Testing", {
  url: 'https://example.com',
  browsers: ['chrome', 'firefox', 'safari', 'edge'],
  devices: ['desktop', 'tablet', 'mobile'],
  platform: 'browserstack',
  parallel: true
}, "qe-visual-tester");

// Returns:
// {
//   combinations: 12,  // 4 browsers × 3 devices
//   passed: 11,
//   differences: [{ browser: 'safari', device: 'mobile', diff: 0.02 }]
// }

---

Agent 协调提示

内存命名空间

aqe/compatibility-testing/
├── browser-matrix/*     - Browser/version configurations
├── device-matrix/*      - Device configurations
├── visual-diffs/*       - Cross-browser visual differences
└── reports/*            - Compatibility reports

Fleet 协调

const compatFleet = await FleetManager.coordinate({
  strategy: 'compatibility-testing',
  agents: [
    'qe-visual-tester',       // Visual comparison
    'qe-test-executor',       // Cross-browser execution
    'qe-performance-tester'   // Performance by platform
  ],
  topology: 'parallel'
});

---

相关技能

• 移动端测试 - 移动端专项测试
• 高级视觉测试 - 视觉回归
• 无障碍测试 - 跨平台无障碍

---

请记住

覆盖 95% 以上的用户群。 使用分析数据了解实际的浏览器／设备使用情况。不要把时间浪费在没人使用的浏览器上。

使用 Agents： Agents 可协调云平台上的并行跨浏览器测试。qe-visual-tester 会自动发现不同平台上的视觉差异。