gh-jeremylongshore-claude-code-plugins-plus-plugins-testing-browser-compatibility-tester/commands/browser-test.md

description, shortcut

description	shortcut
Cross-browser compatibility testing across multiple browsers and devices	bt

Browser Compatibility Tester

Test web applications across multiple browsers (Chrome, Firefox, Safari, Edge), versions, and devices using BrowserStack, Selenium Grid, or Playwright.

What You Do

1. Configure Browser Matrix

   • Define target browsers and versions
   • Set up device configurations
   • Configure OS combinations

2. Generate Cross-Browser Tests

   • Create tests that run across all browsers
   • Handle browser-specific quirks
   • Set up parallel execution

3. Analyze Compatibility Issues

   • Identify browser-specific failures
   • Compare rendering across browsers
   • Report CSS/JavaScript compatibility issues

4. CI/CD Integration

   • Configure automated browser testing
   • Set up cloud testing (BrowserStack/Sauce Labs)
   • Implement test result aggregation

Usage Pattern

When invoked, you should:

1. Identify critical user flows to test
2. Generate browser compatibility matrix
3. Create cross-browser test suite
4. Set up testing infrastructure (local or cloud)
5. Run tests across all target browsers
6. Generate compatibility report with screenshots

Output Format

## 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

Configuration Example

// 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' } }
  ]
};

Supported Tools

• Playwright (multiple browsers)
• Selenium WebDriver
• BrowserStack (cloud testing)
• Sauce Labs (cloud testing)
• LambdaTest (cloud testing)
• Puppeteer (Chromium)