qe-compatibility-testing

互換性テスト

<default_to_action> クロスブラウザー／プラットフォームの互換性を検証する場合：

1. ブラウザーマトリックスを定義します（ユーザーの95％以上をカバー）
2. レスポンシブのブレークポイントをテストします（モバイル、タブレット、デスクトップ）
3. 複数のブラウザー／デバイスで並行して実行します
4. デバイスを幅広くカバーするためにクラウドサービスを利用します（BrowserStack、Sauce Labs）
5. プラットフォーム間でビジュアルスクリーンショットを比較します

互換性に関する簡易チェックリスト：

• Chrome、Firefox、Safari、Edge（最新版＋N-1）
• モバイル Safari（iOS）、モバイル Chrome（Android）
• 画面サイズ：320px、768px、1920px
• 重要なフローは、実際の対象デバイスでテストします

重要な成功要因：

• ユーザーは100種類以上のブラウザー／デバイスの組み合わせからアクセスします
• 開発環境ではなく、ユーザーが実際に使う環境でテストします
• クラウドテストにより、10時間かかる作業を15分に短縮できます </default_to_action>

クイックリファレンスカード

使用するタイミング

• リリース前
• CSS／レイアウト変更後
• 新しい市場でのローンチ時
• レスポンシブデザインの検証時

ブラウザーマトリックス

ブラウザー	バージョン	優先度
Chrome	最新版、N-1	高
Firefox	最新版、N-1	高
Safari	最新版、N-1	高
Edge	最新版	中
モバイル Safari	iOS 最新版	高
モバイル 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' }
];

---

エージェント主導の互換性テスト

// 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 }]
// }

---

エージェント連携のヒント

メモリ名前空間

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

フリート連携

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％以上をカバーしましょう。 アナリティクスを使って、実際に利用されているブラウザー／デバイスを特定します。誰も使っていないブラウザーに時間をかけないでください。

エージェントを使う場合： エージェントはクラウドプラットフォーム上でのクロスブラウザーテストを並行してオーケストレーションし、手動テストにかかる10時間を15分に短縮します。qe-visual-tester はプラットフォーム間のビジュアルの不整合を自動的に検出します。