互換性テスト

ブラウザエンジン

ビューポートエミュレーション、レスポンシブ検証、クロスブラウザスクリーンショットなどのブラウザ駆動チェックは qe-browser フリートスキル (.claude/skills/qe-browser/) を使用してください。Vibium は aqe init でインストールされます。クイックリファレンス:

# ブレークポイントごとのビューポートエミュレーション
vibium viewport 375 667   # mobile
vibium viewport 768 1024  # tablet
vibium viewport 1920 1080 # desktop

# フルデバイスエミュレーション (user-agent, DPR, touch)
vibium emulate-device "iPhone 15"

# ビューポートごとのビジュアル差分
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'] } }
  ]
});

// 実行: npx playwright test --project=chromium --project=firefox

---

クラウドテスト統合

// BrowserStack 設定
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
};

// デバイス全体での並列実行
const deviceMatrix = [
  { os: 'Windows', browser: 'Chrome' },
  { os: 'OS X', browser: 'Safari' },
  { os: 'Android', device: 'Samsung Galaxy S24' },
  { os: 'iOS', device: 'iPhone 15' }
];

---

Agent 駆動型互換性テスト

// クロスプラットフォームビジュアル比較
await Task("Compatibility Testing", {
  url: 'https://example.com',
  browsers: ['chrome', 'firefox', 'safari', 'edge'],
  devices: ['desktop', 'tablet', 'mobile'],
  platform: 'browserstack',
  parallel: true
}, "qe-visual-tester");

// 返却値:
// {
//   combinations: 12,  // 4 ブラウザ × 3 デバイス
//   passed: 11,
//   differences: [{ browser: 'safari', device: 'mobile', diff: 0.02 }]
// }

---

Agent 調整のヒント

メモリネームスペース

aqe/compatibility-testing/
├── browser-matrix/*     - ブラウザ/バージョン設定
├── device-matrix/*      - デバイス設定
├── visual-diffs/*       - クロスブラウザビジュアル差分
└── reports/*            - 互換性レポート

フリート調整

const compatFleet = await FleetManager.coordinate({
  strategy: 'compatibility-testing',
  agents: [
    'qe-visual-tester',       // ビジュアル比較
    'qe-test-executor',       // クロスブラウザ実行
    'qe-performance-tester'   // プラットフォーム別パフォーマンス
  ],
  topology: 'parallel'
});

---

関連スキル

• mobile-testing - モバイル固有テスト
• visual-testing-advanced - ビジュアルリグレッション
• accessibility-testing - クロスプラットフォーム a11y

---

覚えておくこと

ユーザーベースの 95% 以上をカバーしてください。 アナリティクスを使用して実際のブラウザ/デバイス使用状況を特定します。誰も使用していないブラウザに時間を浪費しないでください。

Agent 使用時: Agent はクラウドプラットフォーム全体での並列クロスブラウザテストを調整します。qe-visual-tester はプラットフォーム全体のビジュアル矛盾を自動的にキャッチします。