compatibility-testing

Compatibility Testing

Browser engine

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:

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>

Quick Reference Card

When to Use

• Before release
• After CSS/layout changes
• Launching in new markets
• Responsive design validation

---

Cross-Browser with 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