compatibility-testing

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

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');

    const nav = await page.locator('nav');
    if (device.width < 768) {
      // Mobile: hamburger menu
      expect(await nav.locator('.hamburger')).toBeVisible();
    } else {
      // Desktop: full menu
      expect(await nav.locator('.menu-items')).toBeVisible();
    }
  });
}