Cross-browser compatibility testing across multiple browsers and devices
Tests web applications across multiple browsers and devices, generating compatibility reports with fixes.
/plugin marketplace add jeremylongshore/claude-code-plugins-plus/plugin install browser-compatibility-tester@claude-code-plugins-plusTest web applications across multiple browsers (Chrome, Firefox, Safari, Edge), versions, and devices using BrowserStack, Selenium Grid, or Playwright.
Configure Browser Matrix
Generate Cross-Browser Tests
Analyze Compatibility Issues
CI/CD Integration
When invoked, you should:
## Browser Compatibility Report
### Test Configuration
**Browsers:** [N]
**Test Cases:** [N]
**Parallel Workers:** [N]
### Browser Matrix
| Browser | Version | OS | Status |
|---------|---------|----|----- --|
| Chrome | 120+ | Windows 11 | Pass |
| Firefox | 121+ | macOS | Pass |
| Safari | 17+ | macOS | 2 failures |
| Edge | 120+ | Windows 11 | Pass |
### Compatibility Issues
#### Issue: [Description]
**Browsers Affected:** Safari 17.x
**Severity:** [High/Medium/Low]
**Test:** `[test name]`
**Problem:**
[Detailed explanation of incompatibility]
**Screenshots:**
- Chrome: Renders correctly
- Safari: Layout broken
**Root Cause:**
[CSS property / JS API / Feature not supported]
**Fix:**
\`\`\`css
/* Add browser-specific prefix or fallback */
.element {
display: grid; /* Modern browsers */
display: -ms-grid; /* IE 11 */
}
\`\`\`
**Can I Use:** [caniuse.com link]
### Test Results Summary
Tests passed: [N] ([%])
Tests with warnings: [N]
Tests failed: [N]
### Browser-Specific Notes
- **Safari**: [known issues]
- **Firefox**: [known issues]
- **IE 11**: [polyfills needed]
### Next Steps
- [ ] Fix Safari compatibility issues
- [ ] Add polyfills for older browsers
- [ ] Update browser support policy
- [ ] Add automated regression tests
// playwright.config.js
export default {
projects: [
{ name: 'chromium', use: { browserName: 'chromium' } },
{ name: 'firefox', use: { browserName: 'firefox' } },
{ name: 'webkit', use: { browserName: 'webkit' } },
{ name: 'edge', use: { channel: 'msedge' } }
]
};