| 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 <jeremy@intentsolutions.io> |
| license | MIT |
| tags | ["testing","cross-browser","mobile-testing","real-device","cloud-testing"] |
| compatibility | Designed for Claude Code, also compatible with Codex and OpenClaw |
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.
-
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
-
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
-
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)
-
Execute and capture results:
npx playwright test --project=chromium --project=firefox --project=webkit
