# Qe Compatibility Testing

Cross-browser, cross-platform, and cross-device compatibility testing ensuring...

- Repository: https://github.com/proffesor-for-testing/agentic-qe (521 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add proffesor-for-testing/agentic-qe --skill qe-compatibility-testing -g -a claude-code -y`
Codex: `npx skills add proffesor-for-testing/agentic-qe --skill qe-compatibility-testing -g -a codex -y`
Cursor: `npx skills add proffesor-for-testing/agentic-qe --skill qe-compatibility-testing -g -a cursor -y`
Gemini CLI: `npx skills add proffesor-for-testing/agentic-qe --skill qe-compatibility-testing -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add proffesor-for-testing/agentic-qe`

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

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Compatibility Testing

<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

### Browser Matrix
| Browser | Versions | Priority |
|---------|----------|----------|
| **Chrome** | Latest, N-1 | High |
| **Firefox** | Latest, N-1 | High |
| **Safari** | Latest, N-1 | High |
| **Edge** | Latest | Medium |
| **Mobile Safari** | iOS latest | High |
| **Mobile Chrome** | Android latest | High |

### Screen Breakpoints
| Category | Width Range |
|----------|-------------|
| **Mobile** | 320px - 480px |
| **Tablet** | 481px - 768px |
| **Desktop** | 769px - 1920px+ |

---

## Responsive Design Testing

```javascript
import { test, expect } from '@playwright/test';

const devices = [
  { name: 'iPhone 12', width: 390, height: 844 },
  { name: 'iPad', width: 768, height: 1024 },
  { name: 'Desktop', width: 1920, height: 1080 }
];

for (const device of devices) {
  test(`layout on ${device.name}`, async ({ page }) => {
    await page.setViewportSize({
      width: device.width,
      height: device.height
    });

    await page.goto('https://example.com');

The rest: https://github.com/proffesor-for-testing/agentic-qe/blob/HEAD/.kiro/skills/qe-compatibility-testing/SKILL.md