---
id: proffesor-for-testing/agentic-qe/compatibility-testing
version: "58960a69"
license: MIT
install: manual
updated: 2026-07-24
---

# compatibility-testing — compatibility-testing helps you systematically verify that web applications perform consistently across different browsers and device configurations. Run comprehensive validation checks to catch rendering issues and functional gaps before they reach users, ensuring a reliable experience for everyone.

Publisher: proffesor-for-testing · Stars: 423 · Updated: 2026-07-24

Install (manual): `git clone https://github.com/proffesor-for-testing/agentic-qe`

## SKILL.md

# 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:

```bash
# 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

```javascript
// 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
```

---

## Cloud Testing Integration

```javascript
// 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' }
];
```

---

## Agent-Driven Compatibility Testing

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

---

## Agent Coordination Hints

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

### Fleet Coordination
```typescript
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'
});
```

---

## Related Skills
- [mobile-testing](../mobile-testing/) - Mobile-specific testing
- [visual-testing-advanced](../visual-testing-advanced/) - Visual regression
- [accessibility-testing](../accessibility-testing/) - Cross-platform a11y

---

## Remember

**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.


[View on SkillFed](https://skillfed.io/proffesor-for-testing/agentic-qe/compatibility-testing) · [View on GitHub](https://github.com/proffesor-for-testing/agentic-qe)