菜单
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.