testing-browser-compatibility

name	testing-browser-compatibility
description	Test across multiple browsers and devices for cross-browser compatibility. Use when ensuring cross-browser or device compatibility with BrowserStack, Sauce Labs, LambdaTest, or Kobiton. Trigger with phrases like "test browser compatibility", "check cross-browser", "validate on browsers", "test on real devices", "kobiton test".
allowed-tools	Read, Write, Edit, Grep, Glob, Bash(npx playwright:*), Bash(npm:*), Bash(curl:*)
version	2.20.0
author	Jeremy Longshore <[e-mail]>
license	MIT
tags	["testing","cross-browser","mobile-testing","real-device","cloud-testing"]
compatibility	Designed for Claude Code

Browser Compatibility Tester

Table of Contents

Overview | Instructions (Local / Cloud) | Examples | Error Handling | Output | 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 usage without polyfills or @supports

3. Write compatibility-focused tests:

   • Layout: key elements render at expected positions/sizes per viewport
   • CSS features: modern features degrade gracefully behind @supports
   • JS APIs: polyfills load in older browsers; form inputs (date, color, range) across engines
   • Accessibility: run axe-core per browser (@axe-core/playwright)

4. Execute and capture results:

   • npx playwright test --project=chromium --project=firefox --project=webkit