Back to Details

compatibility-testing

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Compatibility Testing

兼容性测试

<default_to_action> When validating cross-browser/platform compatibility:
  1. DEFINE browser matrix (cover 95%+ of users)
  2. TEST responsive breakpoints (mobile, tablet, desktop)
  3. RUN in parallel across browsers/devices
  4. USE cloud services for device coverage (BrowserStack, Sauce Labs)
  5. COMPARE visual screenshots across platforms
Quick Compatibility Checklist:
  • Chrome, Firefox, Safari, Edge (latest + N-1)
  • Mobile Safari (iOS), Mobile Chrome (Android)
  • Screen sizes: 320px, 768px, 1920px
  • Test on actual target devices for critical flows
Critical Success Factors:
  • Users access from 100+ browser/device combinations
  • Test where users are, not where you develop
  • Cloud testing reduces 10 hours to 15 minutes </default_to_action>
<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>

Quick Reference Card

快速参考卡片

When to Use

适用场景

  • Before release
  • After CSS/layout changes
  • Launching in new markets
  • Responsive design validation
  • 版本发布前
  • CSS/布局变更后
  • 新市场上线时
  • 响应式设计验证

Browser Matrix

浏览器矩阵

BrowserVersionsPriority
ChromeLatest, N-1High
FirefoxLatest, N-1High
SafariLatest, N-1High
EdgeLatestMedium
Mobile SafariiOS latestHigh
Mobile ChromeAndroid latestHigh
浏览器版本优先级
Chrome最新版本、N-1高
Firefox最新版本、N-1高
Safari最新版本、N-1高
Edge最新版本中
Mobile SafariiOS最新版本高
Mobile ChromeAndroid最新版本高

Screen Breakpoints

屏幕断点

CategoryWidth Range
Mobile320px - 480px
Tablet481px - 768px
Desktop769px - 1920px+
类别宽度范围
移动端320px - 480px
平板端481px - 768px
桌面端769px - 1920px+

Responsive Design Testing

响应式设计测试

javascript
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();
    }
  });
}
javascript
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();
    }
  });
}

Cross-Browser with Playwright

基于Playwright的跨浏览器测试

javascript
// 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
javascript
// 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

Cloud Testing Integration

云测试集成

javascript
// 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' }
];
javascript
// 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-Driven Compatibility Testing

基于Agent的兼容性测试

typescript
// 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 }]
// }
typescript
// 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 Coordination Hints

Agent协作提示

Memory Namespace

内存命名空间

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

Fleet Coordination

集群协作

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

Related Skills

相关技能

  • mobile-testing - Mobile-specific testing
  • visual-testing-advanced - Visual regression
  • accessibility-testing - Cross-platform a11y
  • 移动端测试 - 移动端专属测试
  • 高级视觉测试 - 视觉回归测试
  • 无障碍测试 - 跨平台无障碍测试

Remember

注意事项

Test where users are, not where you develop. Developers use latest Chrome on high-end machines. Users access from older browsers, low-end devices, and slow networks.
Cover 95%+ of your user base. Use analytics to identify actual browser/device usage. Don't waste time on browsers nobody uses.
With Agents: Agents orchestrate parallel cross-browser testing across cloud platforms, reducing 10 hours of manual testing to 15 minutes. 
qe-visual-tester
catches visual inconsistencies across platforms automatically.
在用户实际使用的环境中测试，而非开发环境。 开发者通常使用高端设备上的最新版Chrome，而用户可能使用旧版浏览器、低端设备和慢速网络。
覆盖95%以上的用户群体。 通过分析数据确定用户实际使用的浏览器/设备组合，不要在无人使用的浏览器上浪费时间。
借助Agent： Agent可在云平台上协调并行跨浏览器测试，将10小时的手动测试缩短至15分钟。
qe-visual-tester
可自动检测不同平台间的视觉不一致问题。