compatibility-testing

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"]

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 ;

 devices = [
  { : , : , :  },
  { : , : , :  },
  { : , : , :  }
];

 ( device  devices) {
  (,  ({ page }) => {
     page.({
      : device.,
      : device.
    });

     page.();

     nav =  page.();
     (device. < ) {
      
      ( nav.()).();
    }  {
      
      ( nav.()).();
    }
  });
}