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".
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/下载完整 Skill 目录，包含 SKILL.md 及所有相关文件
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer