Test across multiple browsers and devices for cross-browser compatibility. Use when ensuring cross-browser or device compatibility. Trigger with phrases like "test browser compatibility", "check cross-browser", or "validate on browsers".
npxskills add jeremylongshore/claude-code-plugins-plus-skills--skill testing-browser-compatibilityLoading…
Overview | Instructions (Local / Cloud) | Examples | Error Handling | Output | Resources
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.
npx playwright install --with-deps) and application running at a test URL${CLAUDE_SKILL_DIR}/references/cloud-providers.md)Default mode. Zero cloud accounts needed.
Define the browser matrix from project browserslist config or use defaults:
Scan the codebase for compatibility risks:
IntersectionObserver, structuredClone, Array.at(), Promise.withResolvers())container queries, has(), @layer, subgrid, color-mix())@supportsWrite compatibility-focused tests:
@supports@axe-core/playwright)Execute and capture results:
npx playwright test --project=chromium --project=firefox --project=webkitApplies when real physical devices, broader OS coverage, or carrier network conditions are required beyond what Playwright emulation can replicate. Read ${CLAUDE_SKILL_DIR}/references/cloud-providers.md for full auth, API, and capabilities details.
Provider selection:
| Need | Provider |
|---|---|
| Broadest browser/OS matrix (3,000+ combos) | BrowserStack |
| Enterprise CI/CD, Sauce Connect tunnel | Sauce Labs |
| Auto-healing selectors, smart testing | LambdaTest |
| Real physical devices, scriptless automation | Kobiton |
Never hardcode credentials. Set provider env vars (BROWSERSTACK_USERNAME/ACCESS_KEY, SAUCE_USERNAME/ACCESS_KEY, LT_USERNAME/ACCESS_KEY, KOBITON_USERNAME/API_KEY).
${CLAUDE_SKILL_DIR}/references/cloud-providers.md)${CLAUDE_SKILL_DIR}/references/ci-cd-integration.md)Pre-built device matrices: ${CLAUDE_SKILL_DIR}/references/device-matrix.md (top 10, mobile-first, enterprise, Kobiton real-device).
Playwright multi-browser config:
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
{ name: 'webkit', use: { ...devices['Desktop Safari'] } },
{ name: 'mobile-chrome', use: { ...devices['Pixel 7'] } },
{ name: 'mobile-safari', use: { ...devices['iPhone 14'] } },
],
});
Cross-browser layout test:
test('nav renders correctly across browsers', async ({ page }) => {
await page.goto('/');
const nav = page.locator('nav');
await expect(nav).toBeVisible();
const box = await nav.boundingBox();
expect(box.width).toBeGreaterThan(300);
});
Kobiton real-device capabilities:
{
"platformName": "iOS",
"appium:deviceName": "iPhone 15 Pro",
"appium:platformVersion": "17",
"browserName": "Safari",
"kobiton:options": {
"sessionName": "Safari Compat Test",
"deviceGroup": "KOBITON",
"captureScreenshots": true
}
}
| Error | Cause | Solution |
|---|---|---|
| WebKit fails, Chromium passes | CSS property unsupported in Safari | Add -webkit- prefix or @supports fallback |
| Date input renders differently | Browsers implement <input type="date"> differently | Use custom date picker component |
| Test passes locally, fails on cloud | Real device rendering differs from emulation | Run critical paths on real devices for final validation |
| Kobiton device unavailable | Device in use or offline | Query GET /v1/devices for online devices; use deviceGroup for flexible matching |
| Cloud session timeout | Long test on slow device | Increase sessionTimeout; split into smaller test files |
tests/compatibility/
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).