Initial commit

commands/browser-test.md

@@ -0,0 +1,127 @@
+---
+description: Cross-browser compatibility testing across multiple browsers and devices
+shortcut: 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
+
+```markdown
+## 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
+
+```javascript
+// 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)