qe-compatibility-testing

兼容性测试

<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／布局变更后
• 在新市场推出产品时
• 验证响应式设计

浏览器矩阵

浏览器	版本	优先级
Chrome	最新版、N-1 版本	高
Firefox	最新版、N-1 版本	高
Safari	最新版、N-1 版本	高
Edge	最新版	中
Mobile Safari	最新版 iOS	高
Mobile Chrome	最新版 Android	高

屏幕断点

类别	宽度范围
移动设备	320px - 480px
平板电脑	481px - 768px
桌面设备	769px - 1920px+

---

响应式设计测试

import { test, expect } from '@playwright/test';

const devices = [
  { name: 'iPhone 12', width: 390, height: 844 },
  { name: 'iPad', width: 768, height: 1024 },
  { name: 'Desktop', width: 1920, height: 1080 }
];

for (const device of devices) {
  test(`layout on ${device.name}`, async ({ page }) => {
    await page.setViewportSize({
      width: device.width,
      height: device.height
    });

    await page.goto('https://example.com');

    const nav = await page.locator('nav');
    if (device.width < 768) {
      // Mobile: hamburger menu
      expect(await nav.locator('.hamburger')).toBeVisible();
    } else {
      // Desktop: full menu
      expect(await nav.locator('.menu-items')).toBeVisible();
    }
  });
}

---

使用 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'
});

---

相关技能

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

---

请记住

**在用户使用的环境中测试，而不是只在开发环境中测试。**开发者使用高端设备上的最新版 Chrome。用户则可能通过旧版浏览器、低端设备和慢速网络访问。

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

**使用 Agents：**Agents 可在多个云平台上协调并行跨浏览器测试，将 10 小时的手动测试缩短至 15 分钟。qe-visual-tester 可自动发现不同平台之间的视觉差异。