メニュー
Cross-browser, cross-platform, and cross-device compatibility testing ensuring consistent experience across environments. Use when validating browser support, testing responsive design, or ensuring platform compatibility.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Evaluates code quality through complexity analysis, lint results, code smell detection, and test health metrics. Use when assessing deployment readiness, configuring quality gates, scoring a codebase for release, or generating quality reports with pass/fail verdicts.
Evaluates code quality through complexity analysis, lint results, code smell detection, and test health metrics. Use when assessing deployment readiness, configuring quality gates, scoring a codebase for release, or generating quality reports with pass/fail verdicts.
Generates durable-first tests — invariants, contracts, and property-based tests at boundaries that survive a reimplementation — plus unit, integration, and e2e coverage. Use when creating tests for new or changed code, filling coverage gaps, or migrating test suites between Jest, Vitest, and Playwright.
Generates durable-first tests — invariants, contracts, and property-based tests at boundaries that survive a reimplementation — plus unit, integration, and e2e coverage. Use when creating tests for new or changed code, filling coverage gaps, or migrating test suites between Jest, Vitest, and Playwright.
Builds semantic code indexes, maps dependency graphs, and performs intelligent code search across large codebases. Use when understanding unfamiliar code, tracing call chains, analyzing import dependencies, or reducing context window usage through targeted retrieval.
Knowledge graph-based code understanding with semantic search and 80% token reduction through intelligent context retrieval.
| name | compatibility-testing |
| description | Cross-browser, cross-platform, and cross-device compatibility testing ensuring consistent experience across environments. Use when validating browser support, testing responsive design, or ensuring platform compatibility. |
| category | specialized-testing |
| priority | medium |
| tokenEstimate | 800 |
| agents | ["qe-visual-tester","qe-test-executor","qe-performance-tester"] |
| implementation_status | optimized |
| optimization_version | 1 |
| last_optimized | "2025-12-02T00:00:00.000Z" |
| dependencies | [] |
| quick_reference_card | true |
| tags | ["compatibility","cross-browser","responsive","browserstack","playwright","devices"] |
| trust_tier | 3 |
| validation | {"schema_path":"schemas/output.json","validator_path":"scripts/validate-config.json"} |
Browser-driven checks (viewport emulation, responsive validation, cross-browser screenshots) should go through the qe-browser fleet skill (.claude/skills/qe-browser/). Vibium is installed by aqe init. Quick reference:
# 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
Cross-browser (Firefox/Safari) still requires Playwright or a cloud device farm today — Vibium's BiDi backend is Chrome-only at v26.3.x.
<default_to_action> When validating cross-browser/platform compatibility:
Quick Compatibility Checklist:
Critical Success Factors:
// 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'
});
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. qe-visual-tester catches visual inconsistencies across platforms automatically.