testing-browser-compatibility

# Browser Compatibility Tester ## Table of Contents [Overview](#overview) | [Instructions](#instructions) (Local / Cloud) | [Examples](#examples) | [Error Handling](#error-handling) | [Output](#output) | [Resources](#resources) ## Overview Test web applications across multiple browsers, rendering engines, and real devices. Validates CSS rendering, JavaScript API support, layout consistency, and interactive behavior across Chromium (Chrome, Edge), Gecko (Firefox), and WebKit (Safari) -- locally with Playwright or on real devices via BrowserStack, Sauce Labs, LambdaTest, or Kobiton. ## Prerequisites - Playwright installed (`npx playwright install --with-deps`) and application running at a test URL - For cloud testing: provider credentials in environment variables (see `${CLAUDE_SKILL_DIR}/references/cloud-providers.md`) ## Instructions ### Mode 1: Local Testing (Playwright) Default mode. Zero cloud accounts needed. 1. Define the browser matrix from project `browserslist` config or use defaults: - Desktop: Chrome (latest), Firefox (latest), Safari (latest), Edge (latest) - Mobile: iPhone 14 (WebKit), Pixel 7 (Chromium) - Viewports: 375px, 768px, 1280px, 1920px 2. Scan the codebase for compatibility risks: - Grep for modern JS APIs (`IntersectionObserver`, `structuredClone`, `Array.at()`, `Promise.withResolvers()`) - Grep for modern CSS (`container queries`, `has()`, `@layer`, `subgrid`, `color-mix()`) - Cross-reference against caniuse data; flag usag...