Initial commit

2025-11-30 08:23:00 +08:00
commit 7cc1eb6f2c
8 changed files with 283 additions and 0 deletions
--- a/.claude-plugin/plugin.json
+++ b/.claude-plugin/plugin.json
@@ -0,0 +1,15 @@
+{
+  "name": "browser-compatibility-tester",
+  "description": "Cross-browser testing with BrowserStack, Selenium Grid, and Playwright - test across Chrome, Firefox, Safari, Edge",
+  "version": "1.0.0",
+  "author": {
+    "name": "Claude Code Plugin Hub",
+    "email": "[email protected]"
+  },
+  "skills": [
+    "./skills"
+  ],
+  "commands": [
+    "./commands"
+  ]
+}
--- a/README.md
+++ b/README.md
@@ -0,0 +1,3 @@
+# browser-compatibility-tester
+
+Cross-browser testing with BrowserStack, Selenium Grid, and Playwright - test across Chrome, Firefox, Safari, Edge
--- a/commands/browser-test.md
+++ b/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)
--- a/plugin.lock.json
+++ b/plugin.lock.json
@@ -0,0 +1,61 @@
+{
+  "$schema": "internal://schemas/plugin.lock.v1.json",
+  "pluginId": "gh:jeremylongshore/claude-code-plugins-plus:plugins/testing/browser-compatibility-tester",
+  "normalized": {
+    "repo": null,
+    "ref": "refs/tags/v20251128.0",
+    "commit": "418d850f12b46294de945a85c833086eccb26c63",
+    "treeHash": "f391ca1e76a51aafc40c50a583efb8f24d625e739b30a1a4bfe6e8fa5e25749d",
+    "generatedAt": "2025-11-28T10:18:11.589776Z",
+    "toolVersion": "publish_plugins.py@0.2.0"
+  },
+  "origin": {
+    "remote": "git@github.com:zhongweili/42plugin-data.git",
+    "branch": "master",
+    "commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390",
+    "repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data"
+  },
+  "manifest": {
+    "name": "browser-compatibility-tester",
+    "description": "Cross-browser testing with BrowserStack, Selenium Grid, and Playwright - test across Chrome, Firefox, Safari, Edge",
+    "version": "1.0.0"
+  },
+  "content": {
+    "files": [
+      {
+        "path": "README.md",
+        "sha256": "163d1d6fbea2b86a673b2c56dfc1181203476eecfb903f5666125810d0d4ed5e"
+      },
+      {
+        "path": ".claude-plugin/plugin.json",
+        "sha256": "ba374468ef066d80551b9319022205589b74196767607475ab94cac9a9c93bf3"
+      },
+      {
+        "path": "commands/browser-test.md",
+        "sha256": "657332fe0c51826b33e7b9a2aa5c6f6c2bfe159f2e88e9c636858d6110d64209"
+      },
+      {
+        "path": "skills/browser-compatibility-tester/SKILL.md",
+        "sha256": "6fee6163715ae2c5fefbb532cb2f02cb3920784873f1ff85f3204d7361ebbd2b"
+      },
+      {
+        "path": "skills/browser-compatibility-tester/references/README.md",
+        "sha256": "70cd6fc8cbd6e86178fb860e3cb15507b84bf895e6a287db5655ede0b0047b6f"
+      },
+      {
+        "path": "skills/browser-compatibility-tester/scripts/README.md",
+        "sha256": "325d3c9d6eafa3f05874718d014861708fa9c48ff8d21fa4897105993a50d8d0"
+      },
+      {
+        "path": "skills/browser-compatibility-tester/assets/README.md",
+        "sha256": "328259c5acfafedef610c48624774a16cfeaad5e8b595b81818f837e1673adc5"
+      }
+    ],
+    "dirSha256": "f391ca1e76a51aafc40c50a583efb8f24d625e739b30a1a4bfe6e8fa5e25749d"
+  },
+  "security": {
+    "scannedAt": null,
+    "scannerVersion": null,
+    "flags": []
+  }
+}
--- a/skills/browser-compatibility-tester/SKILL.md
+++ b/skills/browser-compatibility-tester/SKILL.md
@@ -0,0 +1,55 @@
+---
+name: conducting-browser-compatibility-tests
+description: |
+  This skill enables cross-browser compatibility testing for web applications using BrowserStack, Selenium Grid, or Playwright. It tests across Chrome, Firefox, Safari, and Edge, identifying browser-specific bugs and ensuring consistent functionality. It is used when a user requests to "test browser compatibility", "run cross-browser tests", or uses the `/browser-test` or `/bt` command to assess web application behavior across different browsers and devices. The skill generates a report detailing compatibility issues and screenshots for visual verification. Activates when you request "conducting browser compatibility tests" functionality.
+allowed-tools: Read, Write, Edit, Grep, Glob, Bash
+version: 1.0.0
+---
+
+## Overview
+
+This skill automates cross-browser compatibility testing, ensuring that web applications function correctly across various browsers and devices. It leverages BrowserStack, Selenium Grid, and Playwright to execute tests and identify browser-specific issues.
+
+## How It Works
+
+1. **Configuring Browser Matrix**: Defines the target browsers (Chrome, Firefox, Safari, Edge), versions, operating systems, and device configurations for testing.
+2. **Generating Cross-Browser Tests**: Creates and configures tests to run across the defined browser matrix, handling browser-specific quirks and setting up parallel execution for efficiency.
+3. **Executing Tests**: Runs the tests in parallel using BrowserStack, Selenium Grid, or Playwright, capturing screenshots and logs for analysis.
+4. **Generating Compatibility Report**: Compiles a detailed report highlighting any compatibility issues, including screenshots and error logs, for easy identification and resolution.
+
+## When to Use This Skill
+
+This skill activates when you need to:
+- Ensure a web application functions correctly across different browsers and devices.
+- Identify browser-specific bugs or compatibility issues.
+- Automate cross-browser testing as part of a CI/CD pipeline.
+
+## Examples
+
+### Example 1: Testing a new feature
+
+User request: "Test browser compatibility for the new shopping cart feature."
+
+The skill will:
+1. Configure the browser matrix with the latest versions of Chrome, Firefox, Safari, and Edge.
+2. Execute tests specifically targeting the shopping cart functionality across the configured browsers.
+3. Generate a report highlighting any compatibility issues encountered with the shopping cart feature, including screenshots.
+
+### Example 2: Regression testing after an update
+
+User request: "/bt"
+
+The skill will:
+1. Use the default browser matrix (or a previously defined configuration).
+2. Run all existing tests across the configured browsers and devices.
+3. Provide a comprehensive report detailing any regressions or new compatibility issues introduced by the recent update.
+
+## Best Practices
+
+- **Configuration**: Clearly define the target browser matrix to ensure comprehensive testing.
+- **Test Design**: Write tests that are robust and cover a wide range of user interactions.
+- **Report Analysis**: Carefully analyze the generated reports to identify and address compatibility issues promptly.
+
+## Integration
+
+This skill can be integrated into a CI/CD pipeline using other tools to automate cross-browser testing as part of the deployment process. It can also work with issue tracking systems to automatically create tickets for identified compatibility bugs.
--- a/skills/browser-compatibility-tester/assets/README.md
+++ b/skills/browser-compatibility-tester/assets/README.md
@@ -0,0 +1,7 @@
+# Assets
+
+Bundled resources for browser-compatibility-tester skill
+
+- [ ] test_templates/basic_test.py A basic test template for different browsers.
+- [ ] report_templates/compatibility_report.html An HTML template for generating compatibility reports.
+- [ ] example_configurations/browserstack.yml Example BrowserStack configuration file.
--- a/skills/browser-compatibility-tester/references/README.md
+++ b/skills/browser-compatibility-tester/references/README.md
@@ -0,0 +1,8 @@
+# References
+
+Bundled resources for browser-compatibility-tester skill
+
+- [ ] browserstack_api_docs.md Comprehensive documentation for the BrowserStack API.
+- [ ] selenium_grid_config.md Example configurations for Selenium Grid.
+- [ ] playwright_best_practices.md Best practices for writing Playwright tests.
+- [ ] cross_browser_testing_checklist.md A checklist of common cross-browser compatibility issues.
--- a/skills/browser-compatibility-tester/scripts/README.md
+++ b/skills/browser-compatibility-tester/scripts/README.md
@@ -0,0 +1,7 @@
+# Scripts
+
+Bundled resources for browser-compatibility-tester skill
+
+- [ ] browserstack_config_generator.py Generates BrowserStack configuration files based on user input.
+- [ ] selenium_grid_setup.sh Sets up a Selenium Grid for local testing.
+- [ ] playwright_test_runner.py Executes Playwright tests and generates reports.